/*
 * El panel de la organizacion.
 *
 * Casi no hay estilos acá: los controles, las tarjetas, los botones y los
 * campos son los del design system. Esto define lo propio de la pagina — el
 * ancho de lectura, la barra de arriba, la grilla de eventos y las pestañas de
 * un evento.
 *
 * Se usa tanto en una notebook como parado en el salon con el telefono, asi
 * que todo lo que se toca cumple el minimo tactil y la grilla se acomoda sola.
 */

body.panel {
  min-height: 100dvh;
  background: var(--color-bg);
}

.panel__app {
  max-width: 60rem;
  margin: 0 auto;
  padding:
    max(var(--space-4), env(safe-area-inset-top))
    max(var(--space-5), env(safe-area-inset-right))
    var(--space-16)
    max(var(--space-5), env(safe-area-inset-left));
}

/* --- barra de arriba --- */

.panel-barra {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.panel-barra__marca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  color: var(--color-text);
}

.panel-barra__punto {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  flex: none;
}

.panel-barra__hueco { flex: 1; }

.panel-barra__quien {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 0;
}

.panel-barra__quien span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-barra__foto {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex: none;
}

@media (max-width: 34rem) {
  .panel-barra__quien span { display: none; }
}

/* --- encabezado de pagina --- */

.panel-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.panel-cabeza h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.panel-cabeza p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --- grilla de eventos --- */

.panel-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}

/* La tarjeta entera es el objetivo: en un telefono, apuntarle a un link de
   texto dentro de una tarjeta es pedir precision que no hay. */
.panel-evento {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.panel-evento:hover { border-color: var(--color-border-hover); }
.panel-evento:active { transform: scale(0.99); }
.panel-evento:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.panel-evento__nombre {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
}

.panel-evento__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* --- pestañas de un evento --- */

.panel-pestanas {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.panel-pestanas::-webkit-scrollbar { display: none; }

.panel-pestana {
  flex: none;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  /* El subrayado va pegado al borde de abajo del contenedor: es lo que hace
     que la pestaña se lea como una pestaña y no como un boton mas. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.panel-pestana:hover { color: var(--color-text); }
.panel-pestana.is-on { color: var(--color-text); border-bottom-color: var(--color-accent); }
.panel-pestana:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* --- secciones de una pestaña --- */

.panel-seccion {
  display: grid;
  gap: var(--space-5);
  max-width: 34rem;
}

.panel-seccion + .panel-seccion { margin-top: var(--space-10); }

/* Los bloques de ajustes no llegan al ancho de la pagina: una fila de
   etiqueta y control de 60rem deja la etiqueta y el control en dos extremos
   con medio metro de nada en el medio. La grilla de eventos si usa todo. */
.panel__app .ds-bloque { max-width: 44rem; }

/* --- links para repartir --- */

.panel-link {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.panel-link__titulo {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.panel-link__nota {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
}

.panel-link__fila { display: flex; align-items: center; gap: var(--space-2); }

.panel-link__url {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-field);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- album --- */

.panel-album {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-2);
}

.panel-album figure {
  margin: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-thumb);
  overflow: hidden;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}

.panel-album img { width: 100%; height: 100%; object-fit: cover; }

/* La zona donde se sueltan las fotos. Grande y explicita: cargar el album es
   de las pocas cosas que se hacen una sola vez por evento y conviene que no
   haya que buscarla. */
.panel-soltar {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.panel-soltar:hover,
.panel-soltar.is-sobre {
  border-color: var(--color-border-accent);
  background: var(--color-accent-soft);
}

.panel-soltar .ic { width: 1.75rem; height: 1.75rem; color: var(--color-text-muted); }

/* --- estados vacios --- */

.panel-vacio {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

.panel-vacio p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 32ch;
}

/* --- entrar --- */

.panel-entrar {
  display: grid;
  place-items: center;
  gap: var(--space-6);
  min-height: 80dvh;
  text-align: center;
}

.panel-entrar__marca {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.panel-entrar__titulo {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.panel-entrar__sub {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 30ch;
}

.panel-entrar__acciones { display: grid; gap: var(--space-3); min-width: min(20rem, 90vw); }

/* --- carga inicial --- */

.cargando { min-height: 60dvh; display: grid; place-items: center; }

.cargando__marca {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-accent);
  animation: respirar 1.8s ease-in-out infinite;
}

@keyframes respirar {
  0%, 100% { transform: scale(0.9); opacity: 0.4; }
  50% { transform: scale(1.05); opacity: 1; }
}