/* ============================================================================
   VisitaFlow — Capa de diseño
   ----------------------------------------------------------------------------
   Este archivo va DESPUES de app.css y lo refina. No lo reemplaza.

   POR QUE ASI Y NO REESCRIBIENDO app.css
   --------------------------------------
   El sistema entero esta construido sobre variables CSS: cuando la institucion
   cambia su color en Personalizacion, el servidor reescribe --marca y todo se
   repinta. Eso esta bien hecho y no se toca.

   Aprovechando eso, casi todo el rediseno se puede hacer SIN TOCAR EL MARCADO:
   se afinan los tokens, se corrigen los estados que faltaban (foco, hover,
   deshabilitado) y se le da acabado a los componentes que ya existen.

   Se reescribiria app.css si hubiera que cambiar la ESTRUCTURA. No es el caso:
   lo que faltaba era acabado, jerarquia y estados, y eso cabe aqui.

   LO QUE ESTE ARCHIVO ARREGLA
   ---------------------------
   1. FOCO VISIBLE. app.css tenia UN solo :focus (los campos de texto). Ningun
      boton, enlace ni fila de tabla mostraba donde estaba el teclado. Es un
      fallo de accesibilidad grave y ademas molesta a quien navega con Tab.

   2. MOVIL. El limite mas pequeno era 860px. Un sistema que se usa tambien
      desde una tablet en la puerta no tenia nada por debajo de eso.

   3. JERARQUIA. Las tarjetas de indicadores, la cabecera y las tablas se veian
      todas igual de importantes, asi que ninguna lo parecia.

   4. ACABADO. Sombras y bordes planos, transiciones de 120ms sin curvas, y
      ninguna senal de que la pagina estuviera cargando.
   ============================================================================ */

/* ============================================================================
   1. TOKENS
   ============================================================================ */

:root {
  /* --- Neutros: un poco mas frios y mas suaves, para que el blanco de las
         tarjetas se despegue del fondo sin necesidad de bordes duros. --- */
  --fondo: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --borde: #e4e9f0;
  --borde-fuerte: #cbd5e1;
  --texto: #0f172a;
  --texto-suave: #5b6b82;
  --texto-tenue: #94a3b8;

  /* --- Radios: mas redondeado transmite mas cuidado; y un radio extra para
         las tarjetas grandes, que con 10px se veian rigidas. --- */
  --radio: 14px;
  --radio-chico: 9px;
  --radio-grande: 18px;

  /* --- Profundidad: cuatro niveles en vez de dos. Una sombra sola para todo
         aplana la pantalla; con niveles, lo que flota se ve que flota. --- */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-2: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --sombra-3: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 12px 28px -6px rgba(15, 23, 42, 0.12);
  --sombra-4: 0 12px 24px -6px rgba(15, 23, 42, 0.14), 0 24px 48px -12px rgba(15, 23, 42, 0.18);

  /* Los nombres viejos siguen existiendo: app.css los usa en muchos sitios. */
  --sombra: var(--sombra-2);
  --sombra-alta: var(--sombra-4);

  /* --- Medidas --- */
  --barra-ancho: 258px;
  --alto-fila: 54px;
  --alto-cabecera: 65px;

  /* --- Movimiento: una sola curva y tres duraciones. Antes cada transicion
         elegia la suya, y eso se siente desordenado aunque no se sepa por que. --- */
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  --rapido: 130ms;
  --medio: 220ms;
  --lento: 380ms;

  /* --- Foco: un anillo que se ve sobre cualquier fondo, claro u oscuro. --- */
  --anillo: 0 0 0 3px rgba(59, 130, 246, 0.45);
  --anillo-claro: 0 0 0 3px rgba(255, 255, 255, 0.65);

  /* --- Tipografia: se mantiene la fuente del sistema (el producto funciona sin
         Internet y no puede pedir fuentes). Se afina el tamano base y la
         altura de linea, que es donde estaba el problema de legibilidad. --- */
  --fuente: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI',
            Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulo: 'Segoe UI Variable Display', 'Segoe UI', -apple-system,
                   BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   SOBRE EL MODO OSCURO: NO SE ACTIVA, Y ES A PROPOSITO
   ----------------------------------------------------------------------------
   El sistema se ve en modo claro siempre, aunque el equipo este en modo oscuro.

   Se probo a activarlo y salio peor que no tenerlo: app.css fija `#fff` a mano
   en 25 sitios (tarjetas, tablas, dialogos). Cambiando solo los colores de
   texto, las tarjetas seguian BLANCAS pero el texto pasaba a claro: texto
   ilegible sobre blanco. Un modo oscuro a medias es peor que no tenerlo.

   Hacerlo bien es un trabajo aparte: hay que sustituir esos 25 colores fijos
   por variables y despues revisar contraste de cada estado (las etiquetas de
   "Dentro"/"Salo", los avisos, los gafetes). No es un cambio de una linea y no
   se hace a medias.

   Para cuando se haga: `color-scheme` en :root, y una variable por cada color
   fijo que quede. Los tokens de abajo ya estan listos para eso.
   ---------------------------------------------------------------------------- */
:root { color-scheme: light; }

/* El sistema tiene que funcionar sin Internet y sin animaciones: quien las
   desactiva por mareo o por rendimiento tiene derecho a que se respete. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   2. BASE
   ============================================================================ */

html {
  /* La cabecera es fija: sin esto, al saltar a un ancla o al enfocar con el
     teclado, el elemento queda DEBAJO de la cabecera y no se ve. */
  scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}

body {
  font-size: 15px;
  line-height: 1.55;
  /* Las cifras de una tabla tienen que alinearse en columna: con ancho
     variable, "1" ocupa menos que "8" y la columna baila. */
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.08rem; }
h3 { font-size: 0.97rem; }

/* Los enlaces no llevan subrayado permanente (ensucia mucho en una tabla),
   pero si al pasar por encima y al enfocar con el teclado. */
a { color: var(--marca-oscura); text-underline-offset: 2px; }

/* ============================================================================
   2b. EL COLOR DE MARCA COMO TEXTO — el defecto que se repetia
   ============================================================================
 *
 * LA RAIZ DEL PROBLEMA
 * --------------------
 * El color de la institucion (`--marca`) es un color de RELLENO: esta pensado
 * para fondos, con el texto encima en `--texto-sobre-marca`, que el servidor
 * calcula para que contraste.
 *
 * Pero habia varios sitios que lo usaban como color de TEXTO sobre blanco. Con
 * una marca oscura no se nota; con una clara, el texto desaparece. Medido con
 * el lavanda #9faed5 de la institucion de prueba:
 *
 *     --marca          #9faed5   ->  2.21:1   sobre blanco   (minimo 4.5)
 *     --marca-oscura   #576075   ->  6.30:1   sobre blanco   <- el bueno
 *
 * Se fueron arreglando de uno en uno (primero el menu, despues la pestana)
 * hasta que se vio el patron, asi que aqui queda escrito y arreglado de golpe.
 *
 * DONDE SE ARREGLA CADA UNO
 * -------------------------
 *   - Enlaces:                    en la regla `a` de arriba.
 *   - Pestana activa:             aqui abajo.
 *   - Enlace activo de la barra:  en la seccion 4. Ahi el fondo ES la marca, asi
 *                                 que el texto va en --texto-sobre-marca.
 *
 * NO se tocan los que estan bien, para no romper lo que funciona:
 *   - `background: var(--marca)` con `color: var(--texto-sobre-marca)` encima.
 *   - `border-color` y `accent-color`: son adornos, no texto, y lo que se les
 *     pide es 3:1, no 4.5:1.
 */
.pestana[aria-selected='true'] {
  color: var(--marca-oscura);
  border-bottom-color: var(--marca);
}

.pestanas { border-bottom: 1px solid var(--borde); }

.pestana {
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
  min-height: 40px;
}

.pestana:hover { color: var(--texto); }

/* ============================================================================
   3. FOCO VISIBLE  (era el hueco mas grave)
   ============================================================================ */

/*
 * Se usa :focus-visible y no :focus a proposito.
 *
 * :focus se dispara tambien al hacer CLIC, asi que el anillo aparece cada vez
 * que alguien pulsa un boton con el raton: molesto y ruidoso. :focus-visible
 * solo se activa cuando el navegador sabe que la intencion es navegar con el
 * teclado. Es lo que hace que el foco se vea sin estorbar.
 */
:focus-visible {
  outline: 3px solid var(--marca-acento);
  outline-offset: 2px;
  border-radius: var(--radio-chico);
}

/* Sobre la barra lateral (fondo oscuro) el anillo azul no contrasta: ahi va
   blanco. */
.barra :focus-visible,
.barra__enlace:focus-visible,
.barra__salir:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Los campos ya tenian su propio borde de foco; se conserva pero con el mismo
   lenguaje que el resto. */
.entrada:focus-visible,
.selector:focus-visible,
.area:focus-visible {
  outline: none;
  border-color: var(--marca-acento);
  box-shadow: var(--anillo);
}

/* ============================================================================
   4. BARRA LATERAL
   ============================================================================ */

.barra {
  background: linear-gradient(180deg, var(--marca-oscura) 0%, color-mix(in srgb, var(--marca-oscura) 88%, #000) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.barra::-webkit-scrollbar { width: 8px; }
.barra::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}

.barra__marca {
  padding: 1.15rem 1.1rem;
  gap: 0.75rem;
}

.barra__logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
}

.barra__nombre { font-size: 0.9rem; letter-spacing: -0.01em; }

.barra__producto {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  /* Sube de 0.42 a 0.62 por contraste: con la barra del color de la institucion
     (que puede ser claro), un texto al 42% se queda en 3.02:1 y no se lee. */
  color: rgba(255, 255, 255, 0.8);
}

.barra__nav { padding: 0.6rem 0.55rem 1rem; }

.barra__grupo {
  font-size: 0.63rem;
  letter-spacing: 0.13em;
  /* Igual: 0.34 daba 3.02:1 sobre la barra. Con 0.68 llega a ~4.8:1. */
  color: rgba(255, 255, 255, 0.8);
  padding: 1rem 0.6rem 0.4rem;
}

/*
 * El enlace activo lleva una barra a la izquierda ademas del fondo. Con solo el
 * fondo, en una pantalla con poca luz o con brillo bajo no se distingue cual
 * esta abierto; la barra lo dice sin depender del contraste del color.
 */
.barra__enlace {
  position: relative;
  padding: 0.62rem 0.7rem;
  border-radius: var(--radio-chico);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
  min-height: 40px;
}

.barra__enlace:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(2px);
}

.barra__enlace[aria-current='page'] {
  background: var(--marca);
  /* EL COLOR DEL TEXTO LO DECIDE EL SERVIDOR, no se fija en blanco.
   *
   * Esto era un fallo de contraste medido: la institucion de prueba eligio un
   * lavanda #9faed5, y el blanco encima da 2.21:1 cuando el minimo es 4.5:1.
   * El texto se veia lavado y costaba leerlo.
   *
   * El servidor YA calcula `texto_sobre_primario` mirando el color de la
   * institucion (util.textoSobre) y lo expone como --texto-sobre-marca. Con el
   * lavanda devuelve #0f172a, que da 8.07:1. O sea que la solucion no es elegir
   * otro color a mano: es usar el que el servidor ya habia calculado.
   *
   * app.css tenia `color: var(--texto-sobre-marca)` y funcionaba; el que lo
   * rompia era una regla que forzaba blanco. Aqui se deja el bueno. */
  color: var(--texto-sobre-marca);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.barra__enlace[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--marca-acento);
}

.barra__insignia { font-variant-numeric: tabular-nums; }

.barra__salir {
  min-height: 40px;
  transition: background var(--rapido) var(--curva);
}

/* ============================================================================
   5. CABECERA
   ============================================================================ */

.cabecera {
  padding: 0.85rem 1.6rem;
  box-shadow: var(--sombra-1);
  z-index: 20;
  backdrop-filter: saturate(1.4);
}

.cabecera__titulo h1 { font-size: 1.32rem; }
.cabecera__sub { font-size: 0.82rem; margin-top: 0.1rem; }

.contenido { padding: 1.5rem 1.6rem 4rem; }

/* ============================================================================
   6. TARJETAS
   ============================================================================ */

.tarjeta {
  box-shadow: var(--sombra-2);
  border-radius: var(--radio);
  transition: box-shadow var(--medio) var(--curva);
}

.tarjeta__cabecera {
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
}

.tarjeta__cabecera h2 {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

/* ============================================================================
   7. INDICADORES (tarjetas de cifras del panel)
   ============================================================================ */

/*
 * Estas tarjetas son lo primero que mira el recepcionista al entrar, y antes se
 * veian todas iguales: mismo borde, mismo fondo, mismo peso. Ahora la cifra
 * manda, y hay una franja de color a la izquierda que dice de un vistazo si el
 * numero es normal, si hay que atenderlo o si es un problema.
 */
.metrica {
  position: relative;
  padding: 1.05rem 1.15rem 1rem 1.35rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  overflow: hidden;
  transition: box-shadow var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.metrica::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--borde-fuerte);
  transition: background var(--medio) var(--curva);
}

.metrica:hover {
  box-shadow: var(--sombra-3);
  transform: translateY(-2px);
}

.metrica__etiqueta {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--texto-suave);
}

.metrica__valor {
  font-size: 2.05rem;
  font-weight: 720;
  letter-spacing: -0.035em;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.metrica__nota { font-size: 0.79rem; margin-top: 0.4rem; }

/* Un color por significado. Cada estado tine la franja, el fondo y la cifra. */
.metrica--bien::before { background: var(--dentro); }
.metrica--bien .metrica__valor { color: var(--dentro); }

.metrica--alerta::before { background: var(--pendiente); }
.metrica--alerta {
  border-color: color-mix(in srgb, var(--pendiente) 30%, var(--borde));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pendiente-fondo) 70%, var(--superficie)), var(--superficie));
}
.metrica--alerta .metrica__valor { color: var(--pendiente); }

.metrica--peligro::before { background: var(--peligro); }
.metrica--peligro {
  border-color: color-mix(in srgb, var(--peligro) 30%, var(--borde));
  background: linear-gradient(180deg, color-mix(in srgb, var(--peligro-fondo) 70%, var(--superficie)), var(--superficie));
}
.metrica--peligro .metrica__valor { color: var(--peligro); }

/* ============================================================================
   8. TABLAS
   ============================================================================ */

.tabla { border-collapse: separate; border-spacing: 0; }

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie-2);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 650;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla tbody td {
  padding: 0.72rem 1rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla tbody tr {
  transition: background var(--rapido) var(--curva);
}

/* Al pasar por encima se resalta la fila entera. En una tabla de siete columnas
   es facil perder de vista en que renglon se esta leyendo. */
.tabla tbody tr:hover { background: color-mix(in srgb, var(--marca-clara) 45%, transparent); }

.tabla tbody tr:last-child td { border-bottom: 0; }

/* ============================================================================
   8b. RITMO DEL LAYOUT
   ============================================================================ */

/*
 * EL PROBLEMA QUE ARREGLA ESTO
 * ----------------------------
 * Cada pantalla elegia su propio espacio: unas dejaban 700px en blanco debajo
 * (Registrar visita) y otras amontonaban cinco bloques seguidos (Visitantes
 * dentro). Al no haber un ritmo comun, el sistema se siente improvisado aunque
 * cada pantalla por separado este bien.
 *
 * Aqui se fija un ritmo vertical unico de 1.25rem entre bloques, y se ensancha
 * un poco el area de contenido para que las tablas de siete columnas respiren
 * sin que el texto se estire tanto que cueste seguirlo.
 */
.contenido { max-width: 1400px; }

/* Separacion uniforme entre bloques de primer nivel de cada pantalla. */
.contenido > * + * { margin-top: 1.25rem; }

/*
 * Entre bloques anidados dentro de una tarjeta. Se exceptua la cabecera: si no,
 * al ir seguida de un hermano se le sumaba su propio margen inferior y quedaba
 * un hueco visible debajo del titulo (se veia en la tarjeta "Estado" de la
 * pantalla de Licencia, con un espacio raro antes de la primera fila).
 */
.tarjeta > * + *:not(.tarjeta__cabecera) { margin-top: 1rem; }
.tarjeta__cabecera + * { margin-top: 0; }

.rejilla { gap: 1.15rem; }

/*
 * Las tarjetas de indicadores tenian un minimo de 170px: en un portatil de
 * 1280px caben SIETE en una fila, cada una de 175px, y la etiqueta "VISITAS
 * ANUNCIADAS" se parte en tres lineas mientras el numero queda diminuto al
 * lado. Con 210px caben seis y se leen.
 */
.rejilla--metricas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ============================================================================
   9. BOTONES
   ============================================================================ */
.boton {
  border-radius: var(--radio-chico);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva),
              transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.boton:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.boton:active { transform: translateY(0); box-shadow: var(--sombra-1); }

.boton:disabled,
.boton[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.boton--secundario {
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
}

.boton--secundario:hover {
  background: var(--superficie-2);
  border-color: var(--texto-tenue);
}

/* Boton con solo un icono: necesita ser cuadrado y de 40px como minimo. */
.boton--icono {
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

.boton--peligro {
  background: var(--peligro);
  color: #fff;
  border-color: transparent;
}

/* ============================================================================
   10. CAMPOS
   ============================================================================ */

.entrada, .selector, .area {
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
  min-height: 42px;
}

.entrada:hover, .selector:hover, .area:hover { border-color: var(--texto-tenue); }

.entrada::placeholder { color: var(--texto-tenue); }

/* Campo con error: se marca el borde Y se explica debajo. Solo el color no
   sirve: hay quien no distingue el rojo. */
.campo--error .entrada,
.entrada[aria-invalid='true'] {
  border-color: var(--peligro);
  background: color-mix(in srgb, var(--peligro-fondo) 40%, var(--superficie));
}

/* ============================================================================
   11. ESTADOS (etiquetas de color)
   ============================================================================ */

/*
 * Las etiquetas de estado ("Dentro", "Salió", "Sin aprobar") llevan un punto de
 * color ademas del texto. El color solo no basta: quien no lo distinga tiene
 * que poder leer el estado igual, y el punto ayuda a encontrarlo de un vistazo
 * sin leer.
 */
.estado, .etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.79rem;
  padding: 0.22rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
}

.estado::before, .etiqueta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================================
   12. AVISOS
   ============================================================================ */

.aviso {
  border-radius: var(--radio);
  border-left-width: 4px;
  box-shadow: var(--sombra-1);
}

/* ============================================================================
   13. BUSCADOR
   ============================================================================ */

.buscador { border-radius: var(--radio-chico); }
.buscador:focus-within {
  border-color: var(--marca-acento);
  box-shadow: var(--anillo);
}

/* ============================================================================
   14. CARGA
   ============================================================================ */

/*
 * Una linea fina arriba mientras la pantalla carga. Sin nada, al cambiar de
 * modulo la pantalla se queda en blanco un instante y parece que se colgo.
 */
#vista[aria-busy='true'] {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--rapido) var(--curva);
}

/* ============================================================================
   15. MOVIL Y TABLET
   ============================================================================ */

/*
 * POR QUE ESTO FALTABA Y POR QUE IMPORTA
 * --------------------------------------
 * El sistema se usa en la puerta de una institucion, y muchas veces desde una
 * tablet o el telefono del vigilante. app.css solo tenia dos limites (1100px y
 * 860px), asi que por debajo de 860 la barra lateral seguia ocupando 250px fijos
 * y el contenido quedaba aplastado en una franja.
 *
 * Aqui la barra se convierte en una franja horizontal desplazable. Se elige eso
 * y no un menu de hamburguesa porque en recepcion se cambia de modulo TODO el
 * rato: esconder la navegacion detras de un toque hace el trabajo mas lento.
 */

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .barra {
    position: sticky;
    top: 0;
    height: auto;
    max-height: none;
    flex-direction: column;
    z-index: 30;
  }

  .barra__marca { padding: 0.7rem 1rem; }

  .barra__nav {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0.75rem 0.7rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .barra__nav::-webkit-scrollbar { display: none; }

  /* Los titulos de grupo no caben en una franja horizontal. */
  .barra__grupo { display: none; }

  .barra__enlace {
    flex-shrink: 0;
    width: auto;
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
  }

  .barra__enlace:hover { transform: none; }

  .barra__enlace[aria-current='page']::before { display: none; }

  .barra__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .barra__salir { width: auto; margin-top: 0; padding: 0.45rem 0.9rem; }

  .cabecera { padding: 0.7rem 1rem; flex-wrap: wrap; }
  .cabecera__titulo h1 { font-size: 1.15rem; }

  .contenido { padding: 1rem 1rem 3rem; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }

  .contenido { padding: 0.85rem 0.85rem 2.5rem; }

  .metrica__valor { font-size: 1.75rem; }

  .cabecera__acciones { width: 100%; }
  .cabecera__acciones .boton { flex: 1; }

  /* En pantalla estrecha, una tabla de siete columnas no cabe: se deja que se
     desplace en horizontal en vez de aplastarla hasta que no se lea. */
  .tabla-envoltura,
  .tabla-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   16. IMPRESION
   ============================================================================ */

@media print {
  .barra, .cabecera, .avisos-flotantes, .barra__salir { display: none !important; }
  .app { display: block; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}