/* =====================================================================
   FNDGE — Base, layout y componentes
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  transition: background var(--vel-base) var(--curva);
}

h1, h2, h3 { font-family: var(--fuente-titulo); line-height: 1.2; margin: 0 0 var(--e-3); }
.titulo-grupo { margin-top: var(--e-6); }
.reincorporar:not([hidden]) { margin-top: var(--e-3); }
h1 { font-size: var(--t-2xl); font-weight: 700; color: var(--marca); }
h2 { font-size: var(--t-xl); font-weight: 600; }
h3 { font-size: var(--t-lg); font-weight: 600; }
p  { margin: 0 0 var(--e-3); }

a { color: var(--azul-500); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

/* Sólo para lectores de pantalla. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Enlace de salto: aparece al tabular, es lo primero que recibe foco. */
.salto-contenido {
  position: absolute; left: var(--e-2); top: -100px; z-index: 100;
  background: var(--azul-800); color: #fff; padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm); transition: top var(--vel-rapida) var(--curva);
}
.salto-contenido:focus { top: var(--e-2); }

/* Un solo anillo de foco para toda la app, siempre visible.
   Sin border-radius acá: forzaba 8px en CUALQUIER elemento enfocado, así que
   un botón pill o circular cambiaba de forma al recibir el foco y volvía a la
   suya al perderlo. El navegador ya recorta el outline a las esquinas reales. */
:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
}

/* =====================================================================
   Estructura
   ===================================================================== */

.cabecera {
  position: sticky; top: 0; z-index: 20;
  height: var(--alto-cabecera);
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-4);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.cabecera__marca {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: var(--t-lg); color: var(--marca);
  text-decoration: none;
}
.cabecera__logo { height: 34px; width: auto; }
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-1); }

.contenido {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4);
  padding-bottom: calc(var(--alto-nav) + var(--e-8) + env(safe-area-inset-bottom, 0px));
}

/* Navegación inferior en el celular. */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Con roles que ven muchas secciones (admin, organizador) los ítems no
     entran en el ancho de un celular. Antes se desbordaban fuera de la
     pantalla sin ninguna forma de llegar a ellos — ahora, si no entran
     todos, la barra se puede desplazar en horizontal para alcanzarlos. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
/* El atributo hidden (usado al cerrar sesión) tiene que ganarle a "display:
   flex" de arriba, o la barra sigue viéndose aunque el JS la marque oculta. */
.nav[hidden] { display: none; }
.nav__item {
  flex: 1 1 68px;
  min-width: 68px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: var(--alto-nav);
  padding: var(--e-2) var(--e-1);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-xs); font-weight: 600;
  color: var(--texto-3);
  text-decoration: none;
  transition: color var(--vel-rapida) var(--curva);
}
.nav__item:hover { color: var(--azul-600); }
.nav__item[aria-current="page"] { color: var(--azul-800); }
.nav__icono { font-size: 22px; line-height: 1; transition: transform var(--vel-base) var(--rebote); }
/* Las etiquetas de dos palabras ("Mis cargas") no tienen que partirse en dos
   líneas: eso hacía que ese botón quedara más alto y desalineado con el
   resto de la barra. Si en un celular muy angosto no entra igual, se achica
   un poco antes que partirse. */
.nav__etiqueta {
  white-space: nowrap;
  font-size: clamp(9px, 2.6vw, var(--t-xs));
}
.nav__item[aria-current="page"] .nav__icono { transform: translateY(-2px) scale(1.12); }

/* En escritorio la barra inferior pasa a ser lateral. */
/* 768px y no 900: una tablet de 768 —uso habitual backstage— tenía ancho de
   sobra y seguía con la barra inferior en scroll horizontal, como un celular. */
@media (min-width: 768px) {
  .nav {
    position: sticky; top: var(--alto-cabecera); bottom: auto;
    flex-direction: column; align-self: start;
    width: 220px; min-height: calc(100vh - var(--alto-cabecera));
    /* Con muchas secciones (admin, organizador) la barra lateral es más alta
       que la pantalla. Antes, para llegar a los últimos ítems había que
       desplazar TODO el contenido principal hasta el final de la página —
       muy molesto en pantallas largas como el guion. Con su propio scroll
       vertical, la barra se recorre sola sin tocar el contenido. */
    max-height: calc(100vh - var(--alto-cabecera));
    overflow-y: auto;
    border-top: 0; border-right: 1px solid var(--borde);
    padding: var(--e-3);
    gap: 2px;
  }
  /* Sin esto la scrollbar del punto anterior queda invisible en Mac (se
     esconde sola) y nadie se entera de que hay más opciones abajo — así,
     al menos, se ve una franja angosta que invita a arrastrar. */
  .nav::-webkit-scrollbar { display: block; width: 8px; }
  .nav::-webkit-scrollbar-thumb { background: var(--borde); border-radius: var(--r-full); }
  .nav::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }
  .nav { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
  .nav__item {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: var(--e-3);
    /* Con mouse (no dedo) no hace falta el mínimo táctil de --area-toque:
       un poco más compacto acá es lo que evita que roles con muchas
       secciones (admin, organizador) necesiten scrollear para nada. */
    min-height: 40px;
    font-size: var(--t-base); border-radius: var(--r-md);
    padding: var(--e-2) var(--e-4);
  }
  .nav__item[aria-current="page"] { background: var(--azul-50); }
  /* En la barra lateral hay ancho de sobra: la etiqueta vuelve a su tamaño
     normal (el achique de "Mis cargas" es sólo un recurso para la barra
     angosta del celular). */
  .nav__etiqueta { font-size: inherit; }
  .app { display: flex; max-width: var(--ancho-max-esc); margin: 0 auto; gap: var(--e-6); }
  .app__principal { flex: 1; min-width: 0; }
  .contenido { padding-bottom: var(--e-10); max-width: 720px; margin: 0; }
}

/* =====================================================================
   Tarjetas
   ===================================================================== */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: var(--e-5);
  margin-bottom: var(--e-4);
}
.tarjeta--plana { border: 0; background: var(--azul-50); }
.tarjeta__cabecera { display: flex; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-3); }
.tarjeta__titulo { margin: 0; font-size: var(--t-lg); }
.tarjeta__meta { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }

/* Tablas de control (Delegaciones, comedor...): con overflow-x propio, para
   que en el celular se pueda deslizar en vez de romper el ancho de la
   pantalla. */
.tabla-marco { overflow-x: auto; margin-bottom: var(--e-4); border: 1px solid var(--borde); border-radius: var(--r-lg); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--superficie); }
.tabla th, .tabla td { padding: var(--e-3) var(--e-4); text-align: left; white-space: nowrap; }
.tabla thead th { background: var(--azul-50); color: var(--texto-2); font-weight: 700; }
.tabla tbody tr:not(:last-child) { border-bottom: 1px solid var(--borde); }

/* El número único es el dato que todos buscan primero: se destaca. */
.numero-unico {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: 0.06em;
  background: var(--amarillo); color: var(--amarillo-osc);
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-full);
  white-space: nowrap;
}

/* =====================================================================
   Botones
   ===================================================================== */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--area-toque);
  padding: var(--e-3) var(--e-5);
  font-family: var(--fuente-texto); font-size: var(--t-base); font-weight: 700;
  border: 2px solid transparent; border-radius: var(--r-full);
  cursor: pointer; text-decoration: none;
  transition: transform var(--vel-rapida) var(--curva),
              background var(--vel-rapida) var(--curva),
              border-color var(--vel-rapida) var(--curva);
}
.boton:active { transform: scale(0.97); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.boton--primario { background: var(--azul-500); color: #fff; }
.boton--primario:hover:not(:disabled) { background: var(--azul-600); }

.boton--secundario { background: transparent; color: var(--azul-800); border-color: var(--azul-800); }
.boton--secundario:hover:not(:disabled) { background: var(--azul-50); }

.boton--peligro { background: transparent; color: var(--rojo-osc); border-color: var(--rojo); }
.boton--peligro:hover:not(:disabled) { background: var(--rojo-bg); }

.boton--fantasma { background: transparent; color: var(--texto-2); padding: var(--e-2) var(--e-3); }
.boton--fantasma:hover:not(:disabled) { background: var(--gris-100); }

.boton--bloque { width: 100%; }

.boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--area-toque); height: var(--area-toque);
  background: none; border: 0; border-radius: var(--r-full);
  cursor: pointer; color: var(--texto-2); font-size: 22px;
  transition: background var(--vel-rapida) var(--curva);
}
.boton-icono:hover { background: var(--gris-100); }

/* Globito de notificaciones sin leer. */
.campanita { position: relative; }
.campanita__contador {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--rojo); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: var(--r-full);
}

/* =====================================================================
   Formularios
   ===================================================================== */

.campo { margin-bottom: var(--e-4); }
.campo__etiqueta {
  display: block; margin-bottom: var(--e-2);
  font-size: var(--t-sm); font-weight: 700; color: var(--texto);
}
.campo__requerido { color: var(--rojo); }
.campo__ayuda { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texto-3); }
.campo__error {
  margin: var(--e-2) 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--rojo-osc);
  display: flex; align-items: flex-start; gap: var(--e-1);
}

.entrada, .selector, .area-texto {
  width: 100%;
  min-height: var(--area-toque);
  padding: var(--e-3) var(--e-4);
  font-family: inherit;
  font-size: var(--t-base);       /* 16px o iOS hace zoom al enfocar */
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid var(--borde-campo);
  border-radius: var(--r-md);
  transition: border-color var(--vel-rapida) var(--curva);
}
.entrada:hover, .selector:hover, .area-texto:hover { border-color: var(--azul-300); }
.entrada:focus, .selector:focus, .area-texto:focus { border-color: var(--azul-500); outline-offset: 1px; }
.entrada[aria-invalid="true"], .selector[aria-invalid="true"] { border-color: var(--rojo); }
.area-texto { min-height: 96px; resize: vertical; }
.selector { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A70' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--e-4) center; background-size: 18px; padding-right: var(--e-10); }

/* Campo de contraseña: el ojo va dentro del borde del campo. */
.campo-clave { position: relative; }
.campo-clave .entrada { padding-right: calc(var(--area-toque) + var(--e-2)); }
.campo-clave__ojo {
  position: absolute; top: 50%; right: var(--e-1);
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--area-toque); height: var(--area-toque);
  background: none; border: 0; border-radius: var(--r-full);
  color: var(--texto-3); cursor: pointer;
  transition: color var(--vel-rapida) var(--curva), background var(--vel-rapida) var(--curva);
}
.campo-clave__ojo:hover { color: var(--azul-600); background: var(--gris-100); }
.campo-clave__ojo[aria-pressed="true"] { color: var(--azul-600); }

.casilla { display: flex; align-items: flex-start; gap: var(--e-3); cursor: pointer; }
.casilla input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--azul-500); flex-shrink: 0; }

.campo-archivo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4);
  border: 2px dashed var(--borde-campo); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--vel-rapida) var(--curva), background var(--vel-rapida) var(--curva);
}
.campo-archivo:hover { border-color: var(--azul-300); background: var(--azul-50); }
.campo-archivo input { position: absolute; opacity: 0; width: 0; height: 0; }
/* El input real mide 0x0, así que su anillo de foco se dibujaba sobre nada:
   quien navega con teclado no veía dónde estaba parado al llegar al selector
   de archivo. Se pasa el anillo al recuadro visible. */
.campo-archivo:focus-within {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
  border-color: var(--azul-500);
}
/* El atributo hidden (al tildar "sin música") tiene que ganarle al display:flex de arriba. */
.campo-archivo[hidden] { display: none; }

.fila { display: grid; gap: var(--e-4); }
@media (min-width: 560px) { .fila--2 { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   Distintivos de estado
   ===================================================================== */

.distintivo {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  font-size: var(--t-xs); font-weight: 700;
  border-radius: var(--r-full);
  background: var(--gris-100); color: var(--texto-2);
}
.distintivo--ok        { background: var(--verde-bg); color: var(--verde-osc); }
.distintivo--pendiente { background: var(--ambar-bg); color: var(--ambar); }
.distintivo--error     { background: var(--rojo-bg);  color: var(--rojo-osc); }
.distintivo--escena    { background: var(--verde-osc); color: #fff; } /* 9:1 — con --verde daba 4.25:1 */
.distintivo--atento    { background: var(--ambar-bg); color: var(--ambar); }

/* El punto que late cuando algo está pasando en el escenario ahora. */
.punto-vivo {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .punto-vivo { animation: latido 1.8s ease-in-out infinite; }
  @keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}

/* =====================================================================
   Avisos y estados vacíos
   ===================================================================== */

.aviso {
  display: flex; gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--azul-500);
  background: var(--azul-50);
  font-size: var(--t-sm);
  margin-bottom: var(--e-4);
}
.aviso--error  { border-color: var(--rojo);  background: var(--rojo-bg);  color: var(--rojo-osc); }
.aviso--exito  { border-color: var(--verde); background: var(--verde-bg); color: var(--verde-osc); }
.aviso--atento { border-color: var(--dorado); background: var(--ambar-bg); color: var(--ambar); }

.vacio { text-align: center; padding: var(--e-10) var(--e-4); }
.vacio__mascota { width: 128px; height: auto; margin: 0 auto var(--e-4); display: block; }
.vacio__titulo { font-family: var(--fuente-titulo); font-size: var(--t-xl); color: var(--marca); margin: 0 0 var(--e-2); }
.vacio__texto { color: var(--texto-2); max-width: 34ch; margin: 0 auto var(--e-5); }

/* =====================================================================
   Carga y esqueletos
   ===================================================================== */

.esqueleto {
  background: var(--gris-100);
  border-radius: var(--r-md);
  height: 96px; margin-bottom: var(--e-3);
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto { animation: respirar 1.4s ease-in-out infinite; }
  @keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
}

.girador {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* =====================================================================
   Mensajes flotantes
   ===================================================================== */

.brindis {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--alto-nav) + var(--e-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--e-3);
  max-width: calc(100vw - var(--e-8));
  padding: var(--e-3) var(--e-5);
  background: var(--azul-900); color: #fff;
  border-radius: var(--r-full);
  box-shadow: var(--sombra-md);
  font-size: var(--t-sm); font-weight: 600;
}
.brindis--error { background: var(--rojo-osc); }
.brindis--exito { background: var(--verde-osc); }
@media (prefers-reduced-motion: no-preference) {
  .brindis { animation: subir var(--vel-base) var(--rebote); }
  @keyframes subir {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
  }
}

/* Transición al cambiar de vista. Sutil: 8px y 220ms. */
@media (prefers-reduced-motion: no-preference) {
  .vista-entra { animation: aparecer var(--vel-base) var(--curva); }
  @keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* =====================================================================
   Pantallas de acceso (login, registro) — nivel festivo
   ===================================================================== */

.acceso {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--e-6) var(--e-4);
  background: var(--azul-300);
}
.acceso__panel {
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--e-6);
  box-shadow: var(--sombra-md);
}
.acceso__logo {
  display: block; width: auto; height: 88px;
  margin: 0 auto var(--e-5);
  /* El archivo trae la versión blanca del logo: va sobre el celeste, no
     dentro del panel. Una sombra suave lo despega del fondo. */
  filter: drop-shadow(0 2px 6px rgba(7, 47, 92, 0.22));
}
@media (min-width: 560px) { .acceso__logo { height: 112px; } }
.acceso__pie { margin-top: var(--e-5); text-align: center; font-size: var(--t-sm); color: var(--texto-2); }

/* Las mascotas asoman por debajo del panel, como en la portada. */
.acceso__mascotas {
  display: flex; justify-content: center; gap: var(--e-2);
  margin-top: calc(var(--e-6) * -1); pointer-events: none;
}
.acceso__mascotas img { height: 96px; width: auto; }

/* =====================================================================
   Panel de administración
   ===================================================================== */

/* Pestañas de sección. En el celular se desplazan a lo ancho en vez de
   apilarse: ocho secciones apiladas comerían media pantalla. */
.pestanias {
  display: flex; gap: var(--e-2);
  margin: 0 0 var(--e-5);
  padding-bottom: var(--e-2);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* En escritorio sobra ancho: en vez de obligar a desplazarse para llegar a
   las últimas pestañas (Admin, con varias secciones, es el caso que más se
   nota), se acomodan en más de una línea y se ven todas de entrada. */
@media (min-width: 768px) {
  .pestanias { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
}
.pestania {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--area-toque);
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm); font-weight: 700;
  color: var(--texto-2); text-decoration: none;
  background: var(--gris-100);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: background var(--vel-rapida) var(--curva), color var(--vel-rapida) var(--curva);
}
.pestania:hover { background: var(--azul-50); color: var(--azul-800); }
.pestania[aria-current="page"] { background: var(--azul-800); color: #fff; }

/* Botonera al pie de una tarjeta. */
.acciones {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-top: var(--e-4);
}
.acciones .boton { flex: 1 1 auto; min-width: 120px; }

/* Rejilla de fotos para moderar. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--e-4);
}
.foto {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.foto img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--gris-100);
}
.foto figcaption { padding: var(--e-3) var(--e-4) 0; font-size: var(--t-sm); }
.foto .acciones { padding: var(--e-3) var(--e-4) var(--e-4); margin-top: var(--e-2); }

/* Campo de sólo lectura para copiar enlaces. */
.entrada[readonly] {
  background: var(--gris-50); color: var(--texto-2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-sm); cursor: pointer;
}

/* Número de orden dentro del guion. */
.orden {
  flex-shrink: 0;
  display: grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 var(--e-2);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: var(--t-base);
  color: var(--azul-800); background: var(--azul-50);
  border-radius: var(--r-full);
}

/* Botón grande del escenario: se usa de noche y con apuro. */
.boton--grande { min-height: 56px; font-size: var(--t-lg); }

/* Panel de edición desplegable dentro de una tarjeta. */
.edicion {
  margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}

/* Ficha de datos técnicos. */
.ficha { margin: var(--e-4) 0 0; font-size: var(--t-sm); }
.ficha dt { font-weight: 700; color: var(--texto-2); margin-top: var(--e-3); }
.ficha dd { margin: 0; }

/* =====================================================================
   Rider — plano del escenario
   ===================================================================== */

.escenario-marco { position: relative; margin: 0 0 var(--e-5); }

/* Fondo semitransparente detrás del emergente de un elemento: además de
   oscurecer el resto, tocarlo afuera es la forma más obvia de cerrarlo. */
#detalle-fondo {
  position: absolute; inset: 0;
  background: rgba(7, 47, 92, 0.35);
  border-radius: var(--r-md);
  z-index: 8;
}

/* El emergente de cada elemento del plano: se ancla arriba o abajo de la
   ficha (según su posición) en vez de aparecer al final de la página. */
#detalle {
  position: absolute;
  z-index: 9;
  width: min(300px, 88vw);
  max-width: calc(100% - 16px);
}
#detalle .tarjeta {
  margin: 0; box-shadow: var(--sombra-lg, 0 10px 30px rgba(0,0,0,.25));
  /* Con mezcla + conexión + nota + etiqueta el contenido puede ser más alto
     que la pantalla si el celular está en horizontal o el teclado ocupa
     medio visor: nunca se corta, se scrollea adentro del propio emergente. */
  max-height: 70vh;
  overflow-y: auto;
}

/* Trapecio: más angosto arriba (fondo) y más ancho abajo (frente). Le da
   perspectiva sin necesidad de dibujo, y refuerza dónde está el público. */
.escenario {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(0deg,  var(--gris-100) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(90deg, var(--gris-100) 0 1px, transparent 1px 10%),
    var(--superficie);
  border: 2px solid var(--azul-800);
  border-radius: var(--r-md);
  overflow: hidden;
  touch-action: none;   /* el arrastre no debe hacer scroll de la página */
}

.escenario__fondo {
  position: absolute; top: 0; left: 0; right: 0;
  padding: var(--e-2);
  text-align: center;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em;
  color: var(--texto-3);
  background: var(--gris-100);
}

/* El frente va abajo, marcado y en color: es la referencia que evita que el
   plano se lea al revés. */
.escenario__frente {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--e-2);
  text-align: center;
  font-family: var(--fuente-titulo);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.1em;
  color: #fff;
  background: var(--azul-800);
}

/* Pieza de instrumento sobre el plano.
   Ojo con el nombre: antes se llamaba .ficha y chocaba con la lista de datos
   técnicos de la pantalla de sonido, que usa esa misma clase. Al tener
   position:absolute, la lista técnica se despegaba de su tarjeta y se apilaba
   sobre el costado de la pantalla. */
.pieza {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; padding: var(--e-2);
  background: var(--blanco);
  border: 2px solid var(--azul-300);
  border-radius: var(--r-md);
  cursor: grab; touch-action: none;
  font-family: inherit;
  box-shadow: var(--sombra-sm);
}
.pieza:active { cursor: grabbing; }
.pieza--activa { border-color: var(--naranja); border-width: 3px; z-index: 5; }
.pieza__icono { font-size: 22px; line-height: 1; }
.pieza__nombre {
  font-size: 12px; font-weight: 700; color: var(--texto-2);
  max-width: 78px; text-align: center; line-height: 1.15;
}
/* Qué mezcla (M1 a M6) eligieron, visible sin tocar la ficha. */
.pieza__chip {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--azul-800); background: var(--azul-50);
  border-radius: var(--r-sm); padding: 1px 5px;
  max-width: 78px; text-align: center; line-height: 1.3;
}
/* Insignia de conexión sobre la ficha del plano: qué eligieron (XLR/Plug) o
   el aviso de que falta el micrófono. En el acordeón hay dos — una por
   mano — así que cada una va en la esquina de su lado para distinguirlas;
   el resto de los instrumentos sólo usa la de la derecha. */
.pieza__badge-conexion {
  position: absolute; top: -8px;
  font-size: 13px; line-height: 1;
  background: var(--blanco); border-radius: 999px;
  min-width: 22px; height: 22px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
}
.pieza__badge-conexion--der { right: -8px; }
.pieza__badge-conexion--izq { left: -8px; }
.pieza__badge-conexion--aviso { border: 2px solid var(--rojo); }
.pieza__badge-conexion--info { border: 2px solid var(--azul-500); color: var(--azul-800); }

/* Paleta de instrumentos. */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--e-2);
  max-height: 260px; overflow-y: auto;
}
.paleta__item {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: var(--area-toque);
  padding: var(--e-2) var(--e-3);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--texto); text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--vel-rapida) var(--curva), background var(--vel-rapida) var(--curva);
}
.paleta__item:hover { border-color: var(--azul-500); background: var(--azul-50); }

/* Tarjeta que además es un enlace: hereda el aspecto y agrega la señal de
   que se puede tocar. */
a.tarjeta--enlace {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--vel-rapida) var(--curva),
              transform var(--vel-rapida) var(--curva);
}
a.tarjeta--enlace:hover { border-color: var(--azul-500); }
a.tarjeta--enlace:active { transform: scale(0.995); }

/* =====================================================================
   Buscador del guion y salto a una posición
   ===================================================================== */

.resultado {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--borde);
}
.resultado:first-of-type { border-top: 0; }

/* Campo de posición + botón, juntos y compactos. */
.ir-a { display: inline-flex; align-items: center; gap: var(--e-2); }
.ir-a .entrada { width: 72px; text-align: center; padding-left: var(--e-2); padding-right: var(--e-2); }

/* Destello al saltar a una actuación desde el buscador: entre veinte tarjetas
   iguales, sin esto no se sabe en cuál cayó el scroll. */
.tarjeta--senalada { border-color: var(--naranja); border-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .tarjeta--senalada { animation: destello 2.5s var(--curva); }
  @keyframes destello {
    0%, 100% { background: var(--superficie); }
    15%, 55% { background: var(--ambar-bg); }
  }
}

/* El cartel de la encuesta de cierre: <a> es inline por defecto, y no se le
   puede poner display:block inline en el HTML porque pisaría el atributo
   hidden (ambos son estilos del mismo elemento; el inline gana siempre). */
#banner-encuesta:not([hidden]) {
  display: block;
}


/* =====================================================================
   Clases que las vistas ya usaban y no estaban definidas
   =====================================================================
   Se detectaron cruzando las clases de js/**.js contra las del CSS. Hasta
   acá el marcado existía y el estilo no, así que se veían sin formato. */

/* Panel de números del comedor (js/vistas/cocinero.js). Sin esto, el número
   y su etiqueta salían pegados: "24Total a comer". */
.comedor-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}
.comedor-resumen__dato {
  display: flex; flex-direction: column; gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  font-size: var(--t-sm); color: var(--texto-2);
}
.comedor-resumen__dato strong {
  font-family: var(--fuente-titulo);
  font-size: var(--t-xl); line-height: 1; color: var(--marca);
}

/* Botón chico para las filas de la tabla del comedor. */
.boton--pequeno {
  min-height: 36px;
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
}

/* Video embebido (js/ui.js). Sin esto el iframe salía en 304x154 px, el
   tamaño por defecto del navegador: el streaming y el video del jurado se
   veían como una estampilla. */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Lista sin viñetas para datos cortos (restricciones alimentarias). */
.lista-simple {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--e-2);
}
.lista-simple > li {
  padding: var(--e-2) var(--e-3);
  background: var(--gris-100);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}

/* Historial plegable de la pantalla de técnica. */
.tecnica-historial {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.tecnica-historial > summary {
  cursor: pointer; font-weight: 700; color: var(--marca);
  min-height: var(--area-toque);
  display: flex; align-items: center;
}

/* Grupo de tarjetas de "lo que sigue" (inicio y La Ciudad). */
.proximas {
  display: flex; flex-direction: column; gap: var(--e-3);
}

/* Input de archivo escondido dentro de un <label> que hace de botón
   (js/vistas/capturar.js). Igual que .campo-archivo: el input mide 1x1, así
   que el anillo de foco tiene que dibujarlo el label. */
.archivo-oculto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}
.boton:focus-within {
  outline: 3px solid var(--azul-500);
  outline-offset: 2px;
}

/* Acreditación: el manual de Administración (paso 9) y el de Recepción
   prometen "el puntito verde" para ver quién ya llegó. Antes sólo se listaba
   a los que faltaban, con un punto gris. */
.acreditacion { margin-top: var(--e-3); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: baseline; }
.punto-llegada {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: 5px; flex-shrink: 0;
  background: var(--gris-400);
}
.punto-llegada--si { background: var(--verde-osc); }
.acreditacion__resumen { font-weight: 700; }
.acreditacion__resumen--completa { color: var(--verde-osc); }