/* ═══════════════════════════════════════════════════════════════════════════
   PandaTech en el teléfono
   ═══════════════════════════════════════════════════════════════════════════

   TODO este archivo vive dentro de una sola regla: @media (max-width: 480px).
   Nada de aquí puede alcanzar al escritorio, ni por accidente. El diseño
   angosto de escritorio empieza en 481 px (esa regla está en modal.css), así
   que la línea cae en tierra de nadie: por debajo de 481 no había nada
   diseñado, solo el programa plantado en su ancho mínimo de 700 px y la
   ventana deslizándose de lado.

   Va de último en index.html para que gane sin tener que pelear con
   !important en cada regla.

   ── La idea ────────────────────────────────────────────────────────────────
   El programa no se encoge: se reacomoda. Tres cambios de fondo:

     1. La barra lateral de 220 px no cabe en 430 (es la mitad de la pantalla).
        La navegación se va abajo, al alcance del pulgar.
     2. Las tablas no caben. Una fila de Pagos necesita 670 px. Cada fila pasa
        a ser una ficha apilada.
     3. Los cuadros centrados se vuelven hojas que suben desde abajo, que es
        donde está la mano.

   Lo que NO cambia: los colores, la tipografía, el vidrio, los íconos, el
   tono de las palabras. Es el mismo programa, acomodado para otra mano.

   ── El vidrio ──────────────────────────────────────────────────────────────
   El desenfoque solo se usa en la capa que FLOTA sobre el contenido —la
   cabecera y la barra de abajo—, que es el único sitio donde hay algo variado
   moviéndose por detrás. Sobre un fondo plano el desenfoque no hace nada
   (está explicado en la receta de vidrio de la casa).

   Y la pastilla del lugar activo va PLANA, sin brillo de arriba: el brillo
   sobre una pieza que lleva un ícono adentro la vuelve un botón de juguete.
   Eso ya se probó en Configuración y se rechazó. El vidrio es la barra; la
   pastilla es solo un tinte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ El freno del inflado de letra ═══════════
   Va FUERA del @media a propósito, y es la corrección más importante de este
   archivo para el comprobante.

   Safari en el iPhone infla el texto por su cuenta cuando un bloque es más
   ancho que la pantalla: cree que uno no va a poder leerlo y le sube el
   tamaño a algunos renglones. El comprobante mide 740 px dentro de una
   pantalla de 430, así que caía de lleno en ese caso — y salía con "Horas
   trabajadas" chiquito y "Caja Costarricense de Seguro Social" enorme, siendo
   renglones de la misma tabla.

   Lo peor es que NO se puede cazar midiendo la hoja de estilo: el CSS es
   idéntico al del escritorio, letra por letra. El navegador lo cambia al
   dibujar, después de aplicar los estilos. Se vio mirando el video de Erick.

   En computadora esta propiedad no hace absolutamente nada — ningún navegador
   de escritorio infla texto—, así que es segura. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 480px) {

  /* ═══════════ 1 · Medidas ═══════════
     Todo lo que se repite, en un solo sitio. Los altos incluyen el respiro
     que iOS reserva abajo (la barrita de inicio) y arriba (la muesca). */
  :root {
    --tel-lado: 14px;              /* margen izquierdo y derecho del contenido */
    --tel-cabeza: 52px;            /* alto de la cabecera pegada arriba */
    --tel-barra: 64px;             /* alto de la tira de abajo */
    --tel-barra-hueco: 10px;       /* cuánto flota la barra sobre el borde */
    --tel-arriba: calc(var(--tel-cabeza) + env(safe-area-inset-top));
    --tel-abajo: calc(var(--tel-barra) + var(--tel-barra-hueco) + env(safe-area-inset-bottom));
  }

  /* ═══════════ 2 · El piso de 700 px ═══════════
     Lo primero que hay que soltar. `.app-shell { min-width: 700px }` es un
     piso deliberado de escritorio: por debajo, el programa se planta y la
     ventana se desliza, como cualquier aplicación de escritorio con tamaño
     mínimo. En un teléfono no hay "hacer la ventana más grande", así que el
     piso desaparece y el contenido se reacomoda. */
  html,
  body {
    overflow-x: hidden;
  }

  .app-shell,
  .welcome {
    min-width: 0;
  }

  /* 100vh en un teléfono cuenta la barra del navegador aunque esté encogida:
     la página queda más alta que la pantalla y hay un salto al deslizar.
     100dvh mide lo que de verdad se ve en cada momento. */
  .app-shell {
    min-height: 100dvh;
  }

  .sidebar {
    display: none;
  }

  .content {
    min-height: 0;
    max-width: none;
    margin-left: 0;
    padding:
      calc(var(--tel-arriba) + 14px)
      var(--tel-lado)
      calc(var(--tel-abajo) + 20px);
  }

  /* Inicio va a sangre: su portada trae su propio acomodo. */
  .app-shell.home-shell .content {
    padding: calc(var(--tel-arriba) + 8px) 0 calc(var(--tel-abajo) + 20px);
  }

  /* ═══════════ 4 · La cabecera ═══════════
     Pegada arriba, de vidrio, con el nombre de dónde está uno. Lleva la
     campana porque en el teléfono no hay esquina de Inicio donde ponerla. */
  .tel-cabeza {
    position: fixed;
    z-index: 11;
    inset: env(safe-area-inset-top) 0 auto 0;
    display: flex;
    gap: 10px;
    align-items: center;
    height: var(--tel-cabeza);
    padding: 0 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    background: color-mix(in srgb, var(--card) 72%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
  }

  /* Sin desenfoque (navegador viejo) el vidrio se vuelve un fondo macizo: es
     preferible eso a que se lea el contenido por detrás de las letras. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tel-cabeza,
    .tel-barra {
      background: var(--card);
    }
  }

  .tel-titulo {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 17px;
    font-weight: 680;
    letter-spacing: -.2px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tel-marca {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 9px;
    background: color-mix(in srgb, var(--teal) 12%, transparent);
  }

  .tel-marca img,
  .tel-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .tel-volver,
  .tel-campana {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--ink);
    background: transparent;
  }

  .tel-volver svg {
    width: 24px;
    height: 24px;
  }

  .tel-campana svg {
    width: 20px;
    height: 20px;
  }

  .tel-volver:active,
  .tel-campana:active {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }

  /* El puntito de avisos: el número va encima del badajo, como en el
     escritorio. */
  .tel-campana {
    position: relative;
  }

  .tel-campana b {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    background: var(--red);
  }

  .tel-campana.con-avisos svg {
    color: var(--orange);
  }

  /* ═══════════ 5 · La barra de abajo ═══════════
     Flota sobre el contenido, no está pegada al borde. Cinco lugares: los
     cuatro del día a día y un "Más" con las otras siete pestañas.

     El vidrio de verdad está AQUÍ: por detrás pasa el contenido deslizándose,
     que es el único caso donde desenfocar hace algo. */
  .tel-barra {
    position: fixed;
    z-index: 11;
    right: var(--tel-lado);
    bottom: calc(var(--tel-barra-hueco) + env(safe-area-inset-bottom));
    left: var(--tel-lado);
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    height: var(--tel-barra);
    padding: 5px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--card) 70%, transparent);
    box-shadow:
      0 10px 30px rgba(16, 28, 66, .16),
      0 2px 8px rgba(16, 28, 66, .07);
    scrollbar-width: none;
    transition: transform var(--dur-3) var(--ease-abrir), opacity var(--dur-2) ease;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
  }

  .tel-barra::-webkit-scrollbar {
    display: none;
  }

  /* Con el teclado arriba, la tira se aparta.

     No es por hacer sitio —aunque lo hace—: es que está FIJA al borde de
     abajo, y cuando el teclado sube, en iOS ese borde deja de estar donde
     estaba. La tira se va a dar vueltas por encima del teclado, y ese es el
     movimiento que tapaba la animación de la lupa. Apartándola no queda nada
     flotando que se pueda mover.

     El aviso lo pone app.js midiendo cuánto de la ventana quedó tapado. */
  html[data-teclado] .tel-barra {
    transform: translateY(calc(100% + var(--tel-barra-hueco) + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  /* Cada pastilla se ancha con su nombre: no todas miden igual, y por eso
     "Liquidaciones" puede llamarse Liquidaciones. La que asoma cortada en el
     borde derecho es lo que dice, sin palabras, que la tira sigue. */
  .tel-tab {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 0 12px;
    border: 0;
    border-radius: 17px;
    color: var(--muted);
    background: transparent;
    -webkit-tap-highlight-color: transparent;
  }

  .tel-tab svg {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
  }

  .tel-tab span {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -.1px;
    white-space: nowrap;
  }

  /* Cada pastilla toma el color de su pestaña, el mismo del menú lateral. */
  .tel-tab.nav-inicio { --tono: var(--m-inicio); }
  .tel-tab.nav-colaboradores { --tono: var(--m-colaboradores); }
  .tel-tab.nav-tiempo { --tono: var(--m-tiempo); }
  .tel-tab.nav-pagos { --tono: var(--m-pagos); }
  .tel-tab.nav-vacaciones { --tono: var(--m-vacaciones); }
  .tel-tab.nav-ausencias { --tono: var(--m-ausencias); }
  .tel-tab.nav-aguinaldos { --tono: var(--m-aguinaldos); }
  .tel-tab.nav-liquidaciones { --tono: var(--m-liquidaciones); }
  .tel-tab.nav-reportes { --tono: var(--m-reportes); }
  .tel-tab.nav-expedientes { --tono: var(--m-expedientes); }
  .tel-tab.nav-configuracion { --tono: var(--m-configuracion); }

  /* La pastilla del lugar activo. PLANA a propósito: un tinte y un canto, sin
     brillo de arriba. Con brillo parece un botón en relieve, y eso ya se
     probó en Configuración y se rechazó ("como en 3D"). */
  .tel-tab.activo {
    color: var(--tono);
  }

  .tel-tab.activo::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 3px 4px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--tono) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tono) 34%, transparent);
  }

  .tel-tab:active {
    transform: scale(.94);
    transition: transform var(--dur-1) var(--ease);
  }

  /* ═══════════ 6 · Las hojas con título ═══════════
     Hoy solo la de Avisos. Antes había una de "Más" con las siete pestañas
     que no cabían en la barra; se cayó cuando la barra pasó a ser una tira
     que se desliza y ya no hay nada escondido detrás de un botón. */
  .tel-hoja-titulo {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 2px 0 14px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.3px;
  }

  .tel-hoja-cuenta {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    background: var(--red);
  }

  /* La lista de avisos dentro de la hoja no lleva el tope de alto del globito
     del escritorio: la hoja ya tiene el suyo y se desliza por dentro. */
  .drawer[data-cajon="tel-avisos"] .avisos-lista {
    max-height: none;
    overflow: visible;
  }

  /* ═══════════ 7 · Los cuadros se vuelven hojas ═══════════
     Un cuadro centrado en una pantalla de teléfono deja franjas muertas
     arriba y abajo y pone los botones lejos del pulgar. Suben desde abajo,
     pegados al borde, con las esquinas de arriba redondeadas: así se lee de
     una que se cierra empujándolo hacia abajo. */
  .drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    border-radius: 22px 22px 0 0;
    transform: none;
    animation: tel-hoja-entra var(--dur-3) var(--ease) both;
  }

  /* El agarradero. No arrastra todavía —eso es JavaScript—, pero dice sin
     palabras que la hoja se empuja hacia abajo. */
  .drawer::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    margin: -8px auto 14px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--ink) 18%, transparent);
  }

  .drawer.closing {
    animation: tel-hoja-sale 240ms cubic-bezier(.4, 0, .7, 0) both;
  }

  /* Los cajones angostos (los que llevan data-cajon) también van a lo ancho:
     en 430 px no hay "angosto" que valga. */
  .drawer[data-cajon] {
    width: 100%;
    max-width: none;
  }

  .drawer-close {
    top: 14px;
    right: 12px;
  }

  /* Los botones del pie de un cajón, uno debajo del otro y a lo ancho: dos
     botones de 200 px no caben al lado en 398 px de hueco. */
  .drawer-actions {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom));
    flex-direction: column-reverse;
    gap: 8px;
    margin: 18px -16px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--card);
  }

  .drawer-actions .button {
    justify-content: center;
    width: 100%;
    min-height: 46px;
  }

  @keyframes tel-hoja-entra {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes tel-hoja-sale {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }

  /* ═══════════ 8 · Las tablas se vuelven fichas ═══════════
     Una fila de Pagos son seis columnas y necesita 670 px. Aquí cada fila es
     una ficha: el primer dato de título, los demás como rótulo a la
     izquierda y valor a la derecha, y la acción en la esquina.

     Los rótulos salen del encabezado de la propia tabla —los copia
     rotularTablas() en app.js—, así que esto vale para las seis tablas del
     sistema y para las que se agreguen después. */
  .content table:not(:where(.comprobante *)),
  .drawer table:not(:where(.comprobante *)) {
    display: block;
    width: 100%;
    border: 0;
  }

  .content table:not(:where(.comprobante *)) thead,
  .drawer table:not(:where(.comprobante *)) thead {
    display: none;
  }

  .content table:not(:where(.comprobante *)) tbody,
  .drawer table:not(:where(.comprobante *)) tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .content table:not(:where(.comprobante *)) tbody tr,
  .drawer table:not(:where(.comprobante *)) tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--e1);
  }

  .content table:not(:where(.comprobante *)) tbody td,
  .drawer table:not(:where(.comprobante *)) tbody td {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    grid-column: 1 / -1;
    width: auto;
    padding: 5px 0 0;
    border: 0;
    font-size: 13.5px;
    text-align: left;
  }

  .content table:not(:where(.comprobante *)) tbody td::before,
  .drawer table:not(:where(.comprobante *)) tbody td::before {
    content: attr(data-rotulo);
    flex: none;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
  }

  /* ═══════════ El renglón de totales ═══════════
     Las tablas de Reportes llevan pie —"Total del año", y las sumas—, y ese
     renglón nunca se convirtió en ficha: seguía siendo una fila de cinco
     columnas de verdad, 666 px de ancho dentro de una caja de 364, y se salía
     302 px por la derecha. Hoy eso se disimula porque `.rep-tabla` se corre de
     lado (`overflow-x: auto` en reportes.css), pero correr una tabla de lado
     con el dedo en un teléfono no es leerla.

     Se trata igual que el cuerpo: una ficha con sus rótulos, que ahora los
     pone rotularTablas() también para el pie. */
  .content table:not(:where(.comprobante *)) tfoot,
  .drawer table:not(:where(.comprobante *)) tfoot {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }

  .content table:not(:where(.comprobante *)) tfoot tr,
  .drawer table:not(:where(.comprobante *)) tfoot tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--e1);
  }

  .content table:not(:where(.comprobante *)) tfoot td,
  .drawer table:not(:where(.comprobante *)) tfoot td {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    width: auto;
    padding: 5px 0 0;
    border: 0;
    border-radius: 0;
    font-size: 13.5px;
    text-align: left;
  }

  .content table:not(:where(.comprobante *)) tfoot td::before,
  .drawer table:not(:where(.comprobante *)) tfoot td::before {
    content: attr(data-rotulo);
    flex: none;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
  }

  /* La primera es el nombre del total —"Total del año"—: es el título de la
     ficha, no un dato con rótulo. Y las celdas vacías del pie —las que en la
     tabla solo sirven para cuadrar las columnas— no gastan un renglón. */
  .content table:not(:where(.comprobante *)) tfoot td:first-child,
  .drawer table:not(:where(.comprobante *)) tfoot td:first-child {
    display: block;
    padding: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
  }

  .content table:not(:where(.comprobante *)) tfoot td:first-child::before,
  .drawer table:not(:where(.comprobante *)) tfoot td:first-child::before,
  .content table:not(:where(.comprobante *)) tfoot td:empty,
  .drawer table:not(:where(.comprobante *)) tfoot td:empty {
    display: none;
  }

  /* El primer dato es el título de la ficha: sin rótulo y con más peso. */
  .content table:not(:where(.comprobante *)) tbody td:first-child,
  .drawer table:not(:where(.comprobante *)) tbody td:first-child {
    display: block;
    grid-column: 1;
    grid-row: 1;
    padding: 0 0 2px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.1px;
  }

  .content table:not(:where(.comprobante *)) tbody td:first-child::before,
  .drawer table:not(:where(.comprobante *)) tbody td:first-child::before {
    content: none;
  }

  /* La acción, en la esquina de arriba a la derecha. */
  .content table:not(:where(.comprobante *)) tbody td.col-accion,
  .drawer table:not(:where(.comprobante *)) tbody td.col-accion {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
    padding: 0 0 0 10px;
  }

  .content table:not(:where(.comprobante *)) tbody td.col-accion::before,
  .drawer table:not(:where(.comprobante *)) tbody td.col-accion::before {
    content: none;
  }

  /* Los montos, alineados a la derecha y con cifras de ancho parejo, para
     poder compararlos de un vistazo como en el escritorio. */
  .content table:not(:where(.comprobante *)) tbody td.col-monto,
  .drawer table:not(:where(.comprobante *)) tbody td.col-monto {
    font-variant-numeric: tabular-nums;
  }

  /* El total de la fila, separado con una línea. La marca la pone
     rotularTablas() en app.js: "la última que no es la acción". Con
     :last-child no servía —la última suele ser la de los "•••"— y la línea
     no salía nunca. */
  .content table:not(:where(.comprobante *)) tbody td[data-ultimo],
  .drawer table:not(:where(.comprobante *)) tbody td[data-ultimo] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    font-weight: 650;
  }

  /* En el escritorio angosto la primera columna se recorta a 148 px para que
     la tabla quepa (modal.css). Aquí esa celda ES el título de la ficha y
     tiene toda la fila para ella. */
  .data-area table tbody td:first-child {
    max-width: none;
  }

  /* ═══════════ 9 · Las listas largas, en su cuadro ═══════════
     En el escritorio, lo que crece con el uso vive en un cuadro con su propio
     deslizador. En el teléfono se había soltado ese tope, y salió lo que
     Erick describió en Tiempo laborado: "en mayo hay un montononón", y hay
     que deslizar sin parar para pasar de largo.

     Vuelve el cuadro, y vuelve igual que en la computadora —que fue lo que él
     pidió— con tres cuidados para que no pelee con el deslizar de la
     pantalla, que fue lo que pidió que se cuidara:

       · Seis renglones como mucho, y nunca más de MEDIA pantalla. Los dos
         frenos los pone ajustarTopes() en app.js, donde está el porqué. Lo
         importante es lo segundo: mientras el cuadro ocupe la mitad, siempre
         queda la otra mitad de página donde poner el dedo para deslizar la
         pantalla. Un cuadro que llenara la pantalla sí sería una trampa.
       · El gesto no se escapa del cuadro (`overscroll-behavior: contain`, que
         ya venía de modal.css): deslizar la lista nunca arrastra la página
         que hay detrás, ni al llegar al final ni con el impulso. Y al revés
         tampoco: deslizar la página no mueve la lista.
       · El medio renglón que asoma por debajo del corte —lo deja
         ajustarTopes()— es lo que dice, sin palabras, que hay más. En la
         computadora eso lo dice también el deslizador fino, que está siempre
         a la vista; en un teléfono el deslizador solo se asoma mientras el
         dedo se mueve.

     Aquí abajo solo va lo que el teléfono necesita de más. El cuadro no lleva
     canto ni fondo propios a propósito: en casi todos los casos la caja que
     se desliza ES la tarjeta (`<div class="data-area" data-tope="8">`), y
     ponerle otro borde por dentro sería un marco dentro de un marco.

     Ojo con un homónimo: `data-tope` lo usa también el contador de letras de
     Configuración (`.aj-cuenta`), que no es una lista. Por eso esto se cuelga
     de `.con-tope`, la clase que ajustarTopes() pone solo cuando de verdad
     hay algo que deslizar. */
  .con-tope {
    /* El horizontal en "visible" no existe cuando el vertical se desliza: el
       navegador lo asciende a "auto" y entonces la lista se corre de lado con
       el dedo, un pixel, y se siente rarísimo. Se apaga a mano. */
    overflow-x: hidden;
  }

  /* Las tablas de Reportes se miden como las demás, y para eso la caja tiene
     que ser el origen de las medidas. Las otras lo son porque llevan
     `data-tope`, y modal.css les da `position: relative`; estas no lo llevan
     —el cuadro se lo pone ajustarTopes() por ser de Reportes—, y sin esto las
     medidas salían tomadas desde otro sitio: el primer renglón decía estar a
     2106 px del principio de su propia caja. */
  .rep-tabla {
    position: relative;
  }

  /* Y el total se queda a la vista mientras se desliza la lista, igual que en
     la computadora. Ahí lo pegado es la celda; aquí el pie entero, porque el
     pie ya no es una fila de celdas sino una ficha. */
  .con-tope > table > tfoot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--fondo-tope, var(--card));
  }

  .con-tope > table > tfoot td {
    position: static;
  }

  /* En la computadora el pie de Reportes es UNA fila, y esas reglas la visten
     celda por celda: cada una lleva su tinte, su raya de arriba y sus
     esquinas redondeadas. En el teléfono el pie es una ficha de seis
     renglones, y ese mismo trato repetido seis veces son seis franjas y seis
     rayas: se veía como un código de barras.

     El tinte y la raya pasan a la ficha entera, que es donde corresponden. */
  .content .rep-tabla tfoot td,
  .drawer .rep-tabla tfoot td {
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .content .rep-tabla tfoot tr,
  .drawer .rep-tabla tfoot tr {
    border-color: color-mix(in srgb, var(--rep-luz) 35%, transparent);
    background:
      linear-gradient(color-mix(in srgb, var(--rep-luz) 6%, transparent), color-mix(in srgb, var(--rep-luz) 6%, transparent)),
      var(--fondo-tope, var(--card));
  }

  html[data-theme="dark"] .content .rep-tabla tfoot tr,
  html[data-theme="dark"] .drawer .rep-tabla tfoot tr {
    background:
      linear-gradient(color-mix(in srgb, var(--rep-luz) 12%, transparent), color-mix(in srgb, var(--rep-luz) 12%, transparent)),
      var(--fondo-tope, var(--card));
  }

  /* Las fichas llevan sombra, y una caja que se desliza recorta lo que sus
     hijos pinten por fuera. El aire va POR DENTRO —en el tbody, que ya está
     dentro de lo que se desliza—; darle relleno a la caja y quitárselo con
     margen negativo, como hacen las hojas del expediente, aquí sacaría las
     fichas por los lados justo para que las recortara. */
  .con-tope > table > tbody {
    padding: 2px 3px 4px;
  }

  /* ═══════════ 10 · Barras de herramientas y buscadores ═══════════
     Botón, buscador y filtro uno debajo del otro. En 402 px de hueco no caben
     tres cosas en fila sin que el buscador quede de 90 px. */
  .toolbar,
  .employee-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .toolbar .search,
  .employee-toolbar .search {
    width: 100%;
    min-height: 44px;
  }

  .toolbar .button,
  .employee-toolbar .button {
    justify-content: center;
    width: 100%;
    min-height: 46px;
  }

  /* Los desplegables de Mes y Año. La flechita vive en el borde derecho de la
     etiqueta (::after en modal.css) y el campo tiene ancho fijo: apilados a lo
     ancho del teléfono, la flechita quedaba a 135 px del campo, flotando sola.
     El campo se estira hasta la flechita. */
  .liquidation-picker {
    width: 100%;
  }

  .liquidation-picker select {
    flex: 1;
    min-width: 0;
  }

  .filtro-estado,
  .filtro-estado summary {
    width: 100%;
    min-height: 42px;
  }

  .filtro-estado-menu {
    left: 0;
    width: 100%;
    min-width: 0;
  }

  /* ═══════════ 11 · El encabezado de cada pestaña ═══════════
     El título y su botón, apilados. El título ya no compite con el botón por
     el ancho. */
  .page-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .page-heading h1 {
    font-size: 24px;
    letter-spacing: -.4px;
  }

  .page-heading p {
    font-size: 13.5px;
  }

  /* El botón del encabezado NO va a lo ancho. Es una acción de segunda
     —"Configuración", "Ver histórico"— y a lo ancho se lee como si fuera lo
     principal de la pestaña. La acción principal de verdad vive en la barra
     de herramientas de abajo, y esa sí va a lo ancho. */
  .page-heading .button {
    justify-self: start;
    width: auto;
    min-height: 44px;
  }

  /* ═══════════ 12 · Las portadas ═══════════
     La pantalla de "¿a quién le vamos a ver esto?". El marco se estira a todo
     lo ancho y el título baja de tamaño: 44 px de letra en 402 px de hueco
     parten "Liquidaciones" en dos renglones. */
  .portada-marco {
    width: 100%;
    max-width: none;
    padding: 24px 18px 26px;
  }

  .portada-marco h1 {
    font-size: 27px;
    letter-spacing: -.5px;
  }

  .portada-marco > p {
    font-size: 14px;
  }

  .portada-icono {
    width: 52px;
    height: 52px;
  }

  .portada-icono svg {
    width: 25px;
    height: 25px;
  }

  /* ═══════════ El buscador de "Viendo a" ═══════════
     Por debajo de 1120 px hay una regla que lo deja abierto siempre
     (modal.css) — pensada para pantallas sin ratón, donde no hay `:hover` que
     lo despliegue. En el teléfono eso deja un campo abierto ocupando sitio
     debajo de las caras, sin que nadie lo haya pedido.

     Aquí vuelve a ser una lupa que se abre al tocarla, con la misma animación
     que la de la portada. El gesto lo da `:focus-within`, que en un teléfono
     se dispara al tocar. */
  .quien-buscar input {
    width: 0;
    padding: 0;
    font-size: 16px;
  }

  /* `.abriendo` es lo mismo que estar enfocada, pero puesta por JavaScript en
     el momento del TOQUE, antes de que exista el teclado. Es lo que hace que
     la animación se alcance a ver; el porqué está en app.js. */
  .quien-buscar:is(:focus-within, .abriendo) input,
  .quien.buscando .quien-buscar input {
    width: min(200px, 52vw);
    padding: 0;
  }

  .quien-buscar.abriendo {
    border-color: var(--acento, var(--teal));
    color: var(--acento, var(--teal));
  }

  /* Alto de dedo, que en el escritorio son 36 px. Y el ancho tiene que
     sostenerse solo: cuando la casilla mide cero, lo que queda es el relleno
     de 12 px por lado más los 16 de la lupa más los 8 del hueco. */
  .quien-buscar {
    min-height: 44px;
    transition: border-color var(--dur-3) var(--ease-abrir),
                background-color var(--dur-3) var(--ease-abrir),
                color var(--dur-2) var(--ease);
  }

  /* En el escritorio la lupa está desnuda hasta que uno le acerca el ratón,
     que es lo que avisa "esto es un botón". En un teléfono no hay ratón: si
     se queda desnuda, nadie sabe que se puede tocar. Así que en reposo lleva
     su canto y su fondo, igual que la de la portada. */
  .quien:not(.buscando) .quien-buscar:not(:focus-within):not(.abriendo) {
    border-color: var(--line);
    background: var(--card);
  }

  /* ═══════════ El buscador de la portada ═══════════
     Con poca gente, este buscador va plegado en una lupita que se abre al
     tocarla — el mismo gesto que en la computadora, donde se abre al pasarle
     el ratón. En un teléfono no hay "pasar por encima", así que lo que abre
     es el toque; `:focus-within` sirve para los dos.

     Dos cosas que hubo que corregir:

     · La lupita medía 34 px. Para un dedo eso es poco, y encima no se leía
       como un botón. Ahora es un redondel de 44 con su canto a la vista.

     · El escritorio esconde el texto de la casilla plegada con
       `font-size: 0`, y mi regla de 16 px —la que evita que Safari dé el
       tirón de acercar— se lo pisaba: el marcador "Escriba un nombre o una
       cédula" se dibujaba ENCIMA de la lupa, en 34 px de ancho, y se leía
       "E⌕cr". Aquí el cero se respeta mientras está plegada, y los 16 px
       vuelven al abrirse, que es cuando de verdad se escribe y cuando Safari
       decide si acerca o no. */
  .portada-buscar {
    width: 100%;
  }

  .portada-buscar.discreta {
    width: 44px;
    max-width: 44px;
    margin: 16px auto 0;
  }

  .portada-buscar.discreta svg {
    right: 0;
    left: 0;
    margin: 0 auto;
  }

  /* Ojo con el peso de los selectores, que costó dos vueltas.

     La regla general de "toda casilla lleva 16 px" es
     `.content input:not(…):not(…)`, y cada `:not()` pesa como una clase: son
     (0,3,1), y además va más abajo en este archivo. Un
     `.portada-buscar.discreta input` (0,2,1) no le gana ni empatando.

     Por eso los dos estados llevan `.content` delante y se distinguen por el
     ESTADO DE LA ETIQUETA, no del campo: `:not(:focus-within)` para plegada y
     `:focus-within` para abierta. Los dos suman (0,4,1), mandan sobre la
     regla general, y nunca coinciden entre ellos — que fue el enredo del
     primer intento, donde el campo se quedaba sin letra al abrirse. */
  .content .portada-buscar.discreta:not(:focus-within):not(.abriendo) input {
    width: 44px;
    height: 44px;
    padding: 0;
    border-color: var(--line);
    font-size: 0;
    background: var(--card);
  }

  /* Al tocarla se abre. */
  .portada-buscar.discreta:is(:focus-within, .abriendo) {
    width: 100%;
    max-width: 320px;
  }

  .portada-buscar.discreta:is(:focus-within, .abriendo) svg {
    right: auto;
    left: 13px;
    margin: 0;
  }

  .content .portada-buscar.discreta:is(:focus-within, .abriendo) input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 38px;
    font-size: 16px;
    cursor: text;
  }

  /* Con mucha gente el buscador ya viene abierto: solo se le da alto de dedo
     y la letra de 16 px. */
  .portada-buscar:not(.discreta) input {
    height: 44px;
    font-size: 16px;
  }

  .portada-nota {
    font-size: 11.5px;
  }

  /* ═══════════ 13 · Inicio ═══════════
     La portada del programa. Las tarjetas de módulo pasan a dos columnas:
     nueve tarjetas en una sola columna son novecientos pixeles de deslizar. */
  .welcome {
    padding: 0 var(--tel-lado);
  }

  .welcome-inner {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .welcome-copy h1 {
    font-size: 30px;
    letter-spacing: -.6px;
  }

  .welcome-copy h2 {
    font-size: 16px;
  }

  .welcome-copy p {
    font-size: 14px;
  }

  .welcome-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* En el escritorio la tarjeta es un cuadro alto (aspect-ratio 1/1.24) que se
     ve bien en una fila de cuatro. A dos columnas de 194 px eso da 240 px de
     alto por tarjeta: nueve tarjetas serían mil pixeles de deslizar solo para
     ver el menú. Aquí la tarjeta se vuelve una pastilla compacta. */
  .welcome-module {
    aspect-ratio: auto;
    gap: 9px;
    min-height: 104px;
    padding: 15px 10px;
  }

  .welcome-module .welcome-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .welcome-module .welcome-icon svg {
    width: 22px;
    height: 22px;
  }

  .welcome-module b {
    font-size: 13px;
    line-height: 1.25;
  }

  /* El saludo ocupaba la pantalla entera y había que deslizar para llegar al
     menú. Se comprime para que la primera tarjeta asome sin deslizar: eso es
     lo que le dice a uno que la pantalla sigue. */
  .welcome-copy .welcome-logo {
    width: 132px;
    margin-bottom: 8px;
  }

  .welcome-logo-wrap {
    margin-bottom: 4px;
  }

  /* Los dos botones de la esquina de Inicio —el segundo espacio a la
     izquierda, Configuración a la derecha— se habían escondido, y eso estuvo
     mal: él los busca ahí porque ahí están en la computadora, y el del
     segundo espacio no tiene otro sitio en todo el programa.

     La portada pasa a rejilla para poder ponerlos en un renglón propio arriba
     sin tocar el HTML: son el primer y segundo hijo de `.welcome`, así que
     caen solos en las dos columnas de la primera fila. */
  .welcome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding-right: calc(var(--tel-lado) + 2px);
    padding-left: calc(var(--tel-lado) + 2px);
  }

  .welcome-inner {
    margin: 0;
  }

  .espacio-float {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    margin: 0;
    justify-content: center;
  }

  .welcome-acciones {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .welcome-inner,
  .welcome-rights {
    grid-column: 1 / -1;
  }

  /* El aviso de derechos va CLAVADO al fondo de la portada en el escritorio
     (position: absolute, bottom: 26px, en app.css). Allá funciona porque la
     portada siempre es más alta que sus tarjetas. En el teléfono las tarjetas
     crecen más que la pantalla, así que el aviso les quedaba escrito ENCIMA
     —justo sobre Reportes y Expedientes—. Aquí baja a la fila que le toca y
     se lee después de todo, como corresponde. */
  .welcome-rights {
    position: static;
    order: 99;
  }

  /* La campana de la portada sí sobra: la cabecera del teléfono ya lleva una,
     y está en todas las pestañas. Dos campanas en la misma pantalla es una
     de más. */
  .welcome-acciones .campana-float {
    display: none;
  }

  /* Iba pegado al borde y se veía apretado, como si apenas cupiera. Se le
     baja el cuerpo y se le da aire: sigue siendo cómodo de tocar (40 px) sin
     parecer que se sale. */
  .settings-float {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
  }

  .settings-float svg {
    width: 17px;
    height: 17px;
  }

  /* El respiro va ARRIBA. Las tarjetas derraman unos 7 px de su caja —la
     sombra y el realce del color—, así que con poco margen el renglón queda
     pegado aunque las medidas digan que no se tocan. */
  .welcome-rights {
    padding: 34px 4px 10px;
    font-size: 11px;
  }

  /* ═══════════ 14 · Colaboradores ═══════════
     Esta pestaña ya venía en fichas, no en tabla: lo que sobra es el ancho
     de sus adentros. */
  .roster {
    gap: 10px;
  }

  .roster-card {
    padding: 14px;
  }

  .roster-card header {
    gap: 10px;
  }

  .roster-id {
    min-width: 0;
  }

  .roster-id b,
  .roster-id > b {
    font-size: 15.5px;
  }

  /* Las rejillas de datos de dentro de una ficha, a dos columnas. Tres
     columnas en 374 px dan celdas de 118 px, donde "₡1 250 000,00" no cabe. */
  .metric-group,
  .stats,
  .selected-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* La tabla partida (lista + detalle al lado) se apila. */
  .split-table {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ═══════════ 15 · Lo que se toca ═══════════
     Cuarenta y cuatro pixeles es el mínimo de Apple para algo que se toca con
     el dedo. Los botones chiquitos del escritorio —los "•••", las equis, las
     flechitas— se hicieron para un ratón, que apunta con precisión de un
     pixel. */
  .content .more,
  .content .icon-button,
  .drawer .more,
  .drawer .icon-button {
    min-width: 40px;
    min-height: 40px;
  }

  .content input:not([type="checkbox"]):not([type="radio"]),
  .content select,
  .drawer input:not([type="checkbox"]):not([type="radio"]),
  .drawer select {
    min-height: 44px;
    /* Menos de 16 px de letra hace que Safari acerque la pantalla de un
       tirón al tocar la casilla, y ya no se vuelve a alejar solo. */
    font-size: 16px;
    /* Y esto es la consecuencia de lo anterior, que costó encontrar: una
       casilla trae un ancho mínimo propio de unos 20 caracteres. Al subir la
       letra a 16 px ese mínimo creció, y en una rejilla de "1fr 1fr" —que en
       realidad es minmax(auto, 1fr)— las columnas no pudieron encogerse por
       debajo de él. La tarjeta de Tiempo laborado se salía 48 px y el monto
       quedaba cortado contra el borde. Con min-width 0 la casilla acepta el
       ancho que le den. */
    min-width: 0;
  }

  /* Y la rejilla, por si acaso: minmax(0, 1fr) le dice explícitamente que
     puede encogerse. Con "1fr" a secas el navegador respeta el mínimo del
     contenido y desborda en silencio. */
  .time-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Veinte pixeles de margen interior por lado son cuarenta de los 402 que
     hay. En el teléfono el aire se recorta un poco para que quepa el dato. */
  .time-card {
    padding: 16px;
  }

  /* Mes y Año en un solo renglón: Año es corto y solo, debajo de un Mes a lo
     ancho, se ve desparejo. */
  .time-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  /* La cabecera de Tiempo pone la persona a la izquierda y la explicación a
     la derecha, separadas por una rayita. A 375 px la explicación quedaba de
     80 px —cuatro palabras por renglón— y aun así se salía de la tarjeta. Se
     baja a su propio renglón, con la rayita arriba en vez de al lado. */
  .time-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .time-hint {
    flex: 1 0 100%;
    max-width: none;
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  /* Los que se quedaron chicos, uno por uno. Se nombran en vez de poner una
     regla general a todos los botones: una regla general le cambia el alto a
     piezas que están bien y desacomoda pantallas enteras. Estos ocho salieron
     de medir las doce pantallas, no de suponer. */
  .aj-item,
  .filtro-estado-menu button {
    min-height: 44px;
  }

  .anio-boton,
  .vac-otro,
  .deduction-add,
  .employee-status-toggle,
  .rep-quien-celda,
  .vac-quitar.con-rotulo {
    min-height: 40px;
  }

  /* Las pastillas de los días apartados (20 sep, 21 sep…) y la equis de
     quitar. Median 21 y 28 px de alto: con el dedo se erra. Son justo las que
     él estaba tocando en el video. */
  .vac-chip {
    min-height: 38px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .vac-quitar {
    min-width: 40px;
    min-height: 40px;
  }

  /* Con las pastillas más altas, la fila necesita su aire. */
  .vac-chips {
    gap: 8px;
  }

  .cal-flecha {
    width: 40px;
    height: 40px;
  }

  /* "Volver a colaboradores" se va: la flecha de la cabecera hace lo mismo y
     está siempre a la vista, aunque uno haya bajado. Dos maneras de volver en
     la misma pantalla es una de más. */
  .back-link {
    display: none;
  }

  /* ═══════════ 16 · Lo que se desliza de lado ═══════════
     Las tiras de pestañas de la ficha y de Reportes no caben: se deslizan con
     el dedo, sin barra a la vista, y se detienen en cada pestaña. */
  /* El filtro de Ausencias (Todas · Por revisar · Justificadas ·
     Injustificadas) mide 388 px de ancho y 31 de alto: cabe raspando en 430 y
     no cabe en 375, y con el dedo es un blanco muy bajo. Se le da alto de
     dedo y se le deja deslizar de lado con el resto de las tiras. */
  .segmented button {
    min-height: 40px;
  }

  .employee-tabs,
  .rep-tabs,
  .exp-separadores,
  .segmented {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-right: calc(var(--tel-lado) * -1);
    margin-left: calc(var(--tel-lado) * -1);
    padding-right: var(--tel-lado);
    padding-left: var(--tel-lado);
    overflow-x: auto;
    /* Y esto NO sobra, aunque lo parezca: en CSS, poner overflow-x en "auto"
       convierte el vertical de "visible" a "auto" por su cuenta. Con un solo
       pixel de contenido de más —y las tiras lo tienen, por un margen
       negativo de 1 px— la tira se puede deslizar de arriba abajo con el
       dedo, independiente de la página. Se siente rarísimo y fue justo lo que
       Erick vio en Expedientes y en las pestañas de la ficha. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .employee-tabs::-webkit-scrollbar,
  .rep-tabs::-webkit-scrollbar,
  .exp-separadores::-webkit-scrollbar,
  .segmented::-webkit-scrollbar {
    display: none;
  }

  .employee-tabs > *,
  .rep-tabs > *,
  .exp-separadores > *,
  .segmented > * {
    flex: none;
    scroll-snap-align: start;
  }

  /* En el escritorio angosto las sub-pestañas de la ficha esconden el rótulo y
     dejan solo el ícono, porque tienen que caber las seis a la vez. Aquí se
     deslizan de lado, así que no hay que esconder nada — y seis dibujos sin
     nombre son una adivinanza: la carita, el billete, la hoja, el relojito.
     El nombre vuelve, debajo del ícono. */
  .employee-tabs button,
  .rep-tabs button {
    flex-direction: column;
    gap: 3px;
    min-width: 68px;
    padding: 8px 10px;
  }

  .employee-tabs button span,
  .rep-tabs button span {
    display: block;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* La tira de doce meses de Reportes se salía 31 px de su tarjeta. La primera
     idea fue deslizarla por dentro, y estuvo mal: al volverla una caja que se
     desliza, el vertical también se activa, y taparlo RECORTABA lo que cada
     barrita lleva colgando debajo.

     Lo correcto era más simple: que los doce quepan. Las columnas se dejan
     encoger y ya. Sin caja de deslizar, no hay vertical que tapar ni nada que
     recortar. */
  .rep-tira {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px;
  }

  /* ═══════════ 16b · Configuración, de dos niveles ═══════════
     En el escritorio es una VENTANA de alto medido: el índice quieto a la
     izquierda, el panel deslizándose a la derecha. Eso está pensado para una
     pantalla ancha y no se toca.

     En el teléfono se parte en dos pantallas, como los ajustes del iPhone:
     la lista de secciones, y al tocar una, esa sección sola con su flecha
     para volver. Con las dos a la vez el panel se quedaba en 150 px.

     Cuál se ve lo dice data-cfg-nivel en <html>, que pone app.js. */
  .ajustes {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    /* La raya que separa el índice del panel no es un borde: es un degradado
       de corte duro pintado en el fondo de esta caja, a la altura de la
       columna del índice. Sin las dos columnas, esa raya queda cruzando la
       pantalla sola. Fondo liso. */
    background: var(--card);
  }

  /* Configuración se traía su propio margen (22 px arriba y abajo) desde
     configuracion.css, y con la cabecera flotando encima el buscador quedaba
     medio tapado. Hay que ganarle con la misma forma de selector. */
  html:has(.ajustes) .content {
    padding-top: calc(var(--tel-arriba) + 12px);
    padding-bottom: calc(var(--tel-abajo) + 20px);
  }

  html[data-cfg-nivel="indice"] .aj-panel {
    display: none;
  }

  html[data-cfg-nivel="panel"] .aj-indice {
    display: none;
  }

  .aj-indice,
  .aj-panel {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    border: 0;
  }

  /* El índice ya no es una columna angosta al lado: es la pantalla. Las
     secciones se leen como una lista de ajustes, con su flechita. */
  .aj-item {
    width: 100%;
    font-size: 15.5px;
  }

  /* La pastilla que viaja detrás de la sección activa no tiene sentido en una
     lista donde no se ve cuál está activa —se ve el panel, que es otra
     pantalla—, y al no medir bien queda una mancha suelta. */
  .aj-pastilla {
    display: none;
  }

  /* La cabecera de la sección ya la da la barra de arriba del teléfono. */
  .aj-cabeza {
    position: static;
  }

  .aj-panel-cuerpo {
    padding: 16px 0 0;
    overflow: visible;
  }

  /* Las filas de Configuración son ícono · texto · control. En angosto
     configuracion.css ya las hace envolver A PROPÓSITO, para que el control
     baje a su propio renglón alineado con el texto. Eso está bien y se
     respeta.

     Lo que estaba mal es que el TEXTO también se caía: no tenía permiso para
     encogerse (le faltaba min-width: 0), así que pedía sus 294 px enteros, no
     cabía al lado del ícono y se iba abajo — empezando más a la izquierda que
     el propio ícono, con lo que la fila no se leía como una sola cosa. */
  .aj-fila {
    gap: 12px;
    padding: 12px 14px;
  }

  .aj-fila-texto {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Los cinco separadores de Expedientes son una rejilla de cinco columnas
     fijas. En 402 px eso da columnas de 74, donde "Liquidación" se parte en
     dos renglones y la fila entera crece: se veía alta y como flotando, y con
     un deslizador propio de arriba abajo. Pasan a deslizarse de lado, como
     las pestañas de la ficha y las de Reportes, cada uno del ancho de su
     nombre. */
  .exp-separadores {
    grid-template-columns: none;
    padding: 10px 14px 0;
  }

  .exp-separador {
    padding: 10px 12px 12px;
    white-space: nowrap;
  }

  /* El comprobante NO lleva regla aquí, y es a propósito. Mide 740 px porque
     es una hoja carta y tiene que salir impreso igual a como se ve; el
     programa ya lo achica entero por su cuenta (ANCHO_DEL_PAPEL en app.js).
     Se probó a 430 px: queda de 398 y no se sale. Una regla de escala aquí
     encima se peleaba con esa y no hacía falta. */

  /* ═══════════ 17b · Que responda al dedo ═══════════
     En un teléfono no existe "pasar por encima": el dedo toca o no toca. Las
     259 reglas de :hover del programa no se disparan nunca, y el resultado es
     una pantalla que se siente muerta — uno toca y no pasa nada hasta que la
     pantalla entera cambia.

     Copiar esas 259 reglas al toque sería absurdo y quedaría desparejo. Lo
     que hace que una aplicación se sienta viva en un teléfono es otra cosa:
     que CADA cosa que se toca se hunda un poquito bajo el dedo y vuelva. Eso
     se escribe una vez y vale para todo.

     Tres tamaños de hundida, según el tamaño de la pieza: una pastilla chica
     se hunde más que una tarjeta grande, porque en la grande el mismo
     porcentaje se ve exagerado. Y las filas de lista no se hunden: se tiñen,
     porque encoger algo que ocupa todo el ancho se lee como un temblor. */
  .welcome-module,
  .roster-card,
  .quien-ficha,
  .exp-hoja,
  .button,
  .aj-item,
  .tel-tab,
  .more,
  .settings-float,
  .espacio-float,
  .welcome-acciones button {
    transition:
      transform var(--dur-1) var(--ease),
      box-shadow var(--dur-2) ease,
      border-color var(--dur-2) ease,
      background-color var(--dur-2) ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Las tarjetas grandes: una hundida discreta. */
  .welcome-module:active,
  .roster-card:active,
  .exp-hoja:active {
    transform: scale(.975);
  }

  /* Las piezas chicas: se hunden más, que si no no se nota. */
  .button:active,
  .quien-ficha:active,
  .more:active,
  .settings-float:active,
  .espacio-float:active,
  .welcome-acciones button:active {
    transform: scale(.94);
  }

  /* Las filas de lista se tiñen en vez de encogerse. */
  .aj-item:active,
  .aj-fila:active,
  .aviso-ir:active,
  .tel-hoja-fila:active,
  table:not(:where(.comprobante *)) tbody tr:active {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
  }

  html[data-theme="dark"] .aj-item:active,
  html[data-theme="dark"] .aj-fila:active,
  html[data-theme="dark"] .aviso-ir:active,
  html[data-theme="dark"] table:not(:where(.comprobante *)) tbody tr:active {
    background: rgba(255, 255, 255, .07);
  }

  /* Y para las dos familias donde el efecto de pasar por encima ES la gracia
     —el resplandor del color de cada módulo en Inicio, y el levantarse de la
     ficha de un colaborador—, ese mismo efecto se dispara al tocar. Son dos;
     copiarlas vale la pena. */
  .welcome-module:active {
    border-color: rgba(var(--glow), .55);
    box-shadow: 0 16px 30px rgba(var(--glow), .22), 0 0 0 1px rgba(var(--glow), .18);
  }

  html[data-theme="dark"] .welcome-module:active {
    border-color: rgba(var(--glow), .6);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .45), 0 0 22px rgba(var(--glow), .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  }

  .roster-card:active {
    border-color: #b9c4d4;
    box-shadow: 0 12px 26px rgba(16, 28, 66, .1);
  }

  /* La campanita se mece al tocarla, igual que en la computadora al pasarle la
     flecha por encima. Es el mismo vaivén: el giro sale del asa, no del
     centro, que es lo que hace que se lea como campana. */
  .tel-campana svg {
    transform-origin: 50% 15%;
  }

  .tel-campana.campanea-der svg {
    animation: campanear-der .95s cubic-bezier(.36, .07, .19, .97);
  }

  html[data-movimiento="reducido"] .tel-campana.campanea-der svg {
    animation: none;
  }

  /* ═══════════ 17c · El comprobante NO SE TOCA ═══════════
     Un comprobante es papel: mide 740 px porque es el ancho útil de una hoja
     carta, y tiene que verse igual a como va a salir impreso. No se
     reacomoda ni medio milímetro — si el hueco es menor, el programa lo
     achica ENTERO, como una hoja vista de lejos (zoom, en ajustarPapel()).

     Aquí no hay ninguna regla, y es a propósito. Las reglas que convierten
     tablas en fichas llevan `:not(:where(.comprobante *))`, así que el papel
     nunca entra. Se probó primero a corregirlo después, con una excepción que
     devolvía los valores a mano, y salió mal: el papel usa relleno y tamaños
     distintos según la fila, y una excepción pareja lo estiraba 128 px.

     Si algún día se agrega otra regla de teléfono que toque tablas o celdas,
     hay que ponerle la misma exención.

     Lo que SÍ hay que hacer aquí es apagar las reglas de ventana angosta que
     el propio comprobante trae (modal.css, @media max-width 620px). Están
     bien para el escritorio: si alguien encoge la ventana, el encabezado del
     papel pasa de dos columnas a una y sigue siendo legible. Pero en el
     teléfono el papel NO se encoge, se ACHICA: por dentro siempre mide 740 px
     y solo se ve más pequeño. Las reglas de ventana angosta miran la pantalla
     del aparato, no el papel, así que se disparaban sin motivo y le
     reacomodaban el encabezado — 120 px más alto que en la computadora.

     Estos valores están copiados de la regla original de modal.css (líneas
     4455 y 4503). El papel tiene que quedar idéntico: se compara pieza por
     pieza, las 72, y las 72 tienen que medir lo mismo. */
  .comprobante .cp-encabezado {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 26px 34px;
  }

  .comprobante .cp-hechos {
    text-align: right;
    min-width: 190px;
  }

  /* ═══════════ 18 · Tema oscuro ═══════════
     El vidrio sobre negro se ensucia si se deja igual: el tinte sube para que
     la barra siga siendo una superficie y no una mancha, y el canto se vuelve
     un hilo de luz blanca, que es lo que la despega del fondo. */
  html[data-theme="dark"] .tel-cabeza {
    border-bottom-color: rgba(255, 255, 255, .09);
    background: color-mix(in srgb, #1b2433 76%, transparent);
  }

  html[data-theme="dark"] .tel-barra {
    border-color: rgba(255, 255, 255, .11);
    background: color-mix(in srgb, #1b2433 74%, transparent);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, .5),
      0 2px 8px rgba(0, 0, 0, .3);
  }

  html[data-theme="dark"] .tel-tab.activo::before {
    background: color-mix(in srgb, var(--tono) 22%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  }

  html[data-theme="dark"] .drawer {
    border-top-color: rgba(255, 255, 255, .1);
  }

  html[data-theme="dark"] .drawer::before {
    background: rgba(255, 255, 255, .22);
  }

  html[data-theme="dark"] .drawer-actions {
    background: var(--card);
  }

  /* ═══════════ 19 · Movimiento reducido ═══════════
     Si en Configuración se apagó el movimiento, aquí también. */
  html[data-movimiento="reducido"] .drawer,
  html[data-movimiento="reducido"] .drawer.closing {
    animation: none;
  }

  html[data-movimiento="reducido"] .tel-tab:active,
  html[data-movimiento="reducido"] .welcome-module:active,
  html[data-movimiento="reducido"] .roster-card:active,
  html[data-movimiento="reducido"] .exp-hoja:active,
  html[data-movimiento="reducido"] .button:active,
  html[data-movimiento="reducido"] .quien-ficha:active,
  html[data-movimiento="reducido"] .more:active,
  html[data-movimiento="reducido"] .settings-float:active,
  html[data-movimiento="reducido"] .espacio-float:active {
    transform: none;
  }
}

/* Fuera del teléfono, las piezas nuevas no existen. Se dibujan siempre en el
   HTML —para no tener que redibujar la página al girar el aparato— y se
   apagan aquí. Esta es la ÚNICA regla de este archivo que corre en
   escritorio, y lo único que hace es esconder tres elementos que en
   escritorio no pintan nada. */
@media (min-width: 481px) {
  .tel-cabeza,
  .tel-barra {
    display: none;
  }
}