/* Nexvet Home — estilos de la aplicación de terreno.

   Se sirve desde el servidor en /pagina.css. El navegador lo pide con la
   huella del contenido pegada (?v=…), así que un despliegue se ve de
   inmediato sin tener que forzar la recarga.

   ESTA PANTALLA SE USA DE PIE, EN EL LIVING DE UN DESCONOCIDO, CON UNA MANO.
   De ahí salen casi todas las decisiones de acá abajo: letras grandes, pocos
   elementos por pantalla, un solo botón principal a la vez, y todo lo que se
   toca de al menos 44 píxeles de alto.

   Los colores son LOS MISMOS de Nexvet Labs (nexovet/pagina.css). No es
   pereza: los dos productos se venden bajo la misma marca y el veterinario va
   a usar los dos. El verde significa una sola cosa —"esto ya está
   verificado"— y el ámbar otra —"esto hay que mirarlo"—, igual que allá. */

/* ══ LA LETRA ════════════════════════════════════════════════════════════════
   IBM Plex Sans, la misma que Nexvet Labs y que el Home de la VM desde el 15
   de septiembre de 2026. Llega a la nube el 17 de septiembre de 2026.

   ⚠️ EL MOTIVO ES QUE LOS DOS PRODUCTOS LOS ABRE LA MISMA PERSONA, muchas
   veces en el mismo día. Desde que Labs cambió de letra, un veterinario que
   pasa de una aplicación a la otra veía dos tipografías distintas bajo la
   misma marca. Acá decía «la letra del propio teléfono, no una de Google:
   esta aplicación tiene que verse igual de bien sin señal», y ese motivo
   dejó de ser un impedimento: la letra se sirve desde el propio servidor
   —como ya hace la portada— y `sw.js` la guarda junto con el resto de la
   cáscara.

   ⚠️ NO ES EL MISMO CAMBIO QUE LA ESCALA, y los dos no se hacen juntos a
   propósito. Labs pasó de 12,5 a 15 px el mismo día que cambió de letra; acá
   el cuerpo SIGUE EN 14 px. Cambiarle el porte a toda la pantalla y la letra
   en la misma noche deja sin saber cuál de los dos rompió qué.

   ⚠️ SE SIRVE DESDE ACÁ Y NUNCA DESDE GOOGLE: un `@import` a
   fonts.googleapis le entregaría a Google la IP de quien entre, y
   `privacidad.html` promete por escrito que ninguna página de Nexvet le pide
   nada a otro servidor.

   ⚠️ ES EL MISMO ARCHIVO QUE EL DE LABS, COPIADO — no compartido. Los dos
   productos no comparten código a propósito, y una carpeta común para «no
   repetir 45 KB» es la clase de atajo que este proyecto ya descartó con
   `lector.py`. Si algún día se cambia la tipografía se cambian los dos, y se
   cambia el NOMBRE del archivo, nunca el `?v=`.

   ⚠️ ES UNA SOLA VARIABLE CON TODOS LOS GROSORES, y tiene que serlo: Home usa
   el peso 650 en varias reglas, y ese no existe como archivo suelto.

   ⚠️ EN LA NUBE LA SIRVE NGINX, no una lista del servidor: su
   `location ~* \.(css|js|woff2|…)$` ya la contempla, así que `nginx.conf` no
   se tocó. Lo que sí hubo que tocar es la `CASCARA` de `sw.js`, y por eso su
   `CAJA` subió a v6: cambió QUÉ se guarda.

   ⚠️ NO LLEVA `?v=`, al revés que `pagina.css` y `pagina.js`: la dirección de
   la letra es fija y lo que cambia, si algún día cambia, es el nombre del
   archivo.

   ⚠️ El respaldo es la letra del sistema, entera. Si el archivo no llegara,
   Home se ve como se veía antes: más ancha, no rota. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("plex-latin.woff2") format("woff2");
}

#home{
    /* ⚠️ EL FONDO VOLVIÓ A SER GRIS EL 28 DE SEPTIEMBRE DE 2026 (`--suelo`,
       más abajo), a pedido de Seba: con todo blanco, las tarjetas y los
       campos donde se escribe no se distinguían del resto. Lo que sigue es la
       historia de por qué había sido blanco.

       ⚠️ EL FONDO ERA BLANCO DESDE EL 10 DE SEPTIEMBRE DE 2026, y antes era
       el gris azulado #F1F5F8. El cambio se puede hacer porque en esta
       aplicación CASI TODO lo que es una tarjeta ya lleva su propio borde
       (`--line`): la separación nunca dependió del contraste entre la tarjeta
       blanca y el fondo gris. Se midieron los ocho pares de texto sobre el
       fondo nuevo y TODOS MEJORAN respecto del gris, porque el blanco es más
       claro que el gris que había.

       ⚠️ Lo único que había que arreglar es `--faint`: sobre el gris daba
       3,13 y sobre blanco 3,43, o sea nunca cumplió los 4,5 que pide el
       manual. Se oscurece a #6A7880, que da 4,55. */
    --bg:#FFFFFF; --card:#FFF; --ink:#15232C; --ink2:#43555F; --muted:#5E6E75; --faint:#627077;
    /* ⚠️ EL SUELO Y EL BORDE DE LOS CAMPOS (28 de septiembre de 2026, Seba:
       «algo sutil pero que distinga los cuadros donde va información»). El
       suelo deja de ser blanco y las tarjetas y los campos quedan claros
       encima. `--faint` se oscureció de #6A7880 a #627077 por esto mismo:
       sobre el suelo gris daba 4,09 y el mínimo es 4,5 (ahora 4,6). */
    --suelo:#F0F3F7; --linea-campo:#B6C3CE;
    --line:#E1E8ED; --line2:#EFF3F6; --brand:#1C5FC4; --brandl:#E8F0FE; --brandd:#0E3A80;
    --warn:#94570D; --warnl:#FBF2E2; --warnb:#E6CFA6;
    --alert:#A6322A; --alertl:#FAEAE8;
    --ok:#177A50; --okl:#E4F2EA;

    /* El campo oscuro del encabezado. Es el mismo azul petroleo de la marca,
       llevado a un tono hondo para que la barra de arriba pese y la pantalla
       deje de verse plana. El texto encima va en blanco y en un celeste claro,
       que son los dos unicos colores que se leen bien ahi. */
    /* ⚠️ LOS TRES COLORES DE ACCIÓN, Y NINGUNO ES DE LOS QUE SIGNIFICAN ALGO.
       En este proyecto el verde quiere decir «verificado», el ámbar «esto hay
       que mirarlo» y el rojo «esto está mal», y ninguno se usa de adorno: un
       botón de descargar pintado de verde le robaría el significado al único
       color que lo tiene.

       Estos tres —petróleo, índigo y ciruela— no dicen nada por sí solos.
       Están para que el ojo separe tres botones que van pegados, y salen de
       las paletas que Home ya tiene, así que no son colores nuevos en el
       sistema: son los mismos usados para otra cosa. */
    --ac-ver:#1C5FC4; --ac-bajar:#3A4E8F; --ac-mandar:#7B3E70;

    /* ══ LOS CUATRO TINTES DE LOS ÍCONOS DE SECCIÓN ═══════════════════════
       Cada rótulo de la aplicación lleva su dibujo adentro de una pastilla de
       color. El color no es decoración: agrupa. De un vistazo se sabe si lo
       que viene es del reloj, de los papeles, de la gente o de algo que sale
       hacia afuera, sin leer el rótulo.

       ⚠️ NINGUNO ES UN COLOR NUEVO. Los cuatro ya estaban en este archivo:
       el azul es `--brand`, el violeta es la paleta ciruela, el magenta es
       `--t-curacion` y la pizarra es `--t-muestra`. Un color nuevo en un
       sistema hay que medirlo contra todos los demás; uno que ya está, no.

       ⚠️ SON FIJOS Y NO SIGUEN LA PALETA QUE ELIGE EL VETERINARIO, igual que
       los colores de tipo de visita. Si siguieran la paleta, con «rosa» el
       azul del tiempo y el magenta del contacto quedarían a 2° uno del otro
       —o sea, el mismo color— y la agrupación se caería justo donde más se
       nota.

       ⚠️ VERDE, ÁMBAR Y ROJO NO ESTÁN ACÁ, y no es un olvido: significan
       «verificado», «hay que mirarlo» y «esto está mal». Un ícono de sección
       pintado de verde diría que la sección está confirmada. Los rótulos que
       SÍ hablan de eso —`ok` y `alerta`— usan esos mismos colores más abajo,
       que es el único sitio donde corresponde.

       ⚠️ LOS CUATRO ESTÁN MEDIDOS, contra su propio tinte y contra el fondo
       blanco, y ninguno baja de 5,2 (el mínimo del manual es 4,5). Y ninguno
       queda a menos de 31° del verde, del ámbar ni del rojo.

                                  sobre su   sobre el   lo más cerca que
                                  tinte      fondo      queda de un color
                                                        que significa algo
          azul    el tiempo        5,26       6,03       61,5°  del verde
          violeta los papeles      6,35       7,52       93,2°  del rojo
          magenta el contacto      6,23       7,28       31,5°  del rojo
          pizarra la gente         5,76       6,74       41,6°  del verde   */
    --ic-tiempo:#1C5FC4;  --ic-tiempo-l:#E8F0FE;
    --ic-papel:#6D3D9B;   --ic-papel-l:#F0E9F8;
    --ic-gente:#42606B;   --ic-gente-l:#E9EEF0;
    --ic-afuera:#96305F;  --ic-afuera-l:#F7EAF0;

    /* ══ DE QUÉ ES CADA VISITA ═══════════════════════════════════════════
       Los colores con que se pinta el tipo de visita en la agenda.

       ⚠️ SE ELIGIERON MIDIENDO, no a ojo, y con tres condiciones a la vez:
       cada uno a ΔE 37 o más del verde, del ámbar y del rojo —que en esta
       aplicación significan verificado, hay que mirarlo y está mal, y no se
       pueden gastar en categorías—; a ΔE 31 o más entre ellos, que es la
       distancia a la que el ojo los separa de reojo; y 4,5 de contraste
       sobre su propio tinte.

       ⚠️ CUATRO ES EL MÁXIMO. Con los verdes, ámbares y rojos fuera no queda
       sitio en el círculo de color para un quinto tono sobrio que no se
       confunda con alguno de estos cuatro; se probó. Por eso «muestra» y
       «otro» van en gris y lo que los separa es el dibujo.

       Si se agrega un tipo nuevo hay que volver a medir. */
    --t-consulta:#1C5FC4; --t-consulta-l:#E8F0FE;
    --t-control:#2A4C9E;  --t-control-l:#E8EBF7;
    --t-vacuna:#8E3596;   --t-vacuna-l:#F5EAF6;
    --t-curacion:#96305F; --t-curacion-l:#F7EAF0;
    --t-muestra:#42606B;  --t-muestra-l:#E9EEF0;
    --t-otro:#5E6E75;     --t-otro-l:#EFF3F6;

    --campo:#123A7A; --campo-hondo:#0B2755;
    --campo-tinta:#FFFFFF; --campo-tenue:#AFC7EE;

    /* Tres radios para toda la aplicación, igual que en Nexvet Labs. */
    --r1:7px; --r2:10px; --r3:14px;
    --som:0 1px 2px rgba(16,32,44,.07);

    /* La letra propia, servida desde el propio servidor y guardada por
       `sw.js`: esta aplicación tiene que verse igual de bien sin señal, y por
       eso NO se le pide a Google. El respaldo, si el archivo no llegara, es la
       del teléfono. El motivo entero está en el `@font-face` de más arriba. */
    --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --code:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

    background:var(--suelo);color:var(--ink);font-family:var(--sans);
    font-size:16px;line-height:1.5;
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;min-height:100dvh;
    display:flex;flex-direction:column;
    max-width:520px;margin:0 auto;
    /* En un teléfono con muesca, que el contenido no quede debajo de ella. */
    padding:env(safe-area-inset-top) 0 0;
  }

  /* ══ LAS PALETAS ═════════════════════════════════════════════════════════

     El veterinario elige con qué color trabaja, en «Tu cuenta». Sale de que
     una clínica que atiende sobre todo a un público distinto quiere verse
     distinta, y el color de la marca es lo único que hay que mover para eso.

     ⚠️ SOLO CAMBIAN LOS COLORES DE LA MARCA. El verde, el ámbar y el rojo
     NO se tocan en ninguna paleta, y no es un olvido: en esta aplicación el
     verde significa «esto ya está verificado», el ámbar «esto hay que
     mirarlo» y el rojo «esto está mal o se venció». Si una paleta pintara la
     marca de verde, un botón cualquiera se leería como «verificado». Por eso
     no hay ninguna paleta verde, aunque sería la primera que uno probaría.

     ⚠️ LOS OCHO PARES SE MIDIERON, uno por uno, antes de escribirlos acá:
     blanco sobre el botón, el color sobre blanco, el color sobre el fondo
     gris, el chip, y los tres del campo oscuro. **Ninguno baja de 5,4** y el
     mínimo es 4,5. Si se agrega una paleta nueva hay que volver a medir: un
     color elegido a ojo se ve bien en el monitor de quien lo eligió y no se
     lee en un teléfono al sol.

                          botón   sobre     campo
                          blanco  el fondo  oscuro
        petróleo (la de hoy) 6,11    5,43     9,43
        rosa                 6,30    5,60    10,74
        ciruela              7,52    6,68    12,09
        índigo               7,77    6,90    10,69                          */

  #home[data-paleta="rosa"]{
    --brand:#A8326B; --brandl:#FBE9F1; --brandd:#862856;
    --campo:#6E1F49; --campo-hondo:#571639; --campo-tenue:#F0BEDA;
  }
  #home[data-paleta="ciruela"]{
    --brand:#6D3D9B; --brandl:#F0E9F8; --brandd:#56307C;
    --campo:#46256B; --campo-hondo:#351B52; --campo-tenue:#D6C4EE;
  }
  #home[data-paleta="indigo"]{
    --brand:#2F4E9E; --brandl:#E7ECF9; --brandd:#253E7F;
    --campo:#223B78; --campo-hondo:#182C5C; --campo-tenue:#BCCBEE;
  }

  /* ══ EL MODO NOCTURNO ════════════════════════════════════════════════════

     ⚠️ TODO VIVE EN ESTE BLOQUE, `#home.noche`, que redefine los tokens: las
     992 reglas que ya usan `var(--…)` cambian solas y **ninguna regla del modo
     de día se toca**, así que el día no se puede romper arreglando la noche.
     Es el mismo mecanismo que `#nube.noche` en Nexvet Labs, copiado y no
     inventado — y la paleta oscura es la misma, ya medida allá.

     ⚠️ NO SE INVENTÓ NINGÚN COLOR DE FONDO NI DE TINTA: son los de Labs, y
     antes de eso eran los del visor de DICOM y los del informe, que son
     oscuros desde que existen.

     ⚠️⚠️ PERO EL COLOR DE LA MARCA SÍ HUBO QUE CALCULARLO, Y SON CUATRO, uno
     por paleta. Medido sobre la tarjeta oscura, los cuatro de día NO SE LEEN:
     azul 2,80 · rosa 2,68 · ciruela 2,25 · índigo 2,18, con el mínimo en 4,5.
     Los de noche son los mismos tonos subidos de claridad, y están medidos:

                         sobre tarjeta   sobre fondo
        azul    #6EA3F0      6,56           7,16      (el mismo de Labs)
        rosa    #E27FAE      6,34           6,91
        ciruela #B594DE      6,64           7,24
        índigo  #8FA8E8      7,19           7,84

     ⚠️ Y LOS TRES QUE SIGNIFICAN ALGO —verde, ámbar, rojo— SIGUEN
     SIGNIFICANDO LO MISMO: cambia el tono para que se lea sobre oscuro, nunca
     el sentido. Es la regla de toda la aplicación.

     ⚠️ EL CAMPO OSCURO (`--campo*`) NO SE TOCA: ya era oscuro de día —es el
     fondo de la barra de arriba— y de noche sigue funcionando igual. Lo que
     cambia debajo es el resto de la pantalla, que es lo que lo hacía resaltar.

     ⚠️ AL AGREGAR UN COLOR NUEVO A ESTA HOJA, USAR UN TOKEN. Un literal se ve
     bien de día y aparece equivocado de noche, y eso no lo atrapa ningún
     chequeo — ya pasó en Labs con la portada de perfiles, que salía blanca. */
  #home.noche{
    --bg:#0E1519; --card:#151E24; --ink:#E7EEF1; --ink2:#C6D5DB;
    --muted:#9FB6C0; --faint:#7C9099;
    --line:#26333B; --line2:#1C262C;
    --brand:#6EA3F0; --brandl:#16304F; --brandd:#AFC7EE;
    --warn:#E3B36A; --warnl:#3D2E12; --warnb:#5C4620;
    --alert:#F0B4AE; --alertl:#4A1D19;
    --ok:#5BE1A0; --okl:#123C2B;
    /* Los tres botones de puro dibujo, subidos de claridad igual que en Labs:
       con los valores de día `--ac-ver` daba 2,80 sobre la tarjeta oscura. */
    --ac-ver:#6EA3F0; --ac-bajar:#98A9E0; --ac-mandar:#D79BCB;
    --som:0 1px 2px rgba(0,0,0,.34);
  }
  /* ⚠️ VAN DESPUÉS DE `.noche` Y CON LAS DOS COSAS EN EL SELECTOR: las paletas
     de día son `#home[data-paleta=…]` y pesan lo mismo que `#home.noche`, así
     que sin esto mandaría la última escrita y de noche todo el mundo vería
     azul. Con `.noche[data-paleta=…]` pesa una clase más y gana. */
  #home.noche[data-paleta="rosa"]{
    --brand:#E27FAE; --brandl:#3A1628; --brandd:#F0BEDA;
  }
  #home.noche[data-paleta="ciruela"]{
    --brand:#B594DE; --brandl:#2A1F3A; --brandd:#D6C4EE;
  }
  #home.noche[data-paleta="indigo"]{
    --brand:#8FA8E8; --brandl:#1B2643; --brandd:#BCCBEE;
  }

  /* ⚠️ LA HOJA DE UN DOCUMENTO ES PAPEL, Y DE NOCHE SIGUE SIENDO PAPEL. La
     `.doc` tiene fondo blanco fijo —es lo que sale impreso— pero sus rótulos,
     el nombre del médico, el «Rp.» y la raya de arriba usan los tokens, y de
     noche los tokens se aclaran: celeste pálido sobre blanco, que casi no se
     lee. Lo vio Seba en la vista previa de la receta el 26 de septiembre de
     2026. Adentro de la hoja se devuelven los valores de día, por paleta. */
  #home.noche .doc{
    --ink:#15232C; --ink2:#43555F; --muted:#5E6E75; --faint:#6A7880;
    --line:#E1E8ED; --line2:#EFF3F6;
    --brand:#1C5FC4; --brandl:#E8F0FE; --brandd:#0E3A80;
    --warn:#94570D; --warnl:#FBF2E2; --warnb:#E6CFA6;
    --alert:#A6322A; --alertl:#FAEAE8;
    --ok:#177A50; --okl:#E4F2EA;
  }
  #home.noche[data-paleta="rosa"] .doc{--brand:#A8326B; --brandl:#FBE9F1; --brandd:#862856}
  #home.noche[data-paleta="ciruela"] .doc{--brand:#6D3D9B; --brandl:#F0E9F8; --brandd:#56307C}
  #home.noche[data-paleta="indigo"] .doc{--brand:#2F4E9E; --brandl:#E7ECF9; --brandd:#253E7F}

  /* El elegidor de paleta, en «Tu cuenta». Cada opción se pinta con SU propio
     color: elegir un color mirando la palabra «ciruela» no tiene ningún
     sentido. */
  .paletas{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 4px}
  .paleta{
    flex:1 1 0;min-width:74px;
    display:flex;flex-direction:column;align-items:center;gap:7px;
    background:var(--card);border:1.5px solid var(--line);border-radius:var(--r2);
    padding:12px 6px 10px;font-size:13.5px;font-weight:600;color:var(--ink2);
  }
  .paleta .muestra{
    width:34px;height:34px;border-radius:50%;
    /* Dos colores en un solo círculo: el de la marca y el del campo oscuro,
       que son los dos que de verdad cambian de sitio en la pantalla. */
    background:linear-gradient(135deg,var(--p-brand) 0 50%,var(--p-campo) 50% 100%);
  }
  .paleta.puesta{border-color:var(--brand);background:var(--brandl);color:var(--brandd)}
  .paleta:hover{border-color:var(--brand)}

  #home *,#home *::before,#home *::after{box-sizing:border-box}
  /* ⚠️ `:where()` NO ES UN ADORNO: ES LO QUE HACE QUE ESTA REGLA NO PISE A
     LAS DEMÁS. Escrita como `#home button`, esta regla lleva un ID y le gana a
     CUALQUIER regla de clase sobre un botón. O sea que `.mini-boton{font-size:
     13px;color:var(--brand)}` no hacía nada: el botón «Traer la anamnesis de
     la visita anterior» salía en 16 px y en tinta negra, y estaba así desde el
     día que se escribió. Nadie lo vio porque ese botón casi nunca aparecía.

     `:where()` vale cero en la cuenta de especificidad, así que el selector
     entero pasa a valer lo mismo que `button` a secas. La regla sigue haciendo
     su trabajo —que un botón herede la letra de la página en vez de la del
     sistema— y deja de estorbar.

     Por eso existían `#home .boton` y `#home .voz` con el ID puesto a mano:
     eran los dos que alguien alcanzó a notar. Con esto ya no hace falta el
     truco, y las clases nuevas se pueden escribir normal.

     Está desde 2021 en los tres navegadores. */
  /* ⚠️ EL `:where()` VA EN EL `#home`, NO EN EL `button`, y esa es toda la
     diferencia. `:where()` pone en cero SOLO LO QUE LLEVA ADENTRO: escrito
     `#home :where(button)` el ID sigue contando y la regla sigue ganándole a
     cualquier clase. Escrito `:where(#home) button` la regla vale lo mismo que
     `button` a secas —lo mínimo— y sigue aplicándose únicamente dentro de la
     aplicación, que es lo que el `#home` estaba haciendo.

     Se probó midiendo en el navegador, no razonando: con la primera forma
     `.tbl .v-accion{font-size:13.5px}` seguía sin aplicarse. */
  :where(#home) button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit}
  #home :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r1)}

  /* Todo lo que se puede apretar responde igual: un cambio corto y suave. Es
     la misma regla de Nexvet Labs, y sin ella los estados aparecen de golpe y
     la interfaz se siente dura. Solo color y sombra: mover alto o ancho
     obliga al navegador a recalcular el diseño en cada cuadro. */
  #home button,#home a,#home input,#home select,#home textarea{
    transition:background-color .13s ease, border-color .13s ease, color .13s ease,
               box-shadow .13s ease;
  }

  /* Y si alguien pidió menos movimiento en su teléfono, se le hace caso en
     TODA la aplicación y no solo en el aviso flotante. */
  @media(prefers-reduced-motion:reduce){
    #home *,#home *::before,#home *::after{
      animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important;
    }
  }

/* ---------------------------------------------------------- el encabezado */

  .barra{
    flex:none;
    /* ⚠️ EL DEGRADADO NO PUEDE EMPEZAR EN `--brand`, aunque se vería más
       azul. Se midió: `--campo-tenue` (el color del subtítulo) sobre
       `--brand` da 3,69 en petróleo y 3,92 en rosa, o sea el subtítulo del
       encabezado dejaría de leerse en dos de las cuatro paletas. Se queda
       entre `--campo` y `--campo-hondo`, que dan 5,69 y más, y lo que cambia
       es el ÁNGULO: en diagonal el degradado se ve, y sobre el fondo blanco
       el campo oscuro pesa mucho más que sobre el gris que había antes. */
    background:linear-gradient(135deg,var(--campo) 0%,var(--campo-hondo) 100%);
    color:var(--campo-tinta);
    padding:17px 16px 16px;display:block;
    position:sticky;top:0;z-index:3;
    /* El borde de abajo no es una linea gris: es la propia sombra del campo
       oscuro sobre el contenido, que separa mejor sin ensuciar. */
    box-shadow:0 1px 0 rgba(0,0,0,.12), 0 6px 16px -12px rgba(7,58,76,.7);
  }
  /* El envoltorio es el que reparte; `.barra` solo pone el fondo oscuro, que
     llega de borde a borde. */
  .barra-dentro{display:flex;align-items:flex-start;gap:12px;width:100%}
  .barra .titulo{flex:1;min-width:0}
  .barra h1{
    margin:0;font-size:22px;font-weight:700;letter-spacing:-.028em;line-height:1.1;
    color:var(--campo-tinta);
  }
  .barra .sub{font-size:15px;color:var(--campo-tenue);margin-top:3px}
  .volver{
    background:rgba(255,255,255,.14);border:0;color:var(--campo-tinta);
    font-weight:600;font-size:15px;padding:7px 12px;border-radius:20px;
    flex:none;margin-top:2px;
  }
  .volver:hover{background:rgba(255,255,255,.24)}

  /* ── Moverse entre días desde «Hoy» ────────────────────────────────────
     Las dos flechas van PEGADAS al título y no en una barra aparte: lo que
     cambian es justo lo que dice ahí. La de atrás queda a la izquierda del
     título, que es de donde uno viene.
     ⚠️ 40 px de lado: se usan de pie y con una mano. No bajan de ahí. */
  .dia-fl{
    background:rgba(255,255,255,.14);border:0;color:var(--campo-tinta);
    width:40px;height:40px;min-height:40px;border-radius:50%;flex:none;
    display:grid;place-items:center;margin-top:2px;
  }
  .dia-fl:hover{background:rgba(255,255,255,.26)}
  /* Solo aparece fuera de hoy: un botón que dice «Hoy» estando en hoy no
     lleva a ninguna parte. */
  .dia-hoy{
    background:rgba(255,255,255,.14);border:0;color:var(--campo-tinta);
    font-weight:650;font-size:15px;padding:0 15px;min-height:40px;
    border-radius:20px;flex:none;margin-top:2px;
  }
  .dia-hoy:hover{background:rgba(255,255,255,.26)}
  /* Las dos flechas van juntas, a los lados del título. El `margin-right:auto`
     es el que manda el avatar al borde derecho; sin él el título se estiraba y
     dejaba la flecha de adelante a 1.200 px de la de atrás. */
  .dia-der{display:flex;gap:8px;align-items:center;margin-right:auto}
  .barra .titulo.con-dias{flex:0 1 auto}
  #home .barra :focus-visible{outline:2px solid var(--campo-tinta);outline-offset:2px}

  /* Franja de "sin señal". Va pegada bajo el encabezado y no se puede cerrar:
     es la única forma de que el veterinario sepa que lo que está escribiendo
     todavía no llegó a ninguna parte. */
  .franja{
    flex:none;background:var(--warn);color:#FFF;
    padding:9px 16px;font-size:15px;display:flex;gap:8px;align-items:center;
  }
  .franja b{font-weight:650}

/* ── LO QUE FALTA SUBIR ────────────────────────────────────────────────────

   La pantalla que se abre desde la franja de acá arriba, desde el 13 de
   septiembre de 2026. Ver `verCola()` en pagina.js.

   ⚠️ LA FRANJA PASA A SER UN BOTÓN CUANDO HAY ALGO QUE MIRAR, y por eso
   `.franja-boton` existe: un `<button>` trae su propio borde, su propio fondo
   y el texto centrado, y los tres hay que apagarlos para que se vea
   exactamente igual que el `<div>` que reemplaza. Si se vieran distintos, la
   franja cambiaría de forma según si hay cambios esperando — y lo que cambia
   es lo que dice, no lo que es. */
  .franja-boton{
    width:100%;border:0;text-align:left;font:inherit;color:inherit;
    background:var(--warn);
  }
  /* La flecha se va al borde derecho: es lo que dice «acá se entra». */
  .franja-boton .ic{margin-left:auto}
  /* El texto corre como una frase y se parte donde le toca, en vez de partirse
     en dos cajas de flex. Ver el comentario de `dentroFranja` en pagina.js. */
  .franja-txt{flex:1;min-width:0}

  .co-lista{display:flex;flex-direction:column;gap:9px;margin-top:10px}
  /* Las mismas medidas que `.tarjeta-paciente`: son dos listas de filas de la
     misma aplicación y no tienen por qué verse distinto. */
  .co-fila{
    display:flex;align-items:center;gap:11px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    box-shadow:var(--som);padding:14px 13px;
  }
  /* ⚠️ EL COLOR NO SE ESCRIBE ACÁ. Este es el azul de por omisión; el que de
     verdad se ve lo ponen las reglas `:has()` de más abajo, según qué dibujo
     lleve adentro. Así una ficha clínica sale violeta —los papeles— y un cobro
     magenta —lo que sale hacia afuera— sin que esta pantalla sepa nada de eso. */
  .co-ic{
    width:34px;height:34px;flex:none;border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    background:var(--ic-tiempo-l);color:var(--ic-tiempo);
  }
  .co-txt{flex:1;min-width:0}
  .co-que{font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
  .co-cuando{font-size:13.5px;color:var(--muted);margin-top:2px}
  .co-pie{margin-top:16px}

/* ─────────────────────── LAS BARRAS DE DESPLAZAMIENTO ─────────────────────

   En Nexvet Labs la página entera baja de una, así que su barra queda pegada
   al borde de la ventana y nadie la mira. Acá NO: en el computador la lista y
   la ficha bajan cada una por su cuenta —esa es la gracia de las dos
   columnas—, así que la barra de la lista cae **en medio de la pantalla**. Con
   el estilo que trae macOS por omisión eso es una franja gris de 15 px
   partiendo la aplicación al medio, y se ve más que el contenido.

   Se dejan finas y del color de las líneas del resto. Dos formas de decirlo
   porque no hay una sola que sirva en todos:
     · `scrollbar-width` / `scrollbar-color` es lo estándar (Firefox, y Chrome
       desde la 121).
     · `::-webkit-scrollbar` es lo que entiende Safari, que todavía no
       implementa lo otro.

   ⚠️ NO se esconden. Una barra invisible en una lista larga deja a la persona
   sin saber que hay más abajo, y acá abajo hay pacientes. */
  #home *{scrollbar-width:thin;scrollbar-color:rgba(120,145,160,.42) transparent}
  #home *::-webkit-scrollbar{width:9px;height:9px}
  #home *::-webkit-scrollbar-track{background:transparent}
  #home *::-webkit-scrollbar-thumb{
    background:rgba(120,145,160,.42);border-radius:99px;
    /* El borde transparente hace de aire: sin él la barra queda pegada al
       borde de la columna y se lee como una línea divisoria más. */
    border:2px solid transparent;background-clip:content-box;
  }
  #home *::-webkit-scrollbar-thumb:hover{background:rgba(96,122,138,.62);
    border:2px solid transparent;background-clip:content-box}
  #home *::-webkit-scrollbar-corner{background:transparent}

/* ═══════════════════════ AGENDAR: LAS HORAS ══════════════════════════════

   Las horas van como fichas y no como una lista con puntitos: se elige una
   mirando el bloque entero, no leyendo renglón por renglón. `auto-fill` con un
   mínimo de 78 px las reparte solas, así que en el teléfono caben tres o
   cuatro por fila y en el computador ocho. */
  .horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    gap:8px;margin:2px 0 4px}
  .hora{
    font:600 17px/1 var(--code);letter-spacing:.01em;
    padding:13px 6px;border-radius:var(--r2);
    border:1px solid var(--line);background:var(--card);color:var(--ink);
    text-align:center;
  }
  .hora:hover{border-color:var(--brand);color:var(--brand)}
  /* La elegida se marca con relleno y no solo con el borde: el borde de color
     se pierde en una grilla de veinte fichas. */
  .hora.puesta{background:var(--brand);border-color:var(--brand);color:#fff}
  /* Lo que YA está tomado no es un botón: no se aprieta y se ve apagado. Se
     muestra igual —ver que a las 09:00 está MOTA es lo que deja decidir si
     vale la pena meter algo a las 09:45 al otro lado de la ciudad. */
  .horas.ocup{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .hora.tomada{
    display:flex;flex-direction:column;gap:3px;align-items:center;
    background:var(--fondo-hondo,#EEF3F6);border-style:dashed;color:var(--muted);
    cursor:default;font-size:15px;
  }
  .hora.tomada em{font:500 12.5px/1.2 var(--sans);font-style:normal;color:var(--faint);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* El formulario del paciente nuevo, en columnas: en el computador son nueve
     campos y apilados obligan a desplazar toda la pantalla para llenarlos. */
  .nueva-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:10px 14px;margin-bottom:4px}
  .ncampo{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
  .ncampo > span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--faint);font-weight:600}
  .ncampo input,.ncampo select{
    font-family:inherit;font-size:15px;padding:11px 12px;
    border:1px solid var(--line);border-radius:var(--r2);
    background:var(--card);color:var(--ink);width:100%;
  }
  .ncampo input:focus,.ncampo select:focus{
    outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brandl)}
  .fecha-elegir input{max-width:220px}
  .agendar-arriba{margin-bottom:12px}

  /* Los dos caminos, como dos tarjetas grandes y no como un selector: son dos
     cosas distintas —uno que ya está anotado y uno que es la primera vez— y
     nadie tiene que adivinar cuál le toca. */
  .quien-elige{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:10px;margin:2px 0 12px}
  .quien-op{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding:14px 15px;border-radius:var(--r2);
    border:1px solid var(--line);background:var(--card);color:var(--ink);
    text-align:left;
  }
  .quien-op svg{color:var(--brand);margin-bottom:4px}
  .quien-op b{font-size:16px;font-weight:650;letter-spacing:-.01em}
  .quien-op span{font-size:13.5px;color:var(--muted)}
  .quien-op:hover{border-color:var(--brand);background:var(--brandl)}
  /* El elegido con relleno y no solo con borde: el borde de color se pierde
     al lado de otra tarjeta del mismo tamaño. */
  .quien-op.puesta{background:var(--brand);border-color:var(--brand);color:#fff}
  .quien-op.puesta svg{color:#fff}
  .quien-op.puesta span{color:rgba(255,255,255,.82)}

  /* La lista para elegir un paciente ya registrado. */
  .pac-lista{display:grid;gap:6px;margin:2px 0 10px;max-height:340px;overflow-y:auto}
  .pac-op{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
    padding:11px 13px;border-radius:var(--r2);
    border:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left;
  }
  .pac-op b{font-size:15.5px;font-weight:650}
  .pac-op > span:last-child{grid-column:1;font-size:13.5px;color:var(--muted)}
  /* La ficha en letra de máquina y a la derecha: es un número y se busca en
     columna, no leyendo. */
  .pac-ficha{grid-row:1;grid-column:2;font:500 15px/1.4 var(--code);color:var(--faint)}
  .pac-op:hover{border-color:var(--brand);background:var(--brandl)}
  /* El campo apagado —la ficha que asigna el sistema— se ve apagado, para que
     nadie intente escribir ahí. */
  .ncampo input[disabled]{
    background:var(--fondo-hondo,#EEF3F6);color:var(--muted);
    font-family:var(--code);cursor:not-allowed;
  }
  /* "Cómo llegar" va ancho y solo en su fila: es el que se aprieta con el auto
     partiendo, y ahí el blanco grande importa más que el orden alfabético. */
  .boton.llegar{width:100%;margin-bottom:8px}
  /* Una línea de ayuda debajo de un botón o un campo. Chica y apagada:
     explica sin competir con lo que explica. */
  .pista{margin:6px 0 2px;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ═══════════════════════ TUS HORARIOS ════════════════════════════════════ */
  .dia-horario{
    border:1px solid var(--line);border-radius:var(--r2);
    padding:10px 12px;margin-bottom:8px;background:var(--card);
  }
  /* El día apagado se ve apagado. Sin esto, un sábado sin tramos y un lunes
     con tramos se veían igual de "activos" hasta leerlos. */
  .dia-horario:not(.activo){background:transparent;border-style:dashed}
  .dia-horario:not(.activo) b{color:var(--faint)}
  .dia-sw{display:flex;align-items:center;gap:10px;font-size:15.5px;cursor:pointer}
  .dia-sw input{width:18px;height:18px;accent-color:var(--brand);flex:none}
  .tramos{display:grid;gap:8px;margin:10px 0 2px;padding-left:28px}
  .tramo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .tramo > span{font-size:13px;color:var(--muted);min-width:58px}
  .tramo em{font-style:normal;font-size:13px;color:var(--faint)}
  .tramo input{
    font-family:var(--code);font-size:15px;padding:8px 10px;
    border:1px solid var(--line);border-radius:var(--r1);background:var(--card);
    color:var(--ink);
  }

/* --------------------------------------------------------------- el cuerpo */

  /* ══ EL AIRE ═══════════════════════════════════════════════════════════
     Los números de acá son los que hacen que la aplicación se vea despejada o
     apretada, y se subieron a mano mirando la pantalla:

       el hueco entre bloques   12 → 14 px
       el margen del lienzo     16 → 18 px de lado, 22 → 30 abajo
       antes de cada sección    26 → 34 px (14 del rótulo + el hueco)
       el relleno de una ficha  13/14 → 15/16 px

     ⚠️ Es un equilibrio, no «más es mejor». Cada píxel de aire es un píxel de
     desplazamiento: si las fichas crecen mucho, en una pantalla de teléfono
     dejan de caber dos visitas de una vez y hay que desplazarse para ver la
     siguiente, que es peor que estar un poco apretado. Se probó mirando la
     lista del día con seis visitas. */
  .lienzo{
    flex:1;overflow-y:auto;padding:18px 18px 30px;
    display:flex;flex-direction:column;gap:14px;
  }

  /* EL AIRE, TRAÍDO DE NEXVET LABS. Antes esto era `margin-top:4px`, que con
     los 12 px de separación del lienzo dejaba 16 px entre el final de una
     sección y el título de la siguiente: todo se leía como un solo bloque
     corrido y había que buscar dónde empezaba cada cosa.

     En Labs el mismo rótulo (`h2.sec`) lleva 28 px arriba y 10 abajo, y esa
     diferencia es la mitad de por qué Labs se ve más limpio con más cosas en
     pantalla. Acá 14 + los 12 del lienzo dan 26: lo mismo, contando el hueco
     que ya pone la columna. */
  /* ⚠️ 26 px arriba, y no 20.

     `.lienzo` separa TODOS sus hijos con los mismos 14 px, así que sin esto un
     título de sección quedaba a la misma distancia de lo suyo que de lo
     anterior — y la pantalla entera se leía como una lista corrida donde había
     que buscar dónde empezaba cada cosa. La regla es la misma de todo el
     proyecto: **más espacio ENTRE grupos que DENTRO de un grupo.** */
  .rotulo{
    font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);font-weight:650;margin-top:26px;
  }
  .rotulo:first-child{margin-top:0}

  /* La fila de acciones que sigue al encabezado respira un poco más: cierra el
     bloque de «quién es» y abre el de «qué hago». */
  .par-fichas + .acciones,
  .fila-alertas + .acciones{margin-top:4px}

/* ------------------------------------------------------------- las visitas */

  /* ⚠️ La tarjeta es un DIV, no un botón: adentro van dos botones —el que
     abre la visita y el del paso siguiente— y un botón dentro de otro botón
     no es HTML válido. El relleno se lo pone el botón de adentro, para que
     toda la zona de texto sea tocable y no quede un borde muerto. */
  .visita{
    display:block;width:100%;overflow:hidden;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    box-shadow:var(--som);
  }
  .visita .v-abrir{
    display:block;width:100%;text-align:left;padding:15px 16px;
    background:none;border:0;color:inherit;font:inherit;
  }
  .visita+.visita{margin-top:0}
  .visita.ahora{border-color:var(--brand);box-shadow:0 0 0 3px var(--brandl)}
  .visita.hecha{opacity:.6}

  /* Atrasada: el rojo lo pone el reloj, no una persona. Es un borde y una
     barra a la izquierda, no un fondo rojo entero: la tarjeta se sigue
     leyendo igual de bien y el rojo no le grita a nadie en la calle. */
  .visita.tarde{border-color:var(--alert);box-shadow:inset 4px 0 0 var(--alert)}

  /* ⚠️⚠️ SE RESALTA AL PASAR POR ENCIMA, y es lo que Nexvet Labs ya hacía en
     sus tres columnas (`.pasemini:hover`). Pedido de Seba el 15 de septiembre
     de 2026: «ir resaltando mientras uno se mueve por las columnas».

     El motivo no es el adorno: en el computador el tablero de «Hoy» son cuatro
     columnas de tarjetas del mismo tamaño y el mismo color, y sin nada que
     responda al mouse **no hay forma de saber cuál se va a abrir** hasta
     apretarla. Con cuatro columnas iguales, eso es apretar la de al lado.

     ⚠️ SOLO DONDE HAY MOUSE (`hover: hover`). En el teléfono el `:hover` se
     queda PEGADO después de tocar —el dedo no se «va» de un elemento— así que
     la última tarjeta tocada quedaría resaltada como si estuviera elegida. Es
     la misma razón por la que los 44 px se declaran con `pointer: coarse`.

     ⚠️ Y NO PISA A `.ahora`: la visita que se está atendiendo lleva anillo y
     borde de la marca, y eso significa algo. El hover es más suave a propósito
     — dice «esto se puede apretar», no «esto es lo que estás haciendo». */
  @media (hover: hover) and (pointer: fine){
    .visita{transition:border-color .12s ease, box-shadow .12s ease}
    .visita:hover{border-color:var(--brand);
      box-shadow:0 1px 2px rgba(16,32,44,.07), 0 4px 14px -8px rgba(16,32,44,.35)}
    .visita.ahora:hover{border-color:var(--brand)}
  }
  .visita.tarde .hora{color:var(--alert);font-weight:700}

  /* ══ LAS TRES ACCIONES DE LA TARJETA ═══════════════════════════════════

     El paso siguiente, llamar al tutor y cómo llegar. Van abajo del todo,
     separadas por una línea del texto de arriba.

     ⚠️ SOLO EL PASO VA RELLENO. Los otros dos se usan una vez por visita y el
     paso se usa siempre; si los tres pesaran igual habría que leer los tres
     cada vez. Y siguen siendo chicos: esto era una franja del ancho de la
     tarjeta y en la columna del día «Cobrar» se repetía tres veces, del mismo
     porte que el nombre del paciente. El nombre es lo que uno busca.

     ⚠️ 44 px de alto, que es lo que pide el manual: se aprietan con el pulgar,
     de pie, con una mano y con un perro al lado. */
  .v-acciones{
    display:flex;flex-wrap:wrap;gap:7px;
    padding:10px 12px 12px;border-top:1px solid var(--line2);
  }
  .v-accion{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    min-height:44px;padding:9px 13px;border-radius:999px;
    border:1.5px solid var(--line);background:var(--card);color:var(--ink2);
    font:inherit;font-size:15px;font-weight:650;text-decoration:none;
  }
  .v-accion:hover{border-color:var(--brand);color:var(--brand)}
  .v-accion .ic{width:16px;height:16px;flex:none}
  .v-accion:disabled{opacity:.5}
  /* ⚠️ SACAR LA VISITA VA EN GRIS Y SE PONE ROJO AL ACERCARSE, no al revés.
     Está en cada tarjeta del día, al lado de «Cómo llegar» y «Llamar», que se
     aprietan todo el rato; un ícono rojo permanente ahí llamaría la atención
     más que el paso siguiente, que es lo que de verdad hay que mirar. El rojo
     aparece cuando el dedo o el cursor ya está encima, que es cuando importa
     decir «ojo, esto borra». */
  .v-accion.sacar{color:var(--muted);margin-left:auto}
  .v-accion.sacar:hover{border-color:var(--mal);color:var(--mal)}
  .v-accion.paso{background:var(--brandl);border-color:var(--brandl);color:var(--brandd)}
  .v-accion.paso:hover{filter:brightness(.97);color:var(--brandd)}
  /* ⚠️ EL PASO SIGUIENTE ES DEL COLOR DE LA MARCA TAMBIÉN EN UNA VISITA
     ATRASADA, desde el 26 de septiembre de 2026. Iba en ámbar, y de noche el
     ámbar sobre la tarjeta se leía como un botón rojo: «Iniciar atención»
     parecía una acción peligrosa justo en la visita que más apura. Que está
     atrasada ya lo dicen el canto de la tarjeta y el sello «Atrasada»; el
     botón dice qué hacer, y eso no cambia con el reloj. */

/* ══ LA LÍNEA DEL DÍA, en el teléfono ═════════════════════════════════════

   El reloj es el esqueleto: la hora a la izquierda, las visitas colgando de
   un riel, y entre la última que pasó y la que viene, dónde está el reloj
   AHORA. Contesta «cuánto me queda» sin leer una palabra.

   ⚠️ Se llama `ld-` y no `hito-`: `.hito` ya existe en esta hoja y es otra
   cosa. Dos cosas distintas no pueden llamarse igual — es la misma regla del
   JavaScript, y en Core ya pasó una vez con `marca`. */
  .ld{display:flex;flex-direction:column}
  .ld-hito{display:flex;align-items:stretch}
  .ld-hora{
    width:46px;flex:none;text-align:right;padding-top:15px;
    font-size:15px;font-weight:700;color:var(--muted);letter-spacing:-.01em;
  }
  .ld-riel{width:30px;flex:none;display:flex;justify-content:center;position:relative}
  .ld-cuerda{position:absolute;top:0;bottom:0;width:2px;background:var(--line)}
  .ld-punto{
    width:13px;height:13px;border-radius:50%;flex:none;z-index:1;margin-top:18px;
    background:var(--card);border:2.5px solid var(--line);
  }
  /* Una visita hecha se APAGA, no se pinta de verde: en esta aplicación el
     verde quiere decir «verificado» y no «paso cumplido». */
  .ld-hito.hecho .ld-punto{background:var(--line);border-color:var(--line)}
  .ld-hito.hecho .ld-hora{color:var(--faint)}
  .ld-hito.aqui .ld-punto{
    background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--brandl);
  }
  /* El rojo lo pone el reloj, no una persona. */
  .ld-hito.tarde .ld-punto{background:var(--alert);border-color:var(--alert)}
  .ld-hito.tarde .ld-hora{color:var(--alert)}
  .ld-hito.ultimo .ld-cuerda{bottom:auto;height:25px}
  .ld-cuerpo{flex:1;min-width:0;padding-bottom:12px}

  .ld-ahora{display:flex;align-items:center;gap:9px;padding:2px 0 10px 46px}
  .ld-raya{flex:1;height:2px;background:var(--brand);border-radius:2px}
  .ld-et{
    font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--brand);flex:none;
  }

/* ══ EL TABLERO, en el computador ═════════════════════════════════════════

   Una columna por etapa. Solo se dibuja arriba de 900 px —lo decide el
   JavaScript, no una regla de acá—, así que estas reglas no necesitan estar
   dentro de un `@media`: en el teléfono `.tbl` no existe nunca. */
  /* ⚠️ LAS COLUMNAS MIDEN TODAS LO MISMO, Y NO CAMBIAN DE ANCHO NUNCA.

     Hasta el 11 de septiembre de 2026 esto era flex y la columna vacía se
     encogía a 132 px, para no gastar un trozo de pantalla diciendo «Nada acá»
     dos veces. El ahorro era cierto y el costo era peor: **el ancho de cada
     columna dependía de cuántas estuvieran vacías**, así que avanzar UNA
     visita de etapa reordenaba todas las columnas y movía de sitio todas las
     tarjetas de la pantalla. Seba lo pidió fijo mirándolo.

     Es la misma regla que ya está escrita dos veces en el proyecto: la
     columna de la pastilla del padrón va en 92 px fijos porque en `auto` cada
     fila la medía distinto, y un botón que no se puede apretar va igual,
     apagado, para que el borde de la lista no baile.

     Rejilla y no flex justamente porque una rejilla de pistas iguales NO
     deja que una mida distinto de las otras: acá eso es lo que se quiere.
     La columna vacía sigue ahí con su título y su cero —el hueco es
     información: «no tienes nada atendiendo ahora mismo»— y ahora, además,
     siempre en el mismo sitio. */
  /* ⚠️ CUATRO, NO CINCO, desde el 12 de septiembre de 2026: «Por salir» y
     «En camino» se juntaron en «Quedan» (ver ETAPAS en pagina.js). Los dos
     tableros del producto —el del día y el de los exámenes— tienen ahora
     cuatro columnas, así que ésta es la medida base y no hace falta una clase
     aparte para el segundo. */
  .tbl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;align-items:start}
  .tbl-col{display:flex;flex-direction:column;gap:9px;min-width:0}
  .tbl-cab{display:flex;align-items:center;gap:8px;padding:0 2px 2px}
  .tbl-t{
    font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);
  }
  .tbl-n{
    min-width:20px;height:20px;padding:0 6px;border-radius:999px;
    background:var(--line2);color:var(--muted);font-size:12.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .tbl-col.urge .tbl-t{color:var(--alert)}
  .tbl-col.urge .tbl-n{background:var(--alertl);color:var(--alert)}
  /* ⚠️ La columna vacía NO se esconde, al revés que los grupos de la lista del
     teléfono. En un tablero el hueco ES información —«no tienes nada
     atendiendo ahora mismo»— y una columna que aparece y desaparece obliga a
     buscar las otras cada vez. */
  .tbl-vacia{
    border:1px dashed var(--line);border-radius:var(--r2);padding:14px 10px;
    text-align:center;font-size:13.5px;color:var(--faint);font-weight:600;
  }
  /* ⚠️ EN EL TABLERO, LLAMAR Y CÓMO LLEGAR SE QUEDAN SOLO CON EL DIBUJO.
     Con el texto puesto, tres botones en una columna angosta se apilan en
     tres líneas y la tarjeta queda del doble de alta que lo que dice — en
     cuatro columnas eso es media pantalla de botones. El paso siguiente sí
     conserva su texto: es el que se aprieta siempre.
     Los dos llevan `title` y `aria-label` con la frase entera (ver
     `accionesVisita` en pagina.js), así que no hay nada que adivinar. */
  .tbl .v-acciones{padding:9px 10px 10px;gap:6px}
  .tbl .v-accion{min-height:38px;padding:7px 10px;font-size:13.5px}
  .tbl .v-accion:not(.paso){padding:7px 9px}
  .tbl .v-accion:not(.paso) .v-txt{display:none}
  /* ⚠️ EL PASO SE LLEVA LA LÍNEA ENTERA Y LOS DOS DIBUJOS VAN ABAJO.
     Dejándolos correr, el paso más un dibujo llenaban la línea y el segundo
     dibujo bajaba solo: cada tarjeta se partía en un sitio distinto según el
     largo de su paso, y un tablero con los botones descuadrados se ve como un
     error. Así son siempre dos líneas, y siempre las mismas. */
  .tbl .v-accion.paso{flex:1 1 auto;justify-content:center;margin-left:auto;background:var(--card);border-color:var(--brand);color:var(--brandd)}
  .tbl .v-accion.paso:hover{background:var(--brandl)}

  /* ⚠️ EN LA LÍNEA DEL DÍA LA HORA NO SE REPITE. El riel de la izquierda ya
     la dice, y decirla otra vez adentro de la tarjeta gasta un renglón entero
     de las cinco que caben en un teléfono. En el tablero SÍ va: allá no hay
     riel y la hora es lo único que ordena la columna. */
  .ld .visita .hora{display:none}
  .ld .visita .arriba-visita{justify-content:flex-end}
  /* Sin hora ni sello arriba, la fila queda vacía y sobra su alto. */
  .ld .visita .arriba-visita:empty{display:none}

  /* La tarjeta del examen dentro del tablero: mismas medidas apretadas que
     tiene en la lista del computador. */
  .tbl .examen{margin:0}

/* ══ DE QUIÉN ES ESTE INFORME ═════════════════════════════════════════════

   El sello grande de la pantalla del resultado. Es lo único de Nexvet que no
   tiene ninguno de los trece programas del rubro que se miraron, así que se
   ve como lo que es: la respuesta de la pantalla, no una nota al pie.

   ⚠️ El verde acá significa lo mismo que en toda la aplicación —verificado—
   y se lo gana: lo puso `identidad_confirmada()` leyendo el PDF, no una
   persona apurada. */
  .si-sello{
    background:var(--okl);border:1px solid var(--okl);border-radius:var(--r3);
    padding:20px 18px;display:flex;flex-direction:column;align-items:center;
    gap:11px;text-align:center;
  }
  .si-sello.ojo{background:var(--warnl);border-color:var(--warnb)}
  .si-sello.no{background:var(--alertl);border-color:var(--alertl)}
  .si-circulo{
    width:58px;height:58px;border-radius:50%;flex:none;
    background:var(--card);color:var(--ok);
    display:flex;align-items:center;justify-content:center;
  }
  .si-circulo .ic{width:30px;height:30px;stroke-width:2.2}
  .si-sello.ojo .si-circulo{color:var(--warn)}
  .si-sello.no .si-circulo{color:var(--alert)}
  .si-tit{
    font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--ok);
  }
  .si-sello.ojo .si-tit{color:var(--warn)}
  .si-sello.no .si-tit{color:var(--alert)}
  .si-txt{font-size:15px;line-height:1.45;color:var(--ok);max-width:46ch}
  .si-sello.ojo .si-txt{color:var(--warn)}
  .si-sello.no .si-txt{color:var(--alert)}

  /* Las pruebas: qué encontró y dónde. Un «listo» sin pruebas se cree la
     primera vez y se deja de leer la tercera. */
  .si-pruebas{
    width:100%;background:var(--card);border:1px solid var(--okl);
    border-radius:var(--r2);overflow:hidden;text-align:left;
  }
  .si-sello.ojo .si-pruebas{border-color:var(--warnb)}
  .si-sello.no .si-pruebas{border-color:var(--alertl)}
  .si-f{
    display:flex;justify-content:space-between;gap:12px;align-items:center;
    padding:10px 13px;border-bottom:1px solid var(--line2);font-size:15px;
  }
  .si-f:last-child{border-bottom:0}
  .si-e{color:var(--muted);font-size:15px;min-width:0}
  .si-e b{color:var(--ink);font-weight:700}
  .si-v{
    display:flex;align-items:center;gap:6px;font-weight:700;color:var(--ok);
    min-width:0;text-align:right;
  }
  .si-v .ic{width:16px;height:16px}
  .si-v.mal{color:var(--alert)}

/* ------------------------------------------- la cinta de etapas de «Hoy» */

  /* El tablero entero en una línea: cuántas hay en cada etapa. Se desliza de
     lado si no cabe, y NUNCA hace que la página se corra en horizontal. */
  .cinta{
    display:flex;gap:8px;overflow-x:auto;
    margin:0 0 14px;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .cinta::-webkit-scrollbar{display:none}
  .ci{
    flex:1 0 auto;min-width:74px;text-align:center;text-decoration:none;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:9px 10px;color:var(--ink);
  }
  .ci b{display:block;font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
  .ci span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
  /* Una etapa en cero se muestra igual, apagada: que «Por cobrar» diga 0 es
     información, no un hueco que haya que esconder. */
  .ci.nula{opacity:.45}
  .ci.tarde{border-color:var(--alert);background:var(--alertl)}
  .ci.tarde b,.ci.tarde span{color:var(--alert)}

  /* ⚠️ Con TRES cajas ya caben, así que no se desplaza de lado nunca más: cada
     una toma su tercio. Antes eran cinco, la quinta salía cortada y aparecía
     una barra para correr — y un tablero que hay que desplazar deja de ser un
     vistazo. */
  .cinta > .ci{flex:1 1 0;min-width:0}
  .cinta{overflow:visible}

  /* Lo ya cobrado, en una línea de texto. Es información, no algo sobre lo que
     se pueda actuar, así que no merece una caja igual a las otras tres. */
  .cinta-pie{
    display:flex;align-items:center;gap:6px;
    margin:-6px 0 14px;font-size:13.5px;color:var(--ok);
  }
  .cinta-pie .ic{color:var(--ok)}

  /* Acá vivían `.et-titulo` y `.et-n`, los títulos de los grupos de «Hoy».
     Se fueron el 10 de septiembre de 2026: la pantalla dejó de agrupar por
     etapa. En el teléfono ahora es una línea de tiempo ordenada por hora
     (`.ld`) y en el computador un tablero de columnas (`.tbl`), y ninguno de
     los dos usa un título de grupo. */
  .visita .arriba,.visita .arriba-visita{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
  }
  .visita .hora{font-size:15.5px;font-weight:650;display:flex;align-items:center;gap:5px}
  .visita .hora .ic{color:var(--muted)}
  .visita .paciente{font-size:17.5px;font-weight:700;letter-spacing:-.015em;margin-top:5px}
  .visita .motivo{font-size:15px;color:var(--ink2);margin-top:1px}
  .visita .donde{
    font-size:15px;color:var(--muted);margin-top:6px;
    display:flex;align-items:flex-start;gap:6px;
  }
  .visita .donde .ic{margin-top:1px}


/* ---------------------------------------------------------- las insignias */

  .sello{
    display:inline-block;font-size:12.5px;font-weight:650;letter-spacing:.02em;
    padding:3px 8px;border-radius:var(--r1);white-space:nowrap;
  }
  .s-ok{background:var(--okl);color:var(--ok)}
  .s-espera{background:var(--warnl);color:var(--warn)}
  .s-urge{background:var(--alertl);color:var(--alert)}
  .s-marca{background:var(--brandl);color:var(--brandd)}

/* ----------------------------------------------------------- los mensajes */

  .nota{
    border-radius:var(--r2);padding:14px 16px;font-size:15px;line-height:1.5;
    display:flex;flex-direction:column;gap:4px;
  }
  .nota b{font-weight:650;font-size:15px}
  .n-ok{background:var(--okl);color:var(--ok)}
  .n-espera{background:var(--warnl);color:var(--warn)}
  .n-urge{background:var(--alertl);color:var(--alert)}
  .n-marca{background:var(--brandl);color:var(--brandd)}
  .nota .boton{margin-top:6px}
/* Los botones de un aviso, en una fila y de su tamaño (28-09-2026): «Volver a
   armar la ficha» a lo ancho del aviso pesaba más que el aviso mismo. */
  .nota .nota-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px}
  #home .nota .nota-acc .boton{width:auto;margin-top:0}

/* ------------------------------------------------------------- los botones */

  /* OJO CON EL `#home` DE ESTAS TRES REGLAS, Y NO SE PUEDE QUITAR.

     Más arriba está `#home button{ ... color:inherit }`, que existe para que
     los botones no salgan con el gris del navegador. Esa regla lleva un ID y
     por eso le gana a cualquier regla que sea solo de clase: `.boton{color:#FFF}`
     perdía, y TODOS los botones azules de la aplicación salían con el texto en
     tinta oscura —contraste 2,6 sobre el azul, cuando el mínimo de la marca es
     4,5—. Un `<a class="boton">` salía bien y un `<button class="boton">` mal,
     que es de las cosas más difíciles de ver mirando la pantalla.

     Con el `#home` delante empatan en el ID y gana la que tiene una clase más,
     que es esta. Si alguna vez se quita `#home button{color:inherit}`, estos
     tres `#home` sobran; mientras esté, son obligatorios. */
  /* ⚠️ FLEX Y NO `block`. Era `display:block; text-align:center`, y el dibujo
     y la palabra se centraban como texto: en un botón angosto quedaban juntos
     y se veía bien, pero en uno ancho —"Cómo llegar", que ocupa la fila
     entera— el dibujo se quedaba a un lado y el texto al medio, separados por
     media pantalla. En fila van pegados siempre, mida lo que mida el botón.

     ⚠️ Y va con `#home` delante a propósito: `#home button{color:inherit}`
     lleva un ID, así que una regla de pura clase pierde. Ver el comentario de
     arriba: por eso `a.boton{display:flex}` de más abajo no alcanzaba. */
  /* ⚠️ EL BOTÓN PRINCIPAL VA CON DEGRADADO, y es el mismo gesto que hace la
     portada (`landing/estilo.css`, `--degradado`): allá el botón de «Ver
     soluciones» va del claro al hondo. Que la página que vende el producto y
     el producto se muevan igual no es un capricho — es la única forma de que
     alguien que entra desde `nexvet.cl` sienta que llegó a la misma casa.

     ⚠️ VA DEL `--brand` AL `--brandd`, o sea del color de la paleta al mismo
     color más hondo, y no a un color distinto: así funciona en las CUATRO
     paletas sin escribir cuatro degradados. Medido, blanco encima en los dos
     extremos de cada una: azul 6,03 → 10,85 · rosa 6,30 → 8,57 · ciruela
     7,52 → 9,95 · índigo 7,77 → 10,12. El mínimo del manual es 4,5.

     ⚠️ Y VA SOLO ACÁ. `.suave` y `.gris` lo pisan con su propio fondo, que es
     lo que corresponde: un degradado en todos los botones de la pantalla deja
     de ser un acento y pasa a ser el fondo. En esta aplicación hay un solo
     botón principal a la vez, así que el degradado aparece una vez. */
  #home .boton{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;min-height:48px;padding:12px 16px;
    border-radius:var(--r2);border:1.5px solid var(--brand);
    background:linear-gradient(100deg,var(--brand) 0%,var(--brandd) 100%);
    color:#FFF;font-weight:650;font-size:16px;
    letter-spacing:-.01em;text-align:center;
  }
  /* El dibujo no se encoge cuando el texto es largo. */
  #home .boton > svg{flex:none}
  /* ⚠️ FONDO BLANCO, NO TRANSPARENTE. Era transparente, así que sobre el gris
     de la página el relleno del botón era el fondo mismo y no se leía como
     algo que se puede apretar: parecía un texto con un marco alrededor. Con la
     tarjeta blanca detrás se despega, y queda igual que todo lo demás que se
     toca en esta aplicación —las tarjetas, las filas, los chips—, que también
     son blancas sobre el gris. */
  #home .boton.suave{background:var(--card);color:var(--brand)}
  #home .boton.suave:hover{background:var(--brandl)}
  /* Sobre una tarjeta blanca no sirve el blanco: ahí sí va transparente, o
     serían dos blancos pegados sin borde visible entre medio. */
  #home .tarjeta-tutor .boton.suave,
  #home .tarjeta-id .boton.suave,
  #home .cabecera-paciente .boton.suave{background:transparent}
  /* Igual que `.suave`: fondo de tarjeta y no transparente, para que sobre el
     gris de la página se lea como algo que se aprieta. */
  /* ⚠️ UN BOTÓN QUE NO SE PUEDE APRETAR VA IGUAL, APAGADO, Y CON EL GLOBITO
     DICIENDO POR QUÉ. Es la regla del proyecto, la misma de «Descargar todo»
     en Radiología: un botón que aparece y desaparece según la fila deja el
     borde de la lista bailando, y el que falta no explica nada. Apagado, sí:
     un sobre en gris con «No tiene correo anotado» es lo que hace que alguien
     se acuerde de pedírselo.

     Va como `<span>` y no como `<button>` deshabilitado a propósito: así el
     clic no llega a `hacer()` ni por casualidad, y el lector de pantalla lo
     anuncia por su `aria-disabled` sin ofrecerlo como algo que se aprieta.
     El borde punteado es el mismo que ya usan `.bloque-lab.apagado` y
     `.fila-cat.apagado` — «apagado» significa lo mismo en los tres. */
  #home .boton.apagado{
    background:var(--card);color:var(--muted);border-color:var(--line);
    border-style:dashed;cursor:default}
  #home .boton.apagado:hover{background:var(--card);border-color:var(--line)}
  #home .boton.gris{background:var(--card);color:var(--ink2);border-color:var(--line)}
  #home .boton.gris:hover{border-color:var(--ink2)}
  #home .tarjeta-tutor .boton.gris,
  #home .tarjeta-id .boton.gris,
  #home .cabecera-paciente .boton.gris{background:transparent}
  .boton.chico{min-height:40px;padding:9px 12px;font-size:15px}
  .boton[disabled]{opacity:.45}
  .botones{display:flex;flex-direction:column;gap:9px}
  .botones.par{flex-direction:row}
  .botones.par>*{flex:1}

/* --------------------------------------------------------- la lista de datos */

  .datos{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    overflow:hidden;
  }
  .datos .fila{
    display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    padding:14px 14px;border-bottom:1px solid var(--line2);font-size:15px;
  }
  .datos .fila:last-child{border-bottom:0}
  .datos .et{color:var(--muted);font-size:15px;flex:none}
  /* ⚠️ `tabular-nums` en vez de cambiar de tipografía.
     Un teléfono y un RUT se leen mejor con los dígitos del mismo ancho, que es
     lo que de verdad hacía falta. Antes eso se conseguía poniéndolos en letra
     de máquina de escribir (`--code`), y en una lista de cinco filas dos en
     otra tipografía se leen como un error, no como una intención. Ahora la
     letra es la misma y solo los dígitos se alinean. */
  .datos .va{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
  .datos .va.literal{font-family:var(--code);font-size:15px;font-weight:500}

/* -------------------------------------------------------------- los campos */

  .campo{display:flex;flex-direction:column;gap:5px}
  .campo label{
    font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);font-weight:650;
  }
  .campo input,.campo textarea,.campo select{
    font-family:inherit;font-size:16px;color:var(--ink);background:var(--card);
    border:1px solid var(--line);border-radius:var(--r2);padding:11px 12px;
    width:100%;resize:vertical;
  }
  /* 16px en los campos no es capricho: con menos, el teléfono hace zoom solo
     al tocarlos y la pantalla queda descuadrada. */
  .campo input:focus,.campo textarea:focus,.campo select:focus{
    outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand);
  }
  .par-campos{display:flex;gap:10px}
  .par-campos>*{flex:1}

  /* ── Una fecha, con el calendario del teléfono ────────────────────────────
     `input[type=date]` hereda casi todo de la regla de arriba; lo que sigue es
     lo que ese control trae puesto de fábrica y hay que apagar.

     ⚠️ `-webkit-appearance:none` NO VA, y es lo primero que uno escribiría:
     en Safari de iOS eso deja el control sin el selector de rueda, o sea sin
     la razón por la que se puso. Lo único que se apaga es el fondo.

     ⚠️ `min-height` Y NO `height`: en iOS el control mide lo que mide su
     texto, así que sin esto queda más bajo que las cajas de al lado y la
     columna de campos se ve despareja. Y son los 44 px de todo lo que se
     aprieta.

     ⚠️ EL FORMATO EN QUE SE VE LO PONE EL SISTEMA, no esta hoja y no el
     código: con el teléfono en Chile se lee dd-mm-aaaa, que es lo que se
     quería. No hay forma de forzarlo desde acá — y el valor que viaja sigue
     siendo `aaaa-mm-dd` en todos los casos. */
  .campo input.cfecha{
    background:var(--card);
    min-height:44px;
    /* Sin esto el texto queda pegado arriba en iOS, que centra distinto. */
    display:block;
  }
  /* El dibujito del calendario de Chrome sale gris ratón sobre la tarjeta
     blanca. Se le pasa el color de la aplicación, que es el mismo gesto que
     el resto de los íconos. */
  .campo input.cfecha::-webkit-calendar-picker-indicator{
    opacity:.55;cursor:pointer;
  }
  .campo input.cfecha:hover::-webkit-calendar-picker-indicator{opacity:.85}
  /* Una fecha vacía muestra «dd-mm-aaaa» en el color del texto, que se lee
     como si hubiera algo escrito. Va en el gris de los ejemplos. */
  .campo input.cfecha:not(:focus):invalid{color:var(--faint)}
  /* La fecha escrita en palabras, debajo del control. Chica y en gris: es una
     comprobación, no un dato que haya que leer siempre. El motivo entero está
     en `campoFecha()`. */
  .cfecha-clara{
    font-size:13.5px;color:var(--muted);letter-spacing:-.01em;
  }

  /* ── El teléfono: la lista del país y la caja del número ─────────────────
     La lista mide lo que dice y no se estira: lo que tiene que quedarse con
     el ancho que sobre es el número, que es lo que se escribe. El tope del
     44% es para que un «Otro país (con +)» no se coma la caja en un
     teléfono. */
  .fono-caja{display:flex;gap:8px}
  /* ⚠️ ANCHO FIJO, NO `auto`. Un `<select>` mide lo que mide su opción más
     larga, así que el ancho de la lista lo terminaba decidiendo el nombre de
     país más largo de todos —y le robaba la mitad de la caja al número, que es
     lo que la persona escribe. Con 150 px caben los códigos, que es lo que hay
     que leer, y van primero: lo que se recorta es el final del nombre. */
  /* ⚠️ Y CON TOPE EN %, porque el mismo campo vive en DOS anchos: solo en la
     grilla de agendar la columna puede bajar a 230 px, y ahí 150 px fijos le
     dejaban 72 px al número. El tope solo muerde cuando el espacio es poco. */
  .fono-caja select{flex:none;width:150px;max-width:46%;text-overflow:ellipsis}
  .fono-caja input{flex:1;min-width:0}

/* --------------------------------------------------------- el cobro */

  .item{
    display:flex;gap:11px;align-items:flex-start;padding:15px 13px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  }
  .item.elegido{border-color:var(--brand);background:var(--brandl)}
  .item input{margin-top:4px;accent-color:var(--brand);width:19px;height:19px;flex:none}
  /* ⚠️ COLUMNA, NO UN ENVOLTORIO A SECAS. `.cuerpo` es un <span> y sus dos
     hijos —`.nombre` y `.detalle`— también, así que sin esto se quedaban en
     la misma línea: «Consulta a domicilioSin recargo por comuna», pegado y sin
     espacio. El `margin-top:1px` del detalle tampoco hacía nada, porque en un
     elemento en línea el margen de arriba no se aplica.
     Estaba así desde siempre y no lo vio nadie; salió al mirar el cobro en el
     computador. `.opcion .cuerpo` ya lo tenía bien y sirvió de modelo. */
  .item .cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .item .nombre{font-weight:600;font-size:15.5px}
  .item .detalle{font-size:15px;color:var(--muted)}
  .item .precio{font-weight:650;font-size:15.5px;white-space:nowrap}

/* ═══════════════════════ EL PRESUPUESTO ══════════════════════════════════
   Igual que `.item`, pero con un contador en vez de una casilla: un
   presupuesto lleva TRES frascos, no «sí o no». Los botones son de 40 px
   porque esto se toca de pie y con una mano. */
  .item-pres{
    display:flex;gap:11px;align-items:center;padding:13px 12px;margin-bottom:6px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  }
  .item-pres.elegido{border-color:var(--brand);background:var(--brandl)}
  .item-pres .cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .item-pres .nombre{font-weight:600;font-size:15.5px}
  .item-pres .detalle{font-size:13.5px;color:var(--muted)}
  .item-pres .precio{
    font-weight:650;font-size:15px;white-space:nowrap;color:var(--ink2);
    font-variant-numeric:tabular-nums;
  }
  .contador{display:flex;align-items:center;gap:2px;flex:none}
  .contador .paso{
    width:40px;height:40px;flex:none;border-radius:var(--r2);
    border:1px solid var(--line);background:var(--card);color:var(--brandd);
    font-size:19px;line-height:1;font-weight:600;
  }
  .contador .paso:disabled{opacity:.35}
  .contador .cuantos{
    min-width:26px;text-align:center;font-weight:700;font-size:16px;
    font-variant-numeric:tabular-nums;
  }

  .total{
    display:flex;justify-content:space-between;align-items:baseline;
    background:var(--brandl);color:var(--brandd);
    border-radius:var(--r3);padding:15px 16px;
  }
  .total .et{font-size:15px}
  .total .cifra{font-size:22px;font-weight:700;letter-spacing:-.025em}

  /* ⚠️ EL SALDO, PEGADO ARRIBA MIENTRAS SE MARCAN LOS PRECIOS.
     Esto se cobra de pie, en la puerta, con el tutor mirando la pantalla: la
     cifra es lo que las dos personas están mirando. Los márgenes negativos
     son para que tape el relleno del lienzo de borde a borde — si no, al
     desplazarse se ve el contenido pasando por el costado. */
  .total.pegado{
    position:sticky;top:0;z-index:3;
    margin:-18px -18px 0;border-radius:0;
    padding:14px 18px;
    box-shadow:0 6px 14px -12px rgba(16,32,44,.5);
  }

/* ══ EL COBRO EN EL COMPUTADOR: qué se cobra y cómo se paga ═══════════════

   ⚠️ Dos columnas, y no es solo aprovechar el ancho: son dos cosas distintas.
   A la izquierda QUÉ se cobra —que es donde el veterinario marca— y a la
   derecha CÓMO se paga —que es lo que se le muestra al tutor—. Puestas una
   debajo de la otra, dar vuelta la pantalla para que el tutor vea el QR
   significa que él ve también la lista de precios con todo lo que no se le
   cobró. */
  .cob2{
    display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;
    align-items:start;
  }
  .cob-izq,.cob-der{display:flex;flex-direction:column;gap:12px;min-width:0}
  /* Acá el saldo no necesita pegarse: la columna es corta y se ve entera. */
  .cob2 .total.pegado{position:static;margin:0;border-radius:var(--r3);padding:15px 16px;box-shadow:none}

/* ══ ESCRIBIR CON EL PACIENTE AL LADO ═════════════════════════════════════

   ⚠️ Esto rompe a propósito la regla de que las pantallas hondas no se parten
   en dos columnas. La regla es buena y sigue valiendo para todo lo demás:
   partir un formulario largo en dos obliga a leer en zigzag.

   Lo que va a la derecha NO ES MÁS FORMULARIO — ahí no se escribe nada. Es lo
   que hay que MIRAR mientras se escribe: la alergia, lo que se le anotó la vez
   pasada, el peso de entonces. Sin eso hay que salirse de la ficha a buscarlo
   y volver, y lo que uno tenía a medio escribir queda esperando. */
  .conf{
    display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;
    align-items:start;
  }
  .conf-izq,.conf-der{display:flex;flex-direction:column;gap:12px;min-width:0}
  /* La columna de la derecha se despega con una línea, no con una caja: es
     una nota al margen, no otra sección. */
  .conf-der{
    padding-left:24px;border-left:1px solid var(--line);
  }
  .conf-der .rotulo{margin-top:18px}
  .conf-der .rotulo:first-child{margin-top:0}

  /* Lo que se le escribió la vez pasada. Va en gris y en letra chica: está
     para consultarlo de reojo, no para leerlo entero. */
  .pa-antes{
    background:var(--line2);border-radius:var(--r2);padding:10px 12px;
    display:flex;flex-direction:column;gap:3px;
  }
  .pa-cuando{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
  .pa-txt{font-size:15px;color:var(--ink2);line-height:1.45}

/* ══ LOS PAPELES EN EL COMPUTADOR: LA HOJA AL LADO ════════════════════════

   El formulario a la izquierda y la hoja a la derecha, a su tamaño, mientras
   se escribe. En el teléfono siguen uno debajo del otro —no hay ancho— y ahí
   la hoja aparece al final, que es donde se revisa antes de emitir.

   ⚠️ NUNCA SE FIRMA ALGO SIN HABERLO LEÍDO COMO LO VA A LEER EL TUTOR. Esa es
   toda la razón de esta pantalla: el papel que se está armando tiene que estar
   a la vista mientras se arma, no detrás de un botón.

   Las siete pantallas que dibujan una hoja llevan la clase `con-hoja` en el
   lienzo (ver CON_HOJA en pagina.js) y su hoja va envuelta en un
   `#vista-…`. Ese envoltorio es el que se manda a la segunda columna.

   ⚠️ SE LLAMA `con-hoja` Y NO `papel`. `.papel` ya existe y es otra cosa: la
   tarjeta de cada uno de los siete tipos en la lista de papeles. Puesta en el
   `<main>`, aquella le pintaba fondo, borde y sombra al lienzo entero y la
   pantalla salía metida dentro de una tarjeta gigante. Es la misma regla del
   JavaScript: dos cosas distintas no pueden llamarse igual. */
@media (min-width:900px){
  /* ⚠️ SIN HOJA QUE MOSTRAR, EL FORMULARIO NO SE ESTIRA.
     Una receta recién abierta no dibuja hoja, así que no se parte en dos — y
     entonces heredaba los 1280 px del lienzo: campos de mil doscientos píxeles
     de ancho para escribir «12 horas». Un formulario se lee en una columna
     angosta; el ancho es de la hoja, no de los campos. En cuanto aparece la
     hoja, la regla de más abajo devuelve los 1280. */
  /* ⚠️ LLEVA `#home` A PROPÓSITO, y es la única forma de que gane. El tope de
     1280 px lo pone `#home .barra-dentro,#home .lienzo`, que lleva un ID: sin
     el prefijo, `.lienzo.con-hoja` pierde y el formulario se sigue estirando.
     Se descubrió midiendo, no leyendo — la primera versión de esta regla no
     hacía nada. (Es el mismo problema que tenía `#home button`, que el 10 de
     septiembre de 2026 pasó a `:where(#home) button`. Aquella se pudo
     neutralizar porque era un reset; esta pone un tope de verdad, así que se
     le gana con más peso en vez de quitárselo.) */
  /* ⚠️ EL TOPE VA EN EL RELLENO, NO EN `max-width`, Y ESTO ERA EL DEFECTO.
     ═══════════════════════════════════════════════════════════════════════

     Con `max-width:900px` el formulario se ESTRUJABA en los monitores anchos,
     y cuanto más ancho el monitor, peor. Medido en producción, con la Receta:

         la ventana   el relleno de cada lado   lo que quedaba para el campo
           1440 px            28 px                     560 px
           1800              160                        560
           1979              249                        401
           2200              360                        180   ← en vertical

     El motivo es una colisión entre dos reglas escritas en momentos distintos.
     `#home .lienzo` ya no lleva tope: lo topa el relleno,
     `max(28px,calc((100% - 1280px)/2))`, y ahí `100%` es el ancho de LA
     COLUMNA de la rejilla, no el del lienzo. Eso está bien mientras el lienzo
     mida lo mismo que su columna. Pero `.con-hoja` le volvió a poner un
     `max-width:900px` encima: la caja se queda en 900 y el relleno sigue
     creciendo con la pantalla, así que se le come los 900 desde los dos lados.

     Es exactamente el error que el comentario de `#home .lienzo` —cuatro mil
     líneas más abajo— dice que se arregló: «con `max-width` centrado, la barra
     quedaba en medio de la pantalla». Se arregló allá y volvió a nacer acá.

     Ahora el tope lo pone el relleno, con el mismo patrón. Tres cosas de una:
     el formulario deja de estrujarse, el contenido queda CENTRADO —lo pidió
     Seba— y la barra de desplazamiento se va al borde de la página en vez de
     quedar colgando en medio, que es lo que él llamó «la barra que divide». */
  #home .lienzo.con-hoja{
    max-width:none;
    padding-inline:max(28px,calc((100% - 900px) / 2));
  }

  /* ⚠️ Y EL TOPE SE LO LLEVA EL FORMULARIO, NO EL LIENZO.

     Con los 900 del lienzo, un campo suelto medía 844 px: una caja de 844
     para escribir «12 horas», que es exactamente lo que el comentario de
     arriba dice que no puede pasar. El lienzo tiene que seguir midiendo 900
     porque la HOJA —el papel dibujado— se lee mejor ancha; lo que no puede
     estirarse es lo que se escribe.

     560 px deja la pareja de campos en 275 cada uno, que es de sobra para
     una dosis y una frecuencia, y mantiene el rótulo en un solo renglón.

     Va con `:not([id^="vista-"])` para no tocar la hoja, que es el único
     hijo del lienzo que sí quiere todo el ancho.                          */
  /* ⚠️ Y CENTRADO, NO PEGADO A LA IZQUIERDA. La columna mide 900 —para que la
     hoja del papel se lea ancha— y el formulario 560; sin esto quedaban 340 px
     de vacío a la derecha de cada campo y la pantalla se veía corrida hacia un
     lado aunque la columna sí estuviera centrada. Es lo que Seba llamó
     «céntralo». */
  /* ⚠️ VA CON `width:100%`, Y SIN ESO SE ENCOGE A 180 px. `.lienzo` es una
     columna flexible, y en una columna flexible un margen automático al costado
     absorbe todo el espacio libre: el hijo deja de estirarse y se achica a lo
     que mide su contenido. Se vio midiendo —el campo pasó de 560 a 180— y es
     el mismo tipo de trampa que el `max-width` de más arriba. Con `width:100%`
     el hijo pide los 900, el tope lo baja a 560 y recién ahí los márgenes
     automáticos reparten lo que sobra a los dos lados. */
  #home .lienzo.con-hoja > *:not([id^="vista-"]){
    width:100%;max-width:560px;margin-inline:auto;
  }

  /* ⚠️ `:has()` NO ES UN LUJO ACÁ: parte en dos columnas SOLO SI de verdad hay
     una hoja dibujada. Un consentimiento ya firmado, o una receta a la que
     todavía no se le agregó ningún medicamento, no dibujan ninguna: sin esta
     condición la pantalla quedaba partida con media pantalla vacía al lado.

     ⚠️ Y lleva `:not(:empty)`, que hoy la receta ya no necesita: desde el 26
     de septiembre de 2026 `#vista-receta` trae la hoja desde el principio,
     vacía, para que la pantalla abra partida en dos y no salte al escribir
     el primer medicamento. La condición se queda por las otras cajas
     `vista-` que sí pueden venir vacías.

     Y si un navegador viejo no entendiera `:has()`, la regla entera se ignora
     y la pantalla se ve como en el teléfono —el formulario y la hoja uno
     debajo del otro—, que es una forma correcta de verla. */
  .lienzo.con-hoja > [id^="vista-"] > .rotulo:first-child{margin-top:0}
}

@media (min-width:1180px){
  /* ⚠️ ACÁ SE SOLTABA EL TOPE DE 560 CUANDO HABÍA HOJA, Y YA NO.

     La idea era que, partido en dos, el ancho lo pusiera la rejilla. El
     problema es que entonces el mismo campo mide 560 en una pantalla y 748 en
     otra según si hay hoja o no — y el ancho de una caja de escribir no puede
     depender de eso. Ahora son 560 SIEMPRE, en los dos estados y en todos los
     monitores: una sola regla que se puede decir en una frase. Lo que sobra
     entre el formulario y la hoja es la separación entre los dos, y está bien
     que se vea. */

  /* ⚠️ EL CORTE EN DOS COLUMNAS NO VA ACÁ: VA EN 1180 px, Y ESTÁ MEDIDO.

     Esto estuvo adentro del `@media (min-width:900px)` y era el peor defecto
     de la aplicación. La hoja mide 470 px FIJOS y el formulario se queda con
     lo que sobre, así que entre 900 y 1180 px de ventana el formulario se
     aplasta. Medido en un navegador, con la Receta:

         ventana   el formulario   los campos en pareja
           900 px      142 px            66 px
           940         182               86
          1000         242              116
          1060         302              146
          1120         362              176
          1180         422              206   ← recién acá sirve

     A 66 px una caja de escribir no es una caja de escribir: el rótulo
     «POR CUÁNTOS DÍAS» sale en tres renglones, «Agregar y escribir otro»
     sale en vertical y el botón de emitir queda de una letra de ancho. Así
     estaba la Receta en producción, y así la fotografió Seba.

     El número sale de la cuenta: la pareja de campos necesita unos 420 px
     para que cada uno tenga ~200, más 32 de separación y los 470 de la hoja
     son 922 de lienzo; con los 56 de relleno y los 200 del menú, 1178.

     Debajo de eso el formulario y la hoja van UNO DEBAJO DEL OTRO, que es
     como se ven en el teléfono y es una forma correcta de verlos —lo dice el
     comentario de `:has()` cuatro líneas más arriba, para el navegador que no
     lo entienda—. Lo que no es correcto es partir en dos una pantalla donde
     no caben dos.

     ⚠️ Y la regla de arriba, `max-width:900px` sin partir, SÍ se queda en 900:
     esa es la que impide que un formulario suelto se estire a 1280.        */
  #home .lienzo.con-hoja:has(> [id^="vista-"]:not(:empty)){
    /* ⚠️ PARTIDO EN DOS, EL TOPE SON 1.280 Y NO 900. `.con-hoja` topa el
       contenido en 900 con su relleno —un formulario solo se lee angosto— pero
       acá adentro caben DOS cosas: el formulario y la hoja de 470. Con los 900
       puestos, la hoja se llevaba 470 de 900 y al formulario le quedaban 308.
       Medido a 1979 px, que es el monitor de Seba. */
    padding-inline:max(28px,calc((100% - 1280px) / 2));
    display:grid;
    grid-template-columns:minmax(0,1fr) 470px;
    /* ⚠️ LAS FILAS VAN DECLARADAS, y no es un capricho. La hoja ocupa
       `grid-row:1 / -1` para empezar arriba aunque el formulario tenga quince
       campos, y `-1` significa «la última línea de la grilla DECLARADA». Sin
       declararla, `-1` es la línea 1, el rango no resuelve y el navegador
       manda el formulario a filas que no se ven: la primera vez que se probó,
       la columna de la izquierda salió vacía y el catálogo entero desapareció.

       Cuarenta alcanza de sobra —el papel más largo tiene veintitantos
       bloques— y las que sobran miden cero. */
    grid-template-rows:repeat(40, min-content);
    /* ⚠️ Y por eso mismo la separación entre filas va en el margen y no en el
       `row-gap`: con cuarenta filas declaradas, un `row-gap` de 12 px suma
       casi quinientos píxeles de aire entre filas vacías. */
    column-gap:32px;row-gap:0;
    align-items:start;
    /* ⚠️ SIN `max-width`, POR LO MISMO DE ARRIBA. Acá el tope son 1.280 y lo
       pone el relleno que `#home .lienzo` ya tiene puesto. Con `max-width`
       la rejilla quedaba en 1.280 mientras el relleno seguía creciendo: a
       2.200 px de ventana eran 360 de relleno por lado, o sea 560 para una
       rejilla de «lo que sobre + 470», y la columna del formulario caía a
       58 px. El mismo defecto, un estado más allá. */
    max-width:none;
  }
  /* ⚠️ PARTIDO EN DOS NO SE CENTRA: el formulario va PEGADO a la hoja que
     tiene al lado. Centrado dentro de su columna abriría un hueco entre los
     dos, y son dos cosas que se miran juntas —lo que escribo y cómo va
     quedando el papel—. */
  .lienzo.con-hoja:has(> [id^="vista-"]:not(:empty)) > *{grid-column:1;min-width:0;margin-top:14px;margin-inline:0}
  .lienzo.con-hoja:has(> [id^="vista-"]:not(:empty)) > *:first-child{margin-top:0}
  .lienzo.con-hoja:has(> [id^="vista-"]:not(:empty)) > [id^="vista-"]{
    grid-column:2;
    grid-row:1 / -1;
    align-self:start;
    margin-top:0;
  }
}

/* En un monitor ancho la hoja crece: una carta se lee mejor a su tamaño. */
@media (min-width:1500px){
  #home .lienzo.con-hoja:has(> [id^="vista-"]:not(:empty)){grid-template-columns:minmax(0,1fr) 560px}
}

/* ------------------------------------------------------------ el botiquín */

  .insumo{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:12px 13px;
  }
  .insumo.falta{border-color:var(--alert);background:var(--alertl)}
  .insumo.justo{border-color:var(--warnb);background:var(--warnl)}
  .insumo .nombre{font-weight:600;font-size:15.5px}
  .insumo .detalle{font-size:15px;color:var(--muted);margin-top:1px}
  .insumo.falta .detalle{color:var(--alert)}
  .insumo.justo .detalle{color:var(--warn)}
  .insumo .cant{font-weight:650;font-size:15.5px;white-space:nowrap}

/* ------------------------------------------------------------ los exámenes */

  /* Mismas medidas que .tarjeta-paciente. Ver el comentario de allá. */
  .examen{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:13px 14px;display:flex;flex-direction:column;gap:8px;
    box-shadow:var(--som);
  }
  /* ⚠️ EL BORDE DE COLOR ENTERO SE FUE el 9 de septiembre de 2026, y con él la
     tira de progreso (`.plazo`, que ya no la usa nadie y por eso no está más
     acá abajo). El estado de un examen se decía CUATRO veces: la franja de
     arriba, este borde, el sello y la tira.

     Del atrasado queda una barra de 3 px al canto —lo único que hay que cazar
     de reojo—, y del que llegó no queda ninguna marca de color: ya está en el
     grupo «Llegaron», que lo dice con todas sus letras. */
  .examen.atrasado{box-shadow:inset 3px 0 0 var(--alert),var(--som)}
  .examen .arriba{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .examen .paciente{font-size:16px;font-weight:700;letter-spacing:-.015em}
  .examen .que{font-size:15px;color:var(--ink2)}
  .examen .quien{font-size:15px;color:var(--muted)}

  /* ⚠️ «HAY QUE MIRAR ESTE», EN UNA LÍNEA Y DENTRO DE LA FILA DEL EXAMEN.
     Reemplaza al recuadro ámbar de cuatro renglones que se dibujaba adentro de
     la tarjeta —una caja dentro de otra caja— y que hacía que un examen con el
     tutor dudoso ocupara media pantalla.

     ⚠️ Se llama `ex-ojo` y no `ojo` ni `aviso`: los dos ya existen y son otra
     cosa. Es la misma regla del JavaScript, y en Core ya costó una vez con
     `marca`.

     No lleva recuadro ni fondo: el color del texto y el dibujo bastan para que
     salte en una lista donde todo lo demás es gris. */
  .ex-ojo{
    display:flex;gap:7px;align-items:flex-start;
    font-size:13.5px;line-height:1.4;color:var(--warn);font-weight:600;
  }
  .ex-ojo .ic{flex:none;margin-top:1px}
  /* El caso del tutor: es un DATO, no una alarma. Gris, peso normal y sin el
     icono de alerta. Ver el comentario largo en pagina.js. */
  .ex-ojo.dato{color:var(--muted);font-weight:400;font-size:13px}

  /* Dos visitas en la misma puerta. Va debajo de la dirección, que es el dato
     del que sale, y en el azul de la marca y no en ámbar: no es un problema
     que resolver, es una comodidad que aprovechar. */
  .misma-casa{
    display:flex;gap:6px;align-items:center;margin-top:5px;
    font-size:13.5px;font-weight:600;color:var(--brand);
  }
  .misma-casa .ic{flex:none}
  .ex-ojo.grave{color:var(--alert)}

  /* La triangulación: ficha + paciente + tutor. Se muestran los tres, y si
     falta uno se dice "2 de 2" en vez de inventar el tercero. */
  .calce{display:flex;flex-direction:column;gap:3px;font-size:15px;color:var(--ink2)}
  .calce span{display:flex;gap:7px;align-items:center}
  .calce .tic{color:var(--ok);font-weight:700;flex:none}
  .calce .cruz{color:var(--alert);font-weight:700;flex:none}

/* ----------------------------------------------------------- el calendario */

  .mes{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:13px;display:flex;flex-direction:column;gap:9px;
  }
  .mes .cabeza{display:flex;justify-content:space-between;align-items:center}
  .mes .cabeza b{font-size:16px;font-weight:650}
  .mes .cabeza .flechas{display:flex;gap:6px}
  .mes .cabeza button{
    width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r1);
    background:transparent;color:var(--ink2);font-size:16px;line-height:1;
  }
  .rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .rejilla .nombre-dia{
    text-align:center;font-size:12.5px;color:var(--muted);font-weight:650;padding:2px 0;
  }
  .dia{
    aspect-ratio:1;border:0;background:transparent;border-radius:var(--r1);
    font-size:15.5px;font-weight:500;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .dia.fuera{visibility:hidden}
  .dia.con{background:var(--brandl);color:var(--brandd);font-weight:650}
  /* ⚠️ «LLENO» YA NO VA EN ÁMBAR (27 de septiembre de 2026). Era el día con
     seis visitas o más, pintado del color que en toda la aplicación dice «hay
     que mirarlo»: Seba vio un día naranjo y preguntó qué estaba mal. No hay
     nada mal en un día lleno. Va en el mismo azul que «con visitas», más
     cargado: se lee como «más», no como «ojo». */
  .dia.lleno{background:color-mix(in srgb,var(--brand) 26%,var(--card));color:var(--brandd);font-weight:700}
  .dia.elegido{box-shadow:inset 0 0 0 2px var(--brand)}
  .dia.hoy.elegido{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--brand)}
  .dia.hoy{background:var(--brand);color:#FFF;font-weight:700}
  .dia .puntos{position:absolute;bottom:5px;display:flex;gap:2px}
  .dia .puntos i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55}

/* ---------------------------------------------------------- el aviso flotante */

  /* ⚠️ `pointer-events:none` NO ES UN ADORNO.

     El aviso es `position:fixed`, mide hasta 488 px y se queda unos segundos
     encima de la pantalla. Sin esto **se come los clics de todo lo que tapa**:
     el dedo cae en el aviso y no en la caja de texto que hay debajo, y la
     sensación es que el campo «no deja escribir». Con esto, el aviso se ve y
     los clics lo atraviesan como si no estuviera. */
  .aviso{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(72px + env(safe-area-inset-bottom));
    width:min(488px,calc(100% - 32px));z-index:20;
    pointer-events:none;
    background:var(--ink);color:#FFF;border-radius:var(--r2);
    padding:13px 15px;font-size:15px;line-height:1.4;
    box-shadow:0 10px 30px -10px rgba(16,32,44,.5);
  }
  .aviso[hidden]{display:none}
  @media (prefers-reduced-motion:no-preference){
    .aviso{animation:asoma .2s ease-out}
    @keyframes asoma{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
  }

/* --------------------------------------------------------- la barra de abajo */

  /* ⚠️ SON CINCO, Y EL NÚMERO ESTÁ ESCRITO ACÁ. «Recordatorios» se sumó el
     11 de septiembre de 2026; si algún día se agrega otra, este `repeat` hay
     que cambiarlo igual o la nueva se sale de la fila sin decir nada. */
  .pestanas{
    /* ⚠️ `minmax(0,1fr)` Y NO `1fr` A SECAS. Un `1fr` pelado es
       `minmax(auto,1fr)`: la pestaña de la palabra más larga se estira y las
       cinco dejan de medir lo mismo. Medido a 320 px: cuatro de 62 y
       «Recordatorios» de 73. */
    /* ⚠️ SEIS DESDE EL 12 DE SEPTIEMBRE DE 2026, con «Ruta». Este número es
       uno de los cuatro lugares que hay que tocar al agregar una pestaña: si
       se queda en cinco, la sexta se dibuja igual pero se sale de la barra y
       en un teléfono angosto queda fuera de la pantalla. */
    flex:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
    background:var(--card);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    position:sticky;bottom:0;z-index:3;
  }
  .pestanas button{
    background:none;border:0;border-top:2.5px solid transparent;margin-top:-1px;
    padding:9px 4px 11px;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:12px;font-weight:600;color:var(--muted);min-height:60px;
    letter-spacing:-.01em;
  }
  .pestanas button[aria-current="true"]{color:var(--brand);border-top-color:var(--brand)}
  /* El ícono va arriba y el nombre abajo: es lo que la gente ya sabe leer de
     cualquier otra aplicación del teléfono, y de reojo se distingue por la
     forma sin tener que leer. */
  .pestanas .ic-pest{position:relative;display:flex}
  /* ⚠️ EL NOMBRE SE ACHICA CON LA PANTALLA, y por eso va en `clamp` y no en
     un número fijo. Con cinco pestañas cada una mide un quinto del ancho —64 px
     en un teléfono de 320— y «Recordatorios» a 10,5 px pide 72: se partía en
     dos renglones y esa pestaña quedaba más alta que las otras cuatro. Medido
     en el navegador, no calculado: 8,8 px es lo que hace que quepa a 320, y de
     430 para arriba vuelve a los 10,5 de siempre. Se achica la palabra y no la
     pestaña — el dedo apunta al dibujo, no a la letra. */
  .pestanas .nom-pest{line-height:1.1;font-size:clamp(8.8px,2.6vw,10.5px)}
  .pestanas .globito{
    position:absolute;top:-5px;right:-9px;min-width:17px;height:17px;padding:0 4px;
    border-radius:9px;background:var(--brand);color:#FFF;
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
    border:2px solid var(--card);
  }
  .pestanas .globito.urge{background:var(--alert)}
  /* El nombre del producto sobre el menu. En el telefono no cabe y no hace
     falta: arriba ya esta el titulo de la pantalla. Se enciende solo en el
     bloque de escritorio, mas abajo. */
  .marca-lat{display:none}

/* -------------------------------------------------------------- lo vacío */

  .vacio{
    text-align:center;color:var(--muted);font-size:15.5px;
    padding:34px 20px;line-height:1.5;
  }
  .vacio b{display:block;color:var(--ink2);font-weight:650;margin-bottom:4px}

/* ------------------------------------------------------- quién está adentro */

  /* Las iniciales de quien entró, arriba a la derecha. Llevan a la pantalla de
     la cuenta, que es donde está el botón de salir. Va con iniciales y no con
     el nombre entero porque en un teléfono el nombre le come el espacio al
     título de la pantalla. */
  .yo{
    flex:none;width:38px;height:38px;border-radius:50%;
    border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);
    color:var(--campo-tinta);
    font-size:15px;font-weight:700;letter-spacing:.02em;
    display:flex;align-items:center;justify-content:center;
  }
  .yo:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6)}

  /* La lupa, al lado del botón de la cuenta. Del mismo porte y con el mismo
     tratamiento: son los dos botones que están en todas las pantallas, y si
     se vieran distintos uno parecería más importante que el otro. */
  .lupa-boton{
    flex:none;width:38px;height:38px;border-radius:50%;margin-left:auto;
    border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);
    color:var(--campo-tinta);
    display:flex;align-items:center;justify-content:center;
  }
  .lupa-boton + .yo{margin-left:0}
  .lupa-boton:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.6)}
  .lupa-boton .ic{width:17px;height:17px}

  /* Los enlaces que se ven como botones (volver, cerrar sesión). */
  a.boton{display:flex;align-items:center;justify-content:center}

/* ══════════════ Los papeles: receta, certificado y cobro ══════════════════ */

  /* Un bloque de acciones grandes, para elegir qué papel se va a emitir. Van
     con icono de texto y no con dibujo: se leen igual en cualquier teléfono y
     no hay nada que se pueda quedar sin cargar. */
  .papeles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .papel{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:14px 13px;display:flex;flex-direction:column;gap:4px;text-align:left;
    box-shadow:var(--som);min-height:92px;justify-content:flex-end;
  }
  .papel:hover{border-color:var(--brand);background:var(--brandl)}
  .papel .p-tit{font-size:16px;font-weight:650;letter-spacing:-.015em}
  .papel .p-sub{font-size:13.5px;color:var(--muted);line-height:1.35}
  .papel.ancho{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;gap:10px}
  .papel.ancho .p-tit{flex:1}

  /* La lista de requisitos de un certificado: cada uno con su estado. Es lo
     que evita que el veterinario firme un certificado al que le falta algo. */
  .requisitos{display:flex;flex-direction:column;gap:8px}
  .req{
    display:flex;gap:10px;align-items:flex-start;padding:11px 12px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  }
  .req.falta{border-color:var(--alert);background:var(--alertl)}
  .req.ojo{border-color:var(--warnb);background:var(--warnl)}
  .req .marca-req{
    flex:none;width:22px;height:22px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:15px;font-weight:700;
    background:var(--okl);color:var(--ok);
  }
  .req.falta .marca-req{background:#fff;color:var(--alert)}
  .req.ojo .marca-req{background:#fff;color:var(--warn)}
  .req .cuerpo-req{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .req .r-tit{font-size:15px;font-weight:600}
  .req .r-det{font-size:15px;color:var(--muted);line-height:1.4}
  .req.falta .r-det{color:var(--alert)}
  .req.ojo .r-det{color:var(--warn)}

  /* Enlaces a trámites del Estado. Se ven distintos de los botones de la
     aplicación a propósito: llevan afuera, a un sitio que no es nuestro. */
  .tramite{
    display:flex;gap:10px;align-items:center;justify-content:space-between;
    padding:12px 13px;background:var(--card);border:1px dashed var(--linea-tramite,var(--line));
    border-radius:var(--r2);text-decoration:none;color:var(--ink);
  }
  .tramite:hover{border-color:var(--brand);background:var(--brandl)}
  .tramite .t-cuerpo{display:flex;flex-direction:column;gap:2px;min-width:0}
  .tramite .t-tit{font-size:15px;font-weight:600;color:var(--brandd)}
  .tramite .t-det{font-size:13.5px;color:var(--muted);line-height:1.35}
  .tramite .t-flecha{flex:none;color:var(--brand);font-size:17px}

  /* El documento ya emitido, desplegado bajo su fila. Se hunde un poco —fondo
     gris y un margen a la izquierda— para que se lea como «esto es de la fila
     de arriba» y no como una sección nueva. */
  .papel-abierto{
    display:flex;flex-direction:column;gap:10px;
    background:var(--line2);border-radius:var(--r2);
    padding:12px;margin:-2px 0 8px 12px;
  }

/* El plan de vacunas de la ficha es una tabla desde el 26 de septiembre de
   2026: ver «LOS RECORDATORIOS DE LA FICHA, EN TABLA», al final. */

/* ------------------------------------ la vista previa del afiche de redes */

  /* ⚠️ SE VE ANTES DE PUBLICARLO. Antes el botón generaba la imagen y la
     mandaba derecho a compartir: eso es publicar a ciegas, y si un nombre
     quedó cortado uno se entera cuando ya está en Instagram.

     El lienzo mide 1080 × 1350 de verdad —esa es la imagen que se descarga— y
     acá se muestra encogido a lo que dé la pantalla. `aspect-ratio` mantiene
     la proporción sin tener que calcular nada. */
  .afiche-visor{
    display:flex;justify-content:center;
    background:var(--line2);border-radius:var(--r3);padding:14px;
  }
  .afiche-lienzo{
    display:block;width:100%;max-width:340px;height:auto;
    aspect-ratio:1080 / 1350;
    border-radius:var(--r2);box-shadow:0 6px 20px rgba(16,32,44,.16);
  }
  @media (min-width:900px){
    .afiche-lienzo{max-width:400px}
  }

  /* El QR del cobro. Se dibuja en un canvas, sin pedirle nada a internet:
     esta aplicacion tiene que funcionar sin señal. */
  .qr-caja{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    background:#FFF;border:1px solid var(--line);border-radius:var(--r3);
    padding:18px 16px;box-shadow:var(--som);
  }
  #qr{width:212px;height:212px;image-rendering:pixelated;display:block}
  .qr-monto{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
  .qr-pie{font-size:15px;color:var(--muted);text-align:center;line-height:1.4;max-width:34ch}

/* ─── Filas de lista con un texto a la izquierda y una insignia a la derecha.
       Las usa la lista de "los próximos días" de la Agenda y la de papeles ya
       emitidos. Estaban usándose en el JavaScript sin existir acá: la Agenda
       llevaba desde el principio con esa lista sin formato, y lo encontró
       revisar_pagina.py, que para eso está. ─── */
  /* Mismas medidas que .tarjeta-paciente. Ver el comentario de allá. */
  /* ⚠️ `text-align:left` NO SOBRA. Estas filas son `<button>`, y un botón
     centra su texto por omisión: el nombre del documento salía al medio y la
     fecha de abajo pegada a la izquierda, cada renglón empezando en un lugar
     distinto. Con una lista de seis eso es el borde en escalera que se lee
     como desorden. */
  .dia-lista{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:15px 16px;box-shadow:var(--som);text-align:left;
  }
  .dia-lista .izq{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dia-lista .nom{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
  .dia-lista .det{font-size:15px;color:var(--muted);line-height:1.35}

/* ─── Una opción que se marca. Es el mismo dibujo que .item del cobro, pero
       sin precio: sirve para un sí/no suelto, como "es un antimicrobiano". ─── */
  .opcion{
    display:flex;gap:11px;align-items:flex-start;padding:12px 13px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    cursor:pointer;
  }
  .opcion.elegida{border-color:var(--brand);background:var(--brandl)}
  /* Una opción que TODAVÍA no se puede marcar. El borde punteado y la opacidad
     son los mismos de `.bloque-lab.apagado` y `.fila-cat.apagado`: «apagado»
     significa lo mismo en toda la aplicación. Y el cursor vuelve a ser el de
     siempre — la manito promete un clic que acá no hay. */
  .opcion.apagado{opacity:.62;border-style:dashed;cursor:default}
  .opcion input{margin-top:3px;accent-color:var(--brand);width:19px;height:19px;flex:none}
  .opcion .cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:15.5px;font-weight:600}
  .opcion .nota{font-size:15px;color:var(--muted);font-weight:400;line-height:1.35;
                background:none;padding:0;border-radius:0}

/* ═══════════ Durante la visita: dosis, triage, firma e historial ══════════ */

  /* La calculadora de dosis. El resultado va grande y solo: es el número que
     el veterinario va a cargar en la jeringa. */
  .resultado{
    background:var(--brandl);border:1px solid var(--brand);border-radius:var(--r3);
    padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:4px;
  }
  .resultado .cifra-grande{
    font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--brandd);
  }
  .resultado .como{font-size:15px;color:var(--brandd);text-align:center;line-height:1.4}
  .resultado.malo{background:var(--alertl);border-color:var(--warnb)}
  .resultado.malo .cifra-grande,.resultado.malo .como{color:var(--warn)}

  /* Las banderas rojas del triage. Se marcan tocando la fila entera. */
  .bandera{
    display:flex;gap:11px;align-items:flex-start;padding:12px 13px;cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  }
  .bandera.marcada{border-color:var(--alert);background:var(--alertl)}
  .bandera input{margin-top:3px;accent-color:var(--alert);width:20px;height:20px;flex:none}
  .bandera .b-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .bandera .b-tit{font-size:15.5px;font-weight:600}
  .bandera.marcada .b-tit{color:var(--alert)}
  .bandera .b-det{font-size:13.5px;color:var(--muted);line-height:1.35}

  /* La firma del tutor, con el dedo. */
  .firma-caja{border:1px solid var(--line);border-radius:var(--r3);background:#FFF;overflow:hidden}
  #firma{display:block;width:100%;height:170px;touch-action:none;cursor:crosshair}
  .firma-pie{
    font-size:13px;color:var(--muted);text-align:center;padding:0 0 10px;
    border-top:1px dashed var(--line);margin:0 14px;padding-top:8px;
  }

  /* ── La firma y el timbre del médico, ya guardados ─────────────────────
     ⚠️ VAN SOBRE BLANCO Y NO SOBRE EL GRIS DE LA APLICACIÓN. Es el blanco del
     papel donde se van a estampar: sobre el gris, una foto de timbre con el
     fondo del papel se vería como un recuadro claro y no se notaría que ese
     fondo sobra, que es lo único que hay que mirar acá. */
  .sello-tiene{
    display:flex;align-items:center;justify-content:center;
    background:#FFF;border:1px solid var(--line);border-radius:var(--r3);
    padding:14px;min-height:96px;
  }
  .sello-img{
    max-width:100%;max-height:120px;width:auto;height:auto;display:block;
    mix-blend-mode:multiply;
  }

  /* La línea de tiempo del paciente. La línea vertical es el hilo; cada hito
     cuelga de ella. */
  .linea-tiempo{display:flex;flex-direction:column;gap:0;padding-left:6px}
  .hito{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:0 0 16px}
  .hito .eje{display:flex;flex-direction:column;align-items:center;gap:4px}
  .hito .bolita{
    width:12px;height:12px;border-radius:50%;background:var(--brand);
    border:2.5px solid var(--card);box-shadow:0 0 0 1.5px var(--brand);flex:none;margin-top:5px;
  }
  .hito.ok .bolita{background:var(--ok);box-shadow:0 0 0 1.5px var(--ok)}
  .hito.espera .bolita{background:var(--warn);box-shadow:0 0 0 1.5px var(--warn)}
  .hito .hilo{flex:1;width:2px;background:var(--line);border-radius:1px;min-height:14px}
  .hito:last-child .hilo{display:none}
  .hito .contenido{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:14px 12px;display:flex;flex-direction:column;gap:3px;
  }
  .hito .h-fecha{font-size:13px;color:var(--muted);font-weight:600}
  .hito .h-que{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .hito .h-quien{font-size:15px;color:var(--muted);line-height:1.35}

/* Rótulo de grupo dentro de una pantalla. Es el mismo dibujo que .rotulo; se
   agrega porque el JavaScript lo llamaba así en un lugar y no existía. */
  .titulo-grupo{
    font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin-top:4px;
  }

/* ═══════════════ Mis fármacos: el vademécum del veterinario ═══════════════ */

  .fichas-farm{display:flex;flex-direction:column;gap:8px}
  .farm{
    display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:12px 13px;
  }
  .farm:hover{border-color:var(--brand);background:var(--brandl)}
  .farm.puesto{border-color:var(--brand);background:var(--brandl);border-width:1.5px}
  .farm .f-nom{font-size:16px;font-weight:650;letter-spacing:-.01em}
  .farm .f-det{font-size:15px;color:var(--muted)}
  .farm.puesto .f-det{color:var(--brandd)}

/* ═══════════════════════════ Los íconos ═══════════════════════════════════ */

  .ic{
    width:18px;height:18px;flex:none;display:block;
    /* Heredan el color del texto: así el mismo ícono sirve sobre el campo
       oscuro de arriba y sobre el fondo claro, sin tener dos versiones. */
    color:inherit;
  }
  .ic.chico{width:16px;height:16px}
  .ic.grande{width:28px;height:28px}

/* ── Las pastillas de color de los íconos ─────────────────────────────────

   Los íconos que van adentro de un cuadradito de color son cinco clases —el
   rótulo de cada sección, la fila de acción de una visita, la fila de ajustes,
   la tarjeta de cada tipo de papel y la fila de «Lo que falta subir»— y hasta el 10 de septiembre de 2026 los
   cuatro pintaban TODO del mismo azul. O sea que el dibujo no agregaba nada:
   la sección se seguía distinguiendo solo leyéndola.

   Ahora el color lo decide el ÍCONO, no el sitio donde está: el mismo dibujo
   se ve igual en el rótulo, en la fila y en la tarjeta. Eso es lo que hace que
   se aprenda sin que nadie lo explique.

   ⚠️ EL COLOR SALE DE LA CLASE QUE `icono()` LE PEGA A CADA DIBUJO
   (`ic-agenda`, `ic-papel`, …), así que la paleta entera vive acá, junto a los
   demás colores, y no repartida por once mil líneas de JavaScript.

   ⚠️ `:has()` ES LO QUE HACE POSIBLE ESTO en las tres pastillas que son un
   `<span>` envolviendo al dibujo: el color de fondo va en el envoltorio y el
   nombre está en el hijo. Ya se usa en este mismo archivo para partir el
   lienzo en dos columnas; está en los tres navegadores desde 2023, y donde no
   exista la regla se ignora entera y las pastillas quedan azules, que es
   exactamente como estaban antes.

   ⚠️ UN ÍCONO QUE NO ESTÉ EN NINGUNA LISTA SALE AZUL, nunca sin color y nunca
   con un hueco. Agregar un dibujo nuevo no obliga a tocar esto.

   ⚠️ ESE AZUL DE POR OMISIÓN ES `--ic-tiempo` Y NO `--brand`, o sea que NO
   sigue la paleta que eligió el veterinario. Se probó con `--brand` y en la
   paleta «ciruela» el fondo de la pastilla quedaba en #F0E9F8, que es
   EXACTAMENTE el violeta de los papeles: dos familias del mismo color y la
   agrupación deshecha. En «rosa» pasaba casi lo mismo con el magenta. Los
   cuatro tintes son fijos o no son nada.

   La paleta se sigue viendo donde de verdad se ve: la barra de arriba, el
   degradado del botón, los enlaces y lo que está elegido.

   ⚠️ OJO CON EL NOMBRE: `.ic-pest` (la pestaña con su globito) es de antes y
   NO es un ícono — es un envoltorio escrito a mano. Mientras no exista un
   dibujo llamado `pest` no chocan, pero es el mismo espacio de nombres.

   ⚠️ LAS TRES REGLAS DE LAS PASTILLAS LLEVAN `#home` DELANTE Y HACE FALTA.
   Cada envoltorio trae su propio azul escrito MÁS ABAJO en este archivo
   —`.papel .p-ic` y `#home .e-ic`—, y una de esas dos hasta lleva un ID. Sin
   el `#home` la paleta perdía y la pantalla de Documentos salía con las siete
   tarjetas azules, igual que antes. Se vio en la foto, no leyendo el archivo.

   ⚠️ Y POR ESO MISMO el verde de `.fila-accion.listo` también lo lleva: es lo
   único que tiene que ganarle a esto. Una fila ya hecha se pinta de verde, y
   el color del ícono no puede taparlo — el verde ahí significa «esto ya
   está», que es más importante que de qué familia sea el dibujo.          */
  .rotulo .ic{
    width:22px;height:22px;padding:5px;border-radius:7px;
    background:var(--ic-tiempo-l);color:var(--ic-tiempo);
  }
  /* Los papeles: lo que se escribe, se firma y se guarda. */
  .rotulo :is(.ic-ficha,.ic-papel,.ic-receta,.ic-salud,.ic-microchip,.ic-examen,.ic-curacion,.ic-dosis,.ic-viaje,.ic-lista,.ic-imprimir,.ic-copiar,.ic-imagen),
  #home :is(.aj-ic,.fa-icono,.p-ic,.e-ic,.co-ic):has(:is(.ic-ficha,.ic-papel,.ic-receta,.ic-salud,.ic-microchip,.ic-examen,.ic-curacion,.ic-dosis,.ic-viaje,.ic-lista,.ic-imprimir,.ic-copiar,.ic-imagen)){
    background:var(--ic-papel-l);color:var(--ic-papel);
  }
  /* La gente y los lugares: quién es y dónde está. */
  .rotulo :is(.ic-yo,.ic-quien,.ic-paciente,.ic-lugar,.ic-ruta,.ic-perro,.ic-gato,.ic-conejo),
  #home :is(.aj-ic,.fa-icono,.p-ic,.e-ic,.co-ic):has(:is(.ic-yo,.ic-quien,.ic-paciente,.ic-lugar,.ic-ruta,.ic-perro,.ic-gato,.ic-conejo)){
    background:var(--ic-gente-l);color:var(--ic-gente);
  }
  /* Lo que sale hacia afuera: el tutor, el cobro, el aviso. */
  .rotulo :is(.ic-correo,.ic-whatsapp,.ic-telefono,.ic-campana,.ic-cobro,.ic-microfono),
  #home :is(.aj-ic,.fa-icono,.p-ic,.e-ic,.co-ic):has(:is(.ic-correo,.ic-whatsapp,.ic-telefono,.ic-campana,.ic-cobro,.ic-microfono)){
    background:var(--ic-afuera-l);color:var(--ic-afuera);
  }
  /* ⚠️ ESTOS DOS SÍ SIGNIFICAN ALGO, y por eso llevan el color que ya tienen
     en toda la aplicación: el verde es «verificado» y el ámbar «hay que
     mirarlo». Un rótulo que habla de eso tiene que verse igual que el aviso
     que habla de lo mismo tres líneas más abajo.

     ⚠️ Y VAN SOLO EN EL RÓTULO, no en las filas. En una fila de acción el
     verde ya quiere decir otra cosa —lo pone `.fila-accion.listo` cuando esa
     tarea YA ESTÁ HECHA—, así que pintar de verde el dibujo de una fila
     pendiente diría que está lista cuando no lo está. */
  .rotulo .ic-ok{background:var(--okl);color:var(--ok)}
  .rotulo .ic-alerta{background:var(--warnl);color:var(--warn)}
  /* El de Google trae su propia placa blanca adentro del dibujo: una pastilla
     de color detrás le pondría un marco que no le corresponde. */
  .rotulo .ic-google{background:none;padding:0;width:18px;height:18px}
  #home :is(.aj-ic,.fa-icono,.p-ic,.e-ic,.co-ic):has(.ic-google){background:none}

/* ═══════════════════ La ficha del paciente, arriba de todo ════════════════ */

  /* ⚠️ EL ANIMAL Y LA PERSONA, UNO AL LADO DEL OTRO.

     Antes el paciente era una tarjeta y el tutor dos filas de texto debajo,
     como si el tutor fuera un dato del animal. No lo es: son dos fichas
     distintas, cada una se abre por su lado, y puestas juntas se lee de una
     lo que hace falta antes de tocar el timbre — a quién vengo a ver y en
     casa de quién.

     En el teléfono se apilan, porque dos tarjetas de 190 px lado a lado no
     caben sin cortar los nombres. Desde 700 px van al lado, mitad y mitad. */
  .par-fichas{display:flex;flex-direction:column;gap:9px}
  @media (min-width:700px){
    .par-fichas{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:stretch}
    .par-fichas > *{height:100%}
  }
  /* El rótulo chico que dice cuál es cuál. Sin él, dos tarjetas iguales lado a
     lado obligan a leerlas enteras para saber cuál es el animal. */
  .et-tarjeta{
    font-size:12px;text-transform:uppercase;letter-spacing:.07em;
    font-weight:650;color:var(--muted);margin-bottom:2px;
  }
  /* Un tutor sin ficha propia todavía no tiene a dónde llevar. La tarjeta se
     ve igual pero no se aprieta, en vez de prometer un enlace que no lleva a
     ninguna parte. */
  .cabecera-paciente.sin-ir{
    width:100%;text-align:left;cursor:default;opacity:1;
  }

  .cabecera-paciente{
    display:flex;gap:14px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:20px 15px;box-shadow:var(--som);
  }
  /* El mismo avatar de la lista, más grande. El color sale del tinte que le
     toca al nombre (ver .avatar-ini), así que acá NO se vuelve a poner: si se
     pusiera, todos los pacientes volverían a ser del mismo color. */
  .avatar-paciente{width:54px;height:54px;font-size:19px}
  .datos-paciente{display:flex;flex-direction:column;gap:1px;min-width:0}
  .nombre-paciente{font-size:21px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
  .sub-paciente{font-size:15px;color:var(--muted)}

/* Los rótulos ahora llevan ícono, así que se alinean como una fila. */
  .rotulo{display:flex;align-items:center;gap:7px}

/* Los avisos también: el ícono a la izquierda y el texto al lado. */
  .nota{flex-direction:row;align-items:flex-start;gap:10px}
  .nota > .ic{margin-top:1px}
  .nota > span{flex:1;min-width:0}
  .nota b{display:inline}

/* Los botones con ícono adentro. */
  .boton{display:flex;align-items:center;justify-content:center;gap:8px}
  .boton .ic{width:17px;height:17px}

/* La línea del laboratorio, con su ícono de lugar. */
  .examen .quien{display:flex;align-items:center;gap:6px}

/* ═════════════ Las filas de acción: qué falta por hacer, de un vistazo ════ */

  /* Cada una dice qué es, en qué va y hacia dónde lleva. La idea es que el
     veterinario vea sin entrar a ninguna qué le queda pendiente de esa visita:
     lo verde ya está hecho, lo demás no. */

/* ------------------------------------------------- lo que ya quedó hecho */

  /* ⚠️ Eran cinco filas de 60 px, media pantalla, y lo terminado pesaba lo
     mismo que lo pendiente. Una ficha ya escrita no necesita una fila entera
     con su icono y su subtítulo: necesita decir que está lista y quitarse del
     medio. Se sigue pudiendo entrar — cada una es un botón. */
  /* El cobro no es un papel: sale hacia afuera, como el correo y el WhatsApp. */
  .fa-icono{
    width:38px;height:38px;border-radius:10px;flex:none;
    background:var(--ic-tiempo-l);color:var(--ic-tiempo);
    display:flex;align-items:center;justify-content:center;
  }
  /* ⚠️ EL `#home` NO SOBRA: la paleta de los íconos ahora lleva uno, y este
     verde tiene que seguir ganándole. Ver «Las pastillas de color». */
  .fa-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .fa-tit{font-size:16px;font-weight:650;letter-spacing:-.01em}
  .fa-det{font-size:15px;color:var(--muted)}
  .fa-listo{color:var(--ok);display:flex}

/* La cabecera del paciente, cuando además lleva a su ficha. */
  .cabecera-paciente.tocable{width:100%;text-align:left;cursor:pointer}
  .cabecera-paciente.tocable:hover{border-color:var(--brand)}
  .cabecera-paciente > .ic{color:var(--faint);margin-left:auto}

/* Las tarjetas de papeles, ahora con su ícono arriba. */
  .papel .p-ic{
    width:34px;height:34px;border-radius:9px;margin-bottom:4px;
    background:var(--ic-tiempo-l);color:var(--ic-tiempo);
    display:flex;align-items:center;justify-content:center;
  }
  .papel{justify-content:flex-start}


/* Los enlaces que se ven como botones no llevan subrayado: si lo llevan, se
   nota que son otra cosa y la fila deja de verse pareja. */
  a.boton,a.boton:hover{text-decoration:none}

/* ════════════ Cómo viene el día, arriba de todo y en una línea ════════════ */

  .resumen-dia{
    display:flex;gap:0;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r3);overflow:hidden;box-shadow:var(--som);
  }
  .rd-dato{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
    padding:12px 6px;font-size:13px;color:var(--muted);
    border-right:1px solid var(--line);
  }
  .rd-dato:last-child{border-right:0}
  .rd-dato b{font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}

  /* La fila de avisos de «Hoy» se fue a la campanita de la barra (26 de
     septiembre de 2026): ver «LA CAMPANITA DE LA BARRA», al final. */


/* ═══════════════════════ Todos los pacientes ══════════════════════════════ */

  .buscador{
    display:flex;align-items:center;gap:9px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:0 12px;
  }
  .buscador .ic{color:var(--muted)}
  .buscador input{
    flex:1;border:0;background:none;outline:none;
    font-family:inherit;font-size:16px;color:var(--ink);padding:13px 0;
  }
  .buscador:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brandl)}
  /* ⚠️ EL ANILLO VA EN LA CAJA, NO EN EL CAMPO. El `:focus-visible` general
     de Home le pintaba además un contorno azul al campo de adentro, y se veían
     dos recuadros azules encimados (lo vio Seba el 26 de septiembre de 2026).
     La caja ya dice que el campo tiene el foco. */
  #home .buscador input:focus-visible,#home .lupa-caja input:focus-visible{outline:none}

  /* ══ BUSCAR Y AGREGAR, EN LA MISMA FILA ═════════════════════════════════

     Las dos cosas que se hacen al llegar al padrón. El botón tenía una fila
     entera para él solo debajo del buscador, y eso son tres renglones antes
     de ver al primer paciente.

     Se dan vuelta solos y sin `@media`: el buscador pide 260 px y el botón
     150, así que en cuanto no caben los dos el botón baja solo. Abajo se
     estira, porque un botón chico y solo en su renglón se ve perdido; al lado
     del buscador mide lo que dice. */
  .fila-buscar{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
  .fila-buscar > .buscador{flex:1 1 260px;min-width:0}
  /* ⚠️ `#home` delante, como siempre con los botones: `#home .boton` trae
     `width:100%` y lleva un ID, así que sin el prefijo el botón se lleva la
     fila entera y el buscador queda debajo aunque sobre pantalla. */
  #home .fila-buscar > .boton{
    width:auto;flex:1 1 150px;min-height:48px;padding:15px 18px;white-space:nowrap;
  }
  @media (min-width:620px){
    #home .fila-buscar > .boton{flex:0 0 auto}
  }

  /* LAS TRES TARJETAS DE LISTA DE LA APLICACIÓN —esta, .examen y .dia-lista—
     llevan las MISMAS medidas: 13px 14px de relleno, el radio grande y la
     sombra apenas insinuada. Eran tres juegos distintos y al cambiar de
     pestaña se notaba el salto. Si acá cambia una medida, cambian las tres. */
  .tarjeta-paciente{
    display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:18px 16px;box-shadow:var(--som);
  }
  .tarjeta-paciente:hover{border-color:var(--brand)}
  .tp-avatar{
    width:44px;height:44px;border-radius:50%;flex:none;
    background:var(--brandl);color:var(--brand);
    display:flex;align-items:center;justify-content:center;
  }
  .tp-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  /* ⚠️ `display:contents` NO ES UN ADORNO. Estos dos envoltorios existen para
     el computador —allá agrupan el nombre con las alertas, y los tres datos en
     una sola línea—. En el teléfono el navegador los ignora por completo y los
     cinco pedazos quedan apilados exactamente como estaban antes del 9 de
     septiembre de 2026. Sin esto, la pantalla del teléfono cambiaría sin que
     nadie lo hubiera pedido. */
  /* ⚠️ `tp-arriba` ES UNA FILA, NO `display:contents`, DESDE EL 11 DE
     SEPTIEMBRE DE 2026. Era `contents`, o sea que el nombre, sus chips de
     alerta y la pastilla de vencidos caían uno debajo del otro en la columna
     de la tarjeta. Ahora comparten un renglón que se dobla si no cabe, y con
     eso la pastilla dejó de robarle el ancho al nombre del tutor, que es lo
     que lo partía en dos líneas. `tp-datos` sigue en `contents`: esos tres sí
     van uno debajo del otro. */
  .tp-arriba{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
  .tp-datos,.tt-arriba,.tt-datos{display:contents}
  /* El encabezado de la tabla del padrón solo existe en el computador. */
  .padron-cab{display:none}
  .tp-nombre{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
  /* ⚠️ CORTAN CON PUNTOS SUSPENSIVOS, igual que lo hacía la tabla
     de Recordatorios. En una ventana de 1000 px el padrón deja 103 px para «Gata
     mestiza · 2 años», que pide 122: sin esto la frase se cortaba a la mitad
     de una letra —«Gata mestiza · 2 añ»— y parecía un error de la aplicación
     en vez de una columna angosta. Con los puntos, quien mira sabe que hay
     más y que el dato está entero en la ficha.

     Son dos cosas distintas y el proyecto ya tenía escrita la buena en la
     otra pantalla; acá faltaba. */
  .tp-sub,.tp-pie{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .tp-sub{font-size:15px;color:var(--ink2)}
  .tp-pie{font-size:13px;color:var(--muted);margin-top:2px}
  .tarjeta-paciente > .ic{color:var(--faint)}

/* ------------------------------------------- la tarjeta del tutor, en lista */

  /* ⚠️ Se llama `tarjeta-tutor-lista` y NO `tarjeta-tutor`, que ya existe y es
     otra cosa: aquella es el recuadro del tutor DENTRO de la ficha de una
     mascota. Son dos cosas distintas y no pueden llamarse igual — es la misma
     regla del JavaScript, y en Core ya pasó una vez con `marca`.

     Las medidas son las de `.tarjeta-paciente` a propósito: las dos caras del
     padrón son la misma lista mirada de dos maneras, así que tienen que verse
     igual. Si allá cambian, acá también. */
  .tarjeta-tutor-lista{
    display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:18px 16px;box-shadow:var(--som);
  }
  .tarjeta-tutor-lista:hover{border-color:var(--brand)}
  .tarjeta-tutor-lista + .tarjeta-tutor-lista{margin-top:0}
  .tarjeta-tutor-lista > .ic{color:var(--faint)}
  .tarjeta-tutor-lista.puesta{
    border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand);
  }

  /* Las iniciales, no un dibujo. Un tutor no tiene especie: el avatar de la
     mascota dice si es perro o gato, y acá eso no existe. */
  .tt-avatar{
    width:44px;height:44px;border-radius:50%;flex:none;
    background:var(--brandl);color:var(--brandd);
    font-size:15.5px;font-weight:700;letter-spacing:.02em;
    display:flex;align-items:center;justify-content:center;
  }
  .tt-avatar-grande{
    background:var(--brandl);color:var(--brandd);
    font-size:23px;font-weight:700;letter-spacing:.02em;
    display:flex;align-items:center;justify-content:center;
  }
  .tt-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .tt-nombre{
    font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
    display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  }
  .tt-sub{font-size:15px;color:var(--ink2)}
  .tt-pie{font-size:13px;color:var(--muted);margin-top:2px}

  /* Lo que la persona escribió de su puño sobre la casa: que el portón se abre
     por el lado, que el perro ladra pero no muerde. Va en un recuadro y no
     como una fila más, porque es texto y no un dato. */
  /* El paso de la ficha de una mascota a la de su tutor. Se ve como una fila
     tocable y no como un botón: es navegación, no una acción. */
  .ir-al-tutor{
    display:flex;align-items:center;gap:11px;width:100%;text-align:left;
    background:var(--brandl);border:0;border-radius:var(--r2);
    padding:10px 12px;color:var(--ink);font:inherit;
  }
  .ir-al-tutor:hover{background:var(--brandl);filter:brightness(.97)}
  .ir-al-tutor .tt-avatar{width:34px;height:34px;font-size:13.5px;background:var(--card)}
  .ir-al-tutor .izq{flex:1;min-width:0;display:flex;flex-direction:column}
  .ir-al-tutor .nom{font-size:15px;font-weight:650;line-height:1.2}
  .ir-al-tutor .det{font-size:13px;color:var(--muted)}
  .ir-al-tutor > .ic{color:var(--brand);flex:none}

/* ═══════════════ EL HISTORIAL DE ATENCIÓN ════════════════════════════════

   ⚠️ Cada visita es un bloque con su resumen, no una línea con la fecha. Lo
   que uno viene a buscar acá es «¿qué le encontramos la vez pasada?», y para
   contestar eso hace falta el diagnóstico y lo indicado, no el motivo con que
   se agendó.

   La fecha va en su propia columna, siempre del mismo ancho, para que los
   bloques se lean como una línea de tiempo y no como tarjetas sueltas. */

  .hist-anio{
    font-size:12.5px;letter-spacing:.1em;font-weight:700;color:var(--faint);
    margin:16px 0 6px 2px;
  }
  .hist-anio:first-of-type{margin-top:8px}

  .hist-uno{
    display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:12px 13px;
  }
  .hist-uno + .hist-uno{margin-top:7px}
  .hist-uno:hover{border-color:var(--brand)}
  .hist-uno > .ic{color:var(--faint);flex:none;margin-top:3px}

  /* La columna de la fecha: el día grande y el mes chico debajo. */
  .hist-fecha{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    width:40px;flex:none;line-height:1.05;padding-top:1px;
  }
  .hist-fecha b{font-size:19px;font-weight:700;letter-spacing:-.03em}
  .hist-fecha{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

  .hist-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .hist-tit{
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
    font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  }
  .hist-motivo{font-size:15px;font-weight:400;color:var(--muted)}

  /* A qué se llegó. Es la línea que uno lee primero, así que va en tinta
     entera y no en gris. */
  .hist-dx{font-size:15px;color:var(--ink2);line-height:1.4}
  /* Y cuando no se escribió la ficha se dice. Un hueco callado parece que no
     pasó nada, y lo que pasa es que falta anotarlo. */
  .hist-falta{font-size:13.5px;color:var(--warn)}

  .hist-ind{
    display:flex;align-items:flex-start;gap:6px;
    font-size:13.5px;color:var(--muted);line-height:1.4;
  }
  .hist-ind .ic{color:var(--muted);flex:none;margin-top:2px}

  /* Las marcas: peso, muestras, plata. Chips chicos, en una línea. */
  .hist-marcas{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
  .hm{
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px;border-radius:999px;
    background:var(--line2);color:var(--ink2);
    font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  }
  .hm .ic{width:15px;height:15px}
  .hm-lab{background:var(--brandl);color:var(--brandd)}
  .hm-lab .ic{color:var(--brandd)}
  .hm-ok{background:var(--okl);color:var(--ok)}
  .hm-debe{background:var(--alertl);color:var(--alert)}

  /* El pie de la ficha: el «⋯» de archivar. Tenía una explicación escrita al
     lado y se sacó (`.pista-al-lado` se fue con ella): era un renglón fijo en
     todas las fichas para contar qué hace una opción escondida dentro del menú
     y que se usa una vez cada varios meses. */

  .nota-libre{
    background:var(--line2);border-radius:var(--r2);padding:10px 12px;
    font-size:15px;color:var(--ink2);line-height:1.45;white-space:pre-wrap;
  }
  /* El número rojo dice cuántas cosas tiene vencidas: se ve de la lista, sin
     tener que entrar a cada uno. */
  /* ---------------------------------- la inicial de color y las alertas */

  /* SEIS TINTES, TODOS FRÍOS, Y NO ES CASUAL. En esta aplicación el verde
     significa una sola cosa —"esto ya está verificado"— y el ámbar otra
     —"esto hay que mirarlo"—, igual que en Nexvet Labs. Un avatar verde le
     diría a la persona que algo está confirmado, cuando el color no significa
     nada: es solo para reconocer la ficha de reojo. Por eso todos salen de la
     familia del azul petróleo de la marca. */
  .avatar-ini{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:50%;
    font-size:15px;font-weight:700;letter-spacing:.01em;
    background:var(--brandl);color:var(--brandd);
  }
  .avatar-ini[data-tinte="0"]{background:#E8F0FE;color:#0E3A80}
  .avatar-ini[data-tinte="1"]{background:#E6ECF7;color:#2A4A80}
  .avatar-ini[data-tinte="2"]{background:#EAE8F6;color:#4B3F86}
  .avatar-ini[data-tinte="3"]{background:#E2F1EF;color:#125B58}
  .avatar-ini[data-tinte="4"]{background:#E9EDF0;color:#3D5561}
  .avatar-ini[data-tinte="5"]{background:#E7EEF2;color:#175A74}
  /* ⚠️ DE NOCHE LOS SEIS TINTES VAN OSCUROS, y hasta el 26 de septiembre de
     2026 no tenían versión de noche: el círculo seguía casi blanco y el dibujo
     del animal —que hereda la tinta clara de la noche— desaparecía adentro.
     En el padrón se veía una columna de círculos blancos vacíos, como fotos
     que no cargaron. Son los mismos seis tonos, bajados de claridad; la tinta
     de cada uno da más de 7 sobre su fondo. */
  #home.noche .avatar-ini{background:#1E2C40;color:#A9C6F5}
  #home.noche .avatar-ini[data-tinte="0"]{background:#1B2D4A;color:#A9C6F5}
  #home.noche .avatar-ini[data-tinte="1"]{background:#1F2B42;color:#B3C3E3}
  #home.noche .avatar-ini[data-tinte="2"]{background:#262640;color:#C3B9EC}
  #home.noche .avatar-ini[data-tinte="3"]{background:#16302F;color:#9DD8D1}
  #home.noche .avatar-ini[data-tinte="4"]{background:#222C33;color:#BCCAD3}
  #home.noche .avatar-ini[data-tinte="5"]{background:#18303A;color:#9CCFE3}

  /* ⚠️ LA FOTO SE PONE ENCIMA, NO EN LUGAR DE. Debajo siguen estando la
     inicial o el dibujo del animal, así que si la imagen no llega —sin señal,
     o porque borraron el archivo— el avatar se ve como siempre en vez de
     quedar un círculo vacío. El `onerror` del `<img>` lo saca y ahí abajo ya
     hay algo dibujado.

     `object-fit:cover` es lo que hace que una foto vertical de un perro entre
     en un círculo sin deformarse: recorta, no estira. */
  .avatar-ini{position:relative;overflow:hidden}
  .avatar-foto{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;border-radius:50%;
  }
  /* Cuando adentro va el dibujo del animal en vez de la sigla. El dibujo
     ocupa el 62% del círculo: más grande toca los bordes y se ve apretado,
     más chico se pierde adentro del color. */
  .avatar-ini.con-dibujo .ic-avatar{width:62%;height:62%;stroke-width:1.8}
  .avatar-ini.con-dibujo{color:inherit}

  /* Las alertas: cardiópata, muerde, alérgico. Van en ámbar y NO en rojo: el
     rojo en esta aplicación es un error o algo que se venció, y esto no está
     mal, solo hay que saberlo antes de entrar. */
  .alertas{display:flex;flex-wrap:wrap;gap:5px}
  .alerta-chip{
    display:inline-flex;align-items:center;gap:5px;
    /* ⚠️ NO VA EN ÁMBAR desde el 26 de septiembre de 2026 (Seba: «muy de
       emergencia»). Una alerta del paciente —«Muerde», «Cardiópata»— es un
       dato permanente que hay que tener presente, no algo que haya que
       resolver hoy, y el ámbar en Nexvet significa «esto hay que mirarlo». Va
       en pizarra, que se distingue del resto sin gritar. */
    background:#EEF1F7;color:#34466F;border:1px solid #D8DFEC;
    border-radius:999px;padding:3px 10px;
    font-size:13.5px;font-weight:650;line-height:1.35;letter-spacing:-.01em;
  }
  .alertas.chicas{margin:3px 0 1px}
  .alertas.chicas .alerta-chip{font-size:12.5px;padding:1px 8px}
  .alertas.grandes .alerta-chip{font-size:15px;padding:7px 13px}
  .alertas.sueltas{gap:7px}

  /* En la ficha del paciente, la fila de alertas con su botón de editar. */
  .fila-alertas{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .chip-editar{
    display:inline-flex;align-items:center;gap:6px;
    background:none;border:1px dashed var(--line);border-radius:999px;
    padding:5px 12px;font-size:13.5px;font-weight:600;color:var(--muted);
    min-height:32px;
  }
  .chip-editar:hover{border-color:var(--brand);color:var(--brand);border-style:solid}

  /* En la pantalla de editar: las que ya están se quitan tocándolas, y las de
     la lista de siempre se agregan igual. La que ya está puesta se apaga en
     vez de desaparecer: si desapareciera, la lista bailaría en cada toque. */
  .alerta-chip.quitable{cursor:pointer;padding-right:7px}
  .alerta-chip.quitable .x{font-size:16px;line-height:1;opacity:.65;font-weight:400}
  .alerta-chip.quitable:hover{border-color:var(--warn)}
  .alerta-chip.opcion{
    background:var(--card);color:var(--ink2);border-color:var(--line);
    cursor:pointer;padding:7px 13px;font-size:15px;font-weight:600;
  }
  .alerta-chip.opcion:hover{border-color:var(--warn);color:var(--warn);background:var(--warnl)}
  .alerta-chip.opcion.ya{opacity:.4;cursor:default}
  .alerta-chip.opcion.ya:hover{border-color:var(--line);color:var(--ink2);background:var(--card)}
  .sin-alertas{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:13px 15px;font-size:15px;color:var(--muted);
  }

  /* Deja de ser un círculo con un número suelto: ahora lleva su palabra
     («3 vencidos»), así que es una pastilla y ya no tiene que ser redonda.

     ⚠️ `justify-self:end` Y `width:max-content`, LAS DOS. En el computador
     esto vive dentro de una celda de tabla, y una caja de bloque en una celda
     de grilla se estira hasta llenarla: «debe 1» salía como una franja rosada
     de 250 px cruzando la fila del tutor. Con las dos puestas, la pastilla
     mide lo que dice y se apoya en la flecha.

     Y la usan LAS DOS CARAS DEL PADRÓN —los vencidos del paciente y lo que el
     tutor tiene sin cobrar—, que es la regla de siempre: las dos se ven igual.
     Antes la del tutor era un `.sello s-urge`, que es otra cosa parecida. */
  .tp-alerta{
    flex:none;justify-self:end;width:max-content;max-width:100%;
    height:23px;padding:0 10px;border-radius:999px;
    background:var(--alertl);color:var(--alert);
    font-size:12.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
    display:flex;align-items:center;justify-content:center;
  }

/* Un botón chico dentro de un campo: "traer la anamnesis anterior". */
  .mini-boton{
    align-self:flex-start;display:flex;align-items:center;gap:6px;
    background:none;border:0;color:var(--brand);
    font-size:15px;font-weight:600;padding:6px 0 0;
  }
  .mini-boton:hover{text-decoration:underline}

/* ══════════════ Los documentos: receta y certificados ═════════════════════

   Estas clases las usa el armador de documentos de pagina.js y no existían en
   esta hoja: la receta y los certificados salían sin ningún formato, como una
   pila de texto. Lo encontró revisar_pagina.py avisando de 31 clases sin
   estilo.

   La idea del dibujo es que se vea como el papel que va a ser: fondo blanco,
   márgenes generosos, letra un punto más chica que la de la aplicación y los
   rótulos en gris. Se ve igual en pantalla y al imprimirlo. */

  .doc{
    background:#FFF;color:#15232C;
    border:1px solid var(--line);border-radius:var(--r2);
    padding:22px 20px 24px;
    display:flex;flex-direction:column;gap:16px;
    font-size:13.5px;line-height:1.5;
    box-shadow:var(--som);
  }

  /* El encabezado: quién emite. En la receta va el médico, no la clínica —es
     lo que mira la farmacia—; en los certificados va la clínica. */
  .doc-cab{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;
           border-bottom:2px solid var(--brand)}
  .doc-cab-centro{align-items:center;text-align:center}
  .doc-marca{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--brandd)}
  .doc-emi{font-size:12px;color:var(--muted);line-height:1.4}

  .doc-tit{font-size:16px;font-weight:700;letter-spacing:-.015em;text-align:center}
  .doc-subtit{font-size:12.5px;color:var(--muted);text-align:center;margin-top:-10px}

  /* Los datos, en dos columnas: rótulo gris y valor. Si el valor viene vacío
     queda una raya para llenar a mano, que es lo que se hace en terreno. */
  .doc-bloque{display:flex;flex-direction:column;gap:8px}
  .doc-rot{
    font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:650;
  }
  /* ⚠️ EL MÍNIMO ES 200 px Y ESTÁ MEDIDO, no elegido. Con 150 px el papel
     recibía TRES columnas en cuanto medía más de 500, y eso pasaba justo en
     la franja de la tablet parada —entre 600 y 899 px de ventana, donde
     `#home` se topa en 640 y el papel queda de 596—: tres columnas de 165 px
     en las que cinco de los ocho datos se partían en dos renglones, con
     «andres.pino@ejemplo.cl» cortado a la mitad de la palabra. Un papel que
     se le muestra al tutor no puede verse quebrado según el aparato desde el
     que se mire.

     Medido el 11 de septiembre de 2026 en nueve anchos: con 200 px son dos
     columnas de 269 a 289 en esa franja, dos de 226 en el computador y una
     sola en el teléfono. Ningún dato se parte en ninguno. */
  .doc-grilla{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:6px 18px;
  }

  /* ⚠️ CUANDO EL PAPEL ES ANGOSTO, LA ETIQUETA SE PONE ENCIMA DEL VALOR.

     Etiqueta y valor van lado a lado, y con los dos largos —«Fecha de
     implantación · 14-03-2019»— no caben en media columna: el navegador parte
     el valor LETRA POR LETRA y queda una escalera de un carácter por renglón.
     Se vio primero en el teléfono y volvió a aparecer dentro del visor, que es
     angosto aunque la pantalla sea grande.

     Por eso la medida es del PAPEL y no de la ventana: `container-type` mide el
     recuadro que lo contiene. Una `@media` no habría servido acá — el visor es
     angosto en un monitor de 27 pulgadas. */
  .doc{container-type:inline-size}
  @container (max-width:420px){
    .doc-par{flex-direction:column;gap:0}
    .doc-et{font-size:11.5px}
  }
  .doc-par{display:flex;gap:6px;align-items:baseline;min-width:0}
  .doc-et{color:var(--muted);flex:none;font-size:12px}
  .doc-va{font-weight:600;min-width:0;word-break:break-word}

  /* ⚠️ UN PAR QUE OCUPA EL ANCHO ENTERO, para los de etiqueta larga y valor
     largo. En la rejilla de dos columnas, «Lugar de implantación · Cara
     lateral izquierda del cuello» no cabe en 150 px y el navegador lo parte
     LETRA POR LETRA: quedaba una escalera de una letra por renglón. Con
     `word-break:break-word` no basta cuando ni la palabra más corta cabe; lo
     que hace falta es más ancho. */
  .doc-par.ancho{grid-column:1 / -1}
  /* Lo que no se sabe no se inventa: queda la raya para escribirlo a mano. */
  .doc-blanco{
    display:inline-block;min-width:70px;
    border-bottom:1px dotted var(--faint);
  }

  .doc-parrafo{font-size:13.5px;line-height:1.6;text-align:justify}
  .doc-libre{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
  /* ⚠️ Va con `--line2` y no con `--bg`. Se apoyaba en el fondo, y desde que
     el fondo es blanco eso la dejaba invisible sobre la hoja del documento,
     que también es blanca. */
  .doc-nota{
    font-size:12px;color:var(--muted);line-height:1.5;
    background:var(--line2);border-radius:var(--r1);padding:10px 12px;
  }

  /* ⚠️ LAS ALERTAS DEL PACIENTE, EN EL PAPEL, TIENEN QUE LEERSE IMPRESAS EN
     BLANCO Y NEGRO. Por eso no es un recuadro de color: es un borde grueso al
     canto, que sobrevive a cualquier impresora. El color ámbar —«esto hay que
     mirarlo», el mismo de toda la aplicación— es un extra para la pantalla.
     Y el rótulo va en mayúsculas chicas porque en un papel lleno de datos hay
     que poder saltar a él sin leer el resto. */
  .doc-alertas{
    display:flex;flex-direction:column;gap:2px;
    border-left:3px solid var(--warn);padding:6px 0 6px 11px;
  }
  .doc-al-rot{
    font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--warn);
  }
  .doc-al-que{font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.4}

  /* El Rp. de la receta, que es donde empieza lo que se despacha. */
  .doc-rp{
    font-size:22px;font-weight:700;color:var(--brandd);
    line-height:1;letter-spacing:-.02em;
  }
  .doc-meds{display:flex;flex-direction:column;gap:12px}
  .doc-med{
    display:flex;flex-direction:column;gap:2px;
    padding-left:12px;border-left:2px solid var(--brandl);
  }
  .doc-mnom{font-size:15px;font-weight:650;letter-spacing:-.01em}
  .doc-minicio{font-size:12px;font-weight:500;color:var(--muted)}
  .doc-mdet{font-size:13.5px;color:var(--ink2);line-height:1.5}

  /* La caja que deja correr la tabla ancha dentro de la hoja. Ver el
     comentario largo de `docTabla()` en pagina.js. */
  .doc-tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .doc-tabla{width:100%;border-collapse:collapse;font-size:12.5px}
  /* Con la caja puesta, la cabecera ya no necesita partirse: prefiere
     ensanchar la tabla, que es lo que conserva las columnas alineadas. */
  .doc-tabla th{white-space:nowrap}
  .doc-tabla th{
    text-align:left;padding:7px 8px;border-bottom:1.5px solid var(--line);
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);font-weight:650;
  }
  .doc-tabla td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:top}
  /* OJO: `.doc-blanco` esta escrito para un <span> dentro de una linea, y por
     eso lleva `display:inline-block`. Aplicado a un <td> lo saca de la tabla:
     la celda vacia se encogia a 16 px y todas las de mas a la derecha se
     corrian. En el certificado internacional eso ponia la FECHA DE VACUNACION
     debajo de la columna LABORATORIO. Un papel que el SAG lee columna por
     columna no puede tener los datos corridos. */
  .doc-tabla td.doc-blanco{
    display:table-cell;min-width:0;border-bottom:1px solid var(--line2);
  }
  .doc-tabla tr:last-child td{border-bottom:0}
  /* …pero la raya para llenar a mano SI se queda, tambien en la ultima fila.
     Sin esto, la antirrabica —que es siempre la ultima— quedaba sin donde
     escribirle el N° de serie, justo el dato que el SAG mas mira. */
  .doc-tabla tr:last-child td.doc-blanco{border-bottom:1px dotted var(--faint)}

  .doc-fecha{font-size:13px;color:var(--ink2);text-align:right}

  /* El número de microchip. Grande, en letra de máquina y con los dígitos
     separados: es el único dato del papel que alguien copia a mano, y un
     dígito equivocado en quince apunta a otro animal. La letra de máquina
     además distingue el 0 de la O y el 1 de la l. */
  .doc-numerote{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:21px;font-weight:700;letter-spacing:.12em;
    text-align:center;padding:10px 8px;margin:2px 0 4px;
    border:1px solid #15232C;border-radius:6px;
  }

  /* Los totales del presupuesto. Pegados a la derecha y con los números en
     columna —`tabular-nums`— porque se leen comparando uno con otro. La
     última línea pesa más: es la que la persona busca con la vista. */
  .doc-totales{
    display:flex;flex-direction:column;gap:3px;align-items:flex-end;
    margin-top:10px;
  }
  .doc-tot{
    display:flex;justify-content:space-between;gap:24px;min-width:210px;
    font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums;
  }
  .doc-tot.grande{
    font-size:16px;font-weight:700;color:#15232C;
    border-top:1px solid #15232C;padding-top:6px;margin-top:4px;
  }

  /* La firma. La raya está y NO se rellena: en papel se firma a mano, y
     escribir el nombre en cursiva encima de la raya no es una firma. */
  .doc-firma{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    margin-top:22px;align-self:center;min-width:200px;
  }
  .doc-raya{width:200px;height:1px;background:#15232C;margin-bottom:6px}
  .doc-fnom{font-size:13.5px;font-weight:650}
  .doc-fdet{font-size:11.5px;color:var(--muted)}

  /* Las DOS firmas del consentimiento, una al lado de la otra: el tutor
     autoriza y el veterinario da fe. En un teléfono angosto se ponen una
     debajo de la otra, que es como salen igual al imprimir en carta. */
  .doc-firmas{
    display:flex;justify-content:space-around;align-items:flex-end;
    gap:20px;flex-wrap:wrap;margin-top:10px;
  }
  .doc-firmas .doc-firma{align-self:flex-end}

  /* El trazo del tutor. Se apoya en la raya —de ahí el margen negativo— para
     que se vea como una firma sobre la línea y no como un cuadro aparte. */
  .doc-firma-img{
    width:200px;height:auto;display:block;margin-bottom:-10px;
    mix-blend-mode:multiply;
  }

  /* ── La firma y el timbre del médico, estampados sobre la raya ──────────
     Se apoyan en la línea igual que el trazo del tutor: en el papel de verdad
     la firma cruza la raya y el timbre cae al lado, no en un recuadro aparte.

     ⚠️ EL ANCHO ES EL DE LA RAYA, 200 px, y nada se sale. Dejar que el timbre
     sobresalga corría la estampa hacia un lado y el papel quedaba torcido.

     ⚠️ `mix-blend-mode:multiply` ES LO QUE HACE DESAPARECER EL BLANCO de la
     foto del timbre. El timbre se marca sobre papel y ese papel llega blanco:
     sin esto, el fondo de la foto tapa la raya con un cuadro gris. Es lo mismo
     que ya hacía la firma del tutor. */
  .doc-estampa{
    width:200px;display:flex;align-items:flex-end;justify-content:center;
    gap:8px;margin-bottom:-10px;
  }
  .doc-estampa .doc-firma-img{
    width:auto;max-width:200px;max-height:62px;margin-bottom:0;
  }
  /* Con timbre al lado, la firma le hace espacio. Sola, usa el ancho entero. */
  .doc-estampa.dos .doc-firma-img{max-width:124px}
  .doc-timbre{
    width:auto;max-width:200px;max-height:70px;display:block;
    mix-blend-mode:multiply;
  }
  .doc-estampa.dos .doc-timbre{max-width:68px;max-height:62px}

  /* ── La tabla de un resultado de laboratorio ──────────────────────────
     El valor va en letra de máquina y alineado a la derecha: es lo único de
     este papel que se lee en columna, comparando un número con otro.
     Lo que se salió de rango se marca con COLOR **y** con la palabra ALTO o
     BAJO. Solo con color no sirve: esto se imprime en blanco y negro, y hay
     gente que no distingue el rojo. */
  .doc-tabla.res td.val{font-family:var(--code);text-align:right;font-weight:650}
  .doc-tabla.res td.marca-res{
    font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--alert);
    text-align:right;white-space:nowrap;
  }
  .doc-tabla.res tr.fuera td{background:#FCF1EF}
  .doc-tabla.res tr.fuera td.val{color:var(--alert)}
  .doc-texto{font-size:12.5px;line-height:1.55;color:#333;margin:2px 0 10px;text-align:justify}

  .doc-pie{
    border-top:1px solid var(--line);padding-top:10px;margin-top:4px;
    font-size:11px;color:var(--muted);text-align:center;line-height:1.5;
  }

  /* Los botones de abajo del documento: compartir, mandar, emitir. */
  .acciones-papel{display:flex;flex-direction:column;gap:9px}
  .acciones-papel .botones.par{margin:0}

/* Los medicamentos ya puestos en la receta que se está escribiendo. */
  .med-lista{display:flex;flex-direction:column;gap:8px}
  .med-item{
    display:flex;align-items:flex-start;gap:10px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:14px 12px;
  }
  .med-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .med-nom{font-size:15.5px;font-weight:650;letter-spacing:-.01em}
  .med-det{font-size:15px;color:var(--muted);line-height:1.4}
  .med-quitar{
    flex:none;width:30px;height:30px;border-radius:50%;
    border:1px solid var(--line);background:var(--card);color:var(--muted);
    font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
  }
  .med-quitar:hover{border-color:var(--alert);color:var(--alert);background:var(--alertl)}

/* ═══════════════════ La misma aplicación, en un computador ════════════════

   Nexvet Home nació para usarse de pie, con una mano, en el living de un
   desconocido: por eso todo lo de arriba es de teléfono y `#home` tiene un
   ancho máximo de 520 px. Eso sigue siendo verdad y no se toca.

   Pero el mismo veterinario, cuando llega a su casa en la noche a revisar los
   exámenes que quedaron pendientes, no lo hace en el teléfono: lo hace en el
   computador. Y en un monitor de 24 pulgadas la aplicación se veía como una
   columna angosta al medio con dos desiertos grises a los lados.

   LO QUE CAMBIA, Y ES UNA SOLA COSA: las cuatro pestañas de abajo se paran de
   canto y quedan de barra lateral a la izquierda. Nada más. Es la misma
   aplicación, las mismas cuatro secciones y el mismo código: no hay una
   "versión de escritorio" aparte que pueda quedar diciendo otra cosa que la
   del teléfono. Un botón nuevo aparece en los dos lados o en ninguno.

   POR QUÉ 900 px Y NO OTRO NÚMERO. Un iPad de 11" parado mide 834 px y un
   iPad de 12,9" parado mide 1024. Con el corte en 900, el iPad parado sigue
   con las pestañas abajo —que es como se toma una tablet, con los pulgares en
   el borde de abajo— y el iPad acostado o cualquier computador reciben la
   barra lateral. El teléfono acostado (844 px en un iPhone) tampoco cruza el
   corte, y eso está bien: nadie navega con barra lateral en un teléfono
   dado vuelta. */

/* Un escalón antes: tablet parada y teléfono acostado. Todavía no hay barra
   lateral, pero la columna deja de ser tan angosta y el texto respira. */
@media (min-width:600px) and (max-width:899px){
  #home{max-width:640px}
  .lienzo{padding:18px 22px 26px}
}

@media (min-width:900px){

  /* Dos columnas: el menú fijo a la izquierda, todo lo demás a la derecha.
     El menú se coloca a mano en la columna 1 y se le pide que abarque muchas
     filas; las que sobran quedan vacías y miden cero. Lo demás (la barra, la
     franja de "sin señal" y el lienzo) va a la columna 2 y se apila solo, en
     el orden en que viene escrito. Así la franja puede estar o no estar sin
     que haya que reacomodar nada. */
  #home{
    display:grid;
    /* ⚠️ 200 PX, Y NO 238. Bajó el 9 de septiembre de 2026.

       El menú de Home tiene CUATRO destinos. 238 px es el ancho que se copió
       de Nexvet Labs, que tiene doce vistas y perfiles por rol: allá el ancho
       se lo gana, acá dejaba 38 px de aire a la derecha de la palabra más
       larga («Pacientes») y mil píxeles de alto vacío debajo del cuarto botón.

       No baja más porque «Exámenes» con su globito al final necesita el
       espacio, y un menú que corta una palabra es peor que uno ancho. */
    grid-template-columns:200px minmax(0,1fr);
    /* TRES FILAS FIJAS Y NO AUTOMÁTICAS. La franja de "sin señal" está a veces
       y a veces no; con filas automáticas, el lienzo caía en la fila 2 o en la
       3 según el día y no había forma de decirle "tú ocupa lo que sobra". Con
       las tres declaradas, cada pieza tiene su fila escrita y la vacía mide
       cero cuando la franja no está. */
    grid-template-rows:auto auto 1fr;
    /* La aplicación entera ocupa el alto de la pantalla y no se mueve; lo que
       se desplaza es el lienzo por dentro. Es lo que permite que la barra
       lateral se quede quieta y que, con dos columnas, cada una baje por su
       cuenta. `dvh` es por las barras del navegador del móvil, que aparecen y
       desaparecen. */
    height:100vh;height:100dvh;overflow:hidden;
    /* DE BORDE A BORDE, COMO NEXVET LABS.

       Hasta el 5 de septiembre de 2026 la aplicación entera era una caja
       centrada de 1240 px (1400 en pantallas grandes). En un monitor normal
       eso dejaba una franja blanca a cada lado y la barra lateral flotando en
       el medio: se veía como una página web, no como una aplicación.

       El motivo original de ese tope era evitar que la aplicación saltara de
       lado al cambiar de pestaña, porque antes había un ancho para las
       pantallas de una columna y otro para las de dos. **Sin tope ese problema
       no puede ocurrir**: la barra lateral está pegada al borde izquierdo y no
       tiene de dónde moverse. Se arregla mejor quitando la causa que igualando
       los dos números.

       Lo que se topa ahora es el CONTENIDO, no la ventana —ver `.lienzo`—, que
       es exactamente lo que hace Labs con su `.wrap`. */
    max-width:none;
    padding-top:0;

    /* ══ EN EL COMPUTADOR TODO ES MÁS CHICO ═══════════════════════════════

       ⚠️ 16 PX ES LA MEDIDA DEL TELÉFONO, NO LA DEL COMPUTADOR. Esta
       aplicación se diseñó para usarse de pie, con una mano y a un brazo de
       distancia: ahí 16 px es lo correcto. En un monitor, a 60 cm y con el
       mouse, esos mismos 16 px se ven enormes — y al lado de Nexvet Labs, que
       usa 14, parecían dos productos distintos.

       Acá baja a 14,5: entre medio de los dos, porque Home igual se usa en
       tablet y con el dedo. Lo que NO baja son los blancos que se tocan: los
       botones y las filas de lista siguen midiendo lo que mide un dedo, por si
       el monitor es táctil.

       ⚠️ Los campos de texto SÍ pueden bajar acá y no en el teléfono: los 16 px
       de un `input` son lo que impide que el iPhone haga zoom solo al tocarlo.
       En un computador ese problema no existe.

     ⚠️ 14 PX, EXACTAMENTE LOS DE NEXVET LABS. Estuvo en 14,5 unas horas
     —«entre medio de los dos»— y al abrir las dos aplicaciones lado a lado ese
     medio píxel se notaba igual: se veían como dos productos distintos. Los
     dos se usan en el mismo monitor, así que el número tiene que ser el
     mismo. */
  /* ⚠️ Y SE QUEDA EN 14 AUNQUE TODO LO DEMÁS HAYA BAJADO. La bajada de escala
     del 12 de septiembre de 2026 —`diseno/escalar_home.py`— le pasó la tabla
     a las 259 medidas de esta hoja, y ésta habría quedado en 13. Es la única
     que no puede: es EL número de Labs, el que hace que las dos aplicaciones
     se vean del mismo porte abiertas lado a lado, que es de lo que se trata
     todo el cambio. En el teléfono ahora también son 14: una sola escala. */
    font-size:16px;
  }

  /* Los tamaños de teléfono que en un monitor se ven gigantes. Todo lo demás
     sale solo del `font-size` de arriba, porque está en `em` o hereda. */
  .barra h1{font-size:19px}
  .barra .sub{font-size:13.5px}
  .rotulo{font-size:12.5px;margin-top:22px}
  .tp-nombre{font-size:16px}
  .tp-avatar{width:38px;height:38px}
  .tt-nombre{font-size:16px}
  .tt-avatar{width:38px;height:38px;font-size:15px}
  .avatar-paciente{width:56px;height:56px}
  .nombre-paciente{font-size:21px}
  .dia-lista .nom,.visita .nom{font-size:15px}
  .dia-lista .det{font-size:13.5px}
  .kpi b{font-size:21px}
  .fc-nom{font-size:15px}
  .fc-val{font-size:15.5px}
  /* Los campos: en el monitor no hace falta el 16 px que evita el zoom del
     iPhone. Los blancos que se TOCAN no se achican (ver arriba). */
  .campo input,.campo select,.campo textarea,.ncampo input,.ncampo select,
  .buscador input{font-size:14px}
  .boton{font-size:15px}
  .pestanas button,.pestanas .nom-pest{font-size:15px}

  /* ---------------------------------------------------- la barra lateral */

  .pestanas{
    grid-column:1;
    /* Las tres filas de la derecha, de una sola vez: la barra lateral llega
       de arriba abajo sin depender de si hoy hay franja de "sin señal". */
    grid-row:1 / 4;
    position:static;bottom:auto;overflow-y:auto;
    display:flex;flex-direction:column;gap:3px;
    padding:16px 12px;padding-bottom:16px;
    border-top:0;border-right:1px solid var(--line);
  }

  /* ══ LA MARCA, EN LA BARRA OSCURA ═══════════════════════════════════════
     Se mudó del menú lateral a la barra de arriba, igual que en Nexvet Labs y
     por el mismo motivo: al plegar el menú, el nombre del producto
     desaparecía. En la barra está siempre entero, plegado o no.

     Va separada del título de la pantalla por una línea fina: son dos cosas
     distintas —en qué aplicación estás y en qué pantalla— y sin la línea se
     leen como una sola frase larga. */
  .barra-marca{
    display:flex;align-items:center;gap:6px;flex:none;
    padding-right:16px;margin-right:16px;
    border-right:1px solid rgba(255,255,255,.18);
  }
  .marca-lat{
    display:flex;align-items:center;gap:9px;flex:none;
    background:none;border:0;padding:0;color:var(--campo-tinta);
    font-family:inherit;text-align:left;
    padding:2px 12px 18px;
    /* 21 px, EL MISMO DE NEXVET LABS. Estaba en 15 y al lado de Labs se veía
       como un subtítulo en vez del nombre del producto: en la barra lateral
       esto es lo único que dice en qué aplicación está uno parado. */
    font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;
    /* El símbolo al lado del nombre, el mismo de la portada y de Labs: un
       signo igual con un visto. Estaba solo en la portada. */
    display:flex;align-items:center;gap:9px;
    /* Y el color va al revés de como estaba. La regla de la casa es que el
       color de marca lo lleva LA PALABRA DEL PRODUCTO —«Nexvet **Labs**»,
       «Nex**vet**» en la portada—; acá estaba teñido «Nexvet» y apagado
       «Home», o sea justo lo contrario que en Labs. */
    /* ⚠️ TINTA CLARA, PORQUE ESTO VIVE EN LA BARRA OSCURA. Decía
       `var(--ink)` —tinta negra— de cuando la marca estaba encima del menú
       lateral, que es blanco. Al mudarse a la barra oscura nadie la corrigió,
       y no se notó porque `#home button{color:inherit}` le estaba ganando y el
       texto salía blanco por accidente. El 10 de septiembre de 2026 esa regla
       dejó de pisar a las clases y «Nexvet» apareció en negro sobre azul
       oscuro: el error llevaba días escrito y recién ahí se vio. */
    color:var(--campo-tinta);
  }
  .marca-lat .marca-simbolo{width:24px;height:24px;flex:none;color:var(--campo-tinta)}
  .marca-lat .marca-txt{display:flex;flex-direction:column;line-height:1.15}
  .marca-lat .mt-nombre{white-space:nowrap}
  .marca-lat .mt-nombre span{color:var(--campo-tenue);font-weight:700}
  /* ⚠️ El nombre del médico va DEBAJO del nombre del producto y alineado con
     él, no con el símbolo: puesto bajo el símbolo queda colgando a la
     izquierda. Es lo mismo que hace Labs con la clínica. */
  .marca-lat small{
    display:block;font-size:12.5px;font-weight:400;letter-spacing:0;
    color:var(--campo-tenue);margin-top:1px;
  }
  .marca-lat:hover .marca-txt{opacity:.85}

  /* Plegar y desplegar. Va pegado a la marca y siempre en el mismo lugar: un
     control que se mueve cuando cambia lo que controla obliga a buscarlo cada
     vez. */
  .plegar{
    width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.14);border:0;border-radius:9px;color:var(--campo-tinta);
  }
  .plegar:hover{background:rgba(255,255,255,.26)}
  .plegar svg{width:19px;height:19px}

  /* El botón deja de ser ícono-arriba-nombre-abajo y pasa a ser una fila:
     ícono, nombre y, si hay algo esperando, el globito al final. La sección
     en la que uno está se marca con un fondo celeste, no con una rayita:
     de reojo se ve el bloque de color antes de leer la palabra. */
  .pestanas button{
    flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;
    padding:10px 12px;min-height:44px;margin-top:0;
    border-top:0;border-radius:var(--r2);
    font-size:15px;font-weight:600;letter-spacing:-.01em;
    text-align:left;
  }
  .pestanas button:hover{background:var(--line2)}
  .pestanas button[aria-current="true"]{
    background:var(--brandl);color:var(--brand);border-top-color:transparent;
  }
  .pestanas .nom-pest{flex:1;line-height:1.2;font-size:15px}
  /* En el teléfono el globito va montado sobre el ícono porque no hay ancho.
     Acá sobra, así que se pone al final de la fila, que se lee mejor. */
  .pestanas .globito{
    position:static;border:0;height:19px;min-width:19px;font-size:12.5px;
  }

  /* ------------------------------------------------ la barra y el cuerpo */

  .barra  {grid-column:2;grid-row:1}
  .franja {grid-column:2;grid-row:2}
  .lienzo {grid-column:2;grid-row:3}

  .barra{padding:22px 28px 20px}
  .barra h1{font-size:21px}
  .franja{padding:9px 28px}

  /* EL TOPE ESTÁ ACÁ, no en la ventana. En una sola columna el contenido se
     topa y queda PEGADO A LA IZQUIERDA, alineado con el título de la barra de
     arriba: lo que tiene que calzar es por dónde EMPIEZAN los dos, y calza.
     La barra oscura sí llega hasta el borde, porque es un encabezado y se ve
     mejor entera.

     ⚠️ Va pegado a la izquierda y NO centrado, aunque Labs centre el suyo. En
     Labs el título de la barra y el contenido no tienen por qué calzar —son
     una lista de exámenes debajo de un encabezado—; acá el encabezado dice de
     quién es la visita que se está mirando, así que si el contenido se centra,
     el nombre del paciente y su ficha dejan de empezar en la misma línea y se
     nota. */
  /* ⚠️ 1280, EL MISMO ANCHO QUE EL `.wrap` DE NEXVET LABS. Estaba en 1000 y
     en un monitor de 1600 quedaban 240 px muertos a la derecha: la aplicación
     se veía como una columna angosta pegada al menú, con media pantalla en
     blanco al lado. Los dos productos se usan en el mismo monitor y tienen que
     ocupar lo mismo. */
  .lienzo{
    padding:24px 28px 48px;
    max-width:1280px;
    overflow-y:auto;
  }

  /* ------------------------------------------------- lista y ficha juntas */

  /* La lista a la izquierda con un ancho fijo y lo abierto ocupando el resto.
     CADA COLUMNA SE DESPLAZA POR SU CUENTA: si bajaran juntas, buscar al
     paciente número cuarenta obligaría a perder de vista la ficha abierta,
     que es justo lo que estas dos columnas vinieron a arreglar. */
  /* ⚠️ 400 PX Y NO 340. Subió el 9 de septiembre de 2026, junto con las filas.
     Con los datos del paciente en UNA línea —«Gata mestiza · 2 años · Fernanda
     Ávila»— en 340 px se cortaba justo en el nombre del tutor, que es
     exactamente el dato por el que uno busca a un paciente. Los 60 px salen de
     la columna de la derecha, que después de este cambio va sobrada. */
  .lienzo.dos{
    display:grid;grid-template-columns:400px minmax(0,1fr);
    /* Con dos columnas no hay tope: las dos juntas ocupan lo que da la
       aplicación, y cada una ya tiene su propio ancho cómodo. */
    max-width:none;
    padding:0;gap:0;overflow:hidden;
  }
  .lienzo.dos > div{
    overflow-y:auto;min-width:0;
    display:flex;flex-direction:column;gap:12px;
  }
  .col-lista{padding:18px 16px 40px;border-right:1px solid var(--line)}
  /* La columna de detalle SIN tope: usa todo lo que sobra.

     Tuvo un tope de 1000 px por unas horas, puesto por miedo a que una línea
     de texto cruzara un monitor de 2560. El miedo estaba mal dirigido: las
     ÚNICAS pantallas que se parten en dos columnas son `pacientes → paciente`
     y `examenes → resultado` (ver DETALLE_DE en pagina.js) — «Hoy» salió el 10
     de septiembre de 2026, cuando pasó a ser un tablero de ancho completo—, y las dos son listas
     de tarjetas con la etiqueta a la izquierda y el dato a la derecha. Eso no
     se lee en renglones largos, se lee de un vistazo, y estirado se lee igual
     de bien. Lo que sí sufriría con el ancho —los papeles, la ficha clínica—
     NO se parte en dos: son pantallas hondas y las topa `.lienzo`.

     El tope dejaba una franja muerta a la derecha en cualquier monitor
     grande, que es exactamente el problema que se venía arreglando. */
  .col-detalle{padding:24px 26px 48px}

  /* ══ LAS LISTAS SE APRIETAN: DE TARJETA A FILA ═══════════════════════════

     9 de septiembre de 2026. En un monitor, cada paciente ocupaba una tarjeta
     de 105 px con borde, sombra y esquina redonda para decir cuatro líneas de
     texto: entraban CUATRO de nueve. Como fila mide 56 px y dice exactamente
     lo mismo — entran los nueve.

     ⚠️ ESTO VIVE SOLO EN EL BLOQUE DE 900 PX Y NO PUEDE SALIRSE DE ACÁ. En el
     teléfono la tarjeta grande es lo correcto: se usa de pie, con una mano y
     con el dedo, y los blancos que se tocan no se achican. Es la misma regla
     que ya tiene el `font-size` de más arriba.

     El motivo de fondo: borde, sombra, relleno y esquina redonda son cuatro
     maneras de decir «soy un objeto aparte». Gastadas en las cuarenta filas de
     una lista no destacan ninguna; guardadas, sirven para levantar la que de
     verdad importa. */
  .tarjeta-paciente,.tarjeta-tutor-lista{
    padding:11px 12px;gap:11px;border-radius:var(--r2);box-shadow:none;
  }
  .tp-avatar,.tt-avatar{width:32px;height:32px}
  .tp-nombre,.tt-nombre{font-size:15px;letter-spacing:-.01em}
  .tt-avatar{font-size:13.5px}
  .tp-cuerpo,.tt-cuerpo{gap:1px}

  /* Arriba: el nombre y, al lado, las alertas. */
  .tp-arriba,.tt-arriba{display:flex;align-items:center;gap:7px;min-width:0}
  /* ⚠️ Las alertas SIGUEN SIENDO UNA CAJA ÁMBAR y no texto suelto. Todo lo
     demás de esta lista se aplanó, pero «Muerde» es lo que evita una mordida:
     esa no es una señal de estado repetida, es la única que hay. */
  .tp-arriba .alertas.chicas{margin:0;flex-wrap:nowrap}

  /* Abajo: los tres datos en UNA línea, separados por puntos. Si no caben, se
     cortan con puntos suspensivos en vez de empujar la fila a dos renglones. */
  .tp-datos,.tt-datos{
    display:block;min-width:0;font-size:13.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .tp-datos > span,.tt-datos > span{
    display:inline;font-size:inherit;color:inherit;margin:0;
  }
  .tp-datos > span + span::before,.tt-datos > span + span::before{content:" · "}

  /* ══ EL PADRÓN SE LEE COMO UNA TABLA ═══════════════════════════════════

     Desde el 10 de septiembre de 2026 el padrón ocupa la pantalla entera (ver
     DETALLE_DE en pagina.js), y con 1240 px los cinco datos de cada paciente
     caben en columnas alineadas en vez de en dos renglones corridos. Eso es lo
     que deja comparar cuarenta pacientes de un vistazo, que es justamente lo
     que un teléfono no puede hacer.

     ⚠️ Los envoltorios `tp-cuerpo` y `tp-datos` pasan a `display:contents` para
     que sus hijos sean celdas de ESTA grilla. Sin eso quedan dos grillas
     anidadas y las columnas de una fila no calzan con las de la siguiente —
     que es exactamente lo que una tabla viene a arreglar. */
  .padron-cab,.tarjeta-paciente,.tarjeta-tutor-lista{
    display:grid;
    /* ⚠️ SON SIETE COLUMNAS, Y LA SEXTA —LA DE LA PASTILLA ROJA— VA EN UN
       ANCHO FIJO.

       Eran seis: la fila traía siete pedazos cuando había algo vencido y la
       flecha se caía a un segundo renglón. Se agregó la séptima en `auto`, y
       eso arregló el renglón pero trajo otra cosa peor: **cada fila es su
       propia grilla**, así que `auto` medía distinto en la fila que tenía
       pastilla y en la que no, y las cuatro columnas del medio quedaban
       corridas unas respecto de otras. La tabla se veía torcida.

       Con un ancho fijo las siete columnas miden lo mismo en todas las filas,
       tengan pastilla o no. Los 92 px son los que necesita la más larga
       —«1 por cobrar»— medida en el navegador. */
    grid-template-columns:32px minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.2fr) 92px 22px;
    align-items:center;gap:0 13px;
  }
  .padron-cab{
    display:grid;padding:4px 12px 2px;
    font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);font-weight:650;
  }
  .tp-cuerpo,.tt-cuerpo,.tp-datos,.tt-datos{display:contents}
  .tp-datos > span,.tt-datos > span{
    display:block;font-size:13.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  /* ⚠️ Y se va el punto entre medio. Los tres datos eran una sola línea
     separada por puntos; en columnas, un punto al principio de la celda de al
     lado se lee como un error de tipeo. */
  .tp-datos > span + span::before,.tt-datos > span + span::before{content:none}
  .tp-pie{margin-top:0}

  /* Al pasar el mouse: un fondo, no un borde de color. Con cuarenta filas
     pegadas, el borde azul saltaba de una a otra como un parpadeo. */
  .tarjeta-paciente:hover,.tarjeta-tutor-lista:hover{
    background:var(--line2);border-color:var(--line);
  }

  /* El examen, con las mismas medidas que las otras dos listas — es la regla
     de la casa desde que existen las tres. La tarjeta pasa de 13px 14px a
     10px 12px y pierde la sombra; el atrasado conserva su barra al canto. */
  .examen{padding:10px 12px;gap:6px;border-radius:var(--r2);box-shadow:none}
  .examen.atrasado{box-shadow:inset 3px 0 0 var(--alert)}
  .examen .paciente{font-size:15px;letter-spacing:-.01em}
  .examen .que{font-size:15px}
  .examen .quien{font-size:13.5px}

  /* ⚠️ LA VISITA DE «HOY» Y LA FILA DE LA AGENDA SE APRIETAN IGUAL, aunque su
     contenido no se haya reordenado. Si no, al cambiar de Pacientes a Hoy se
     nota el salto: son cuatro listas de la misma aplicación y desde que
     existen llevan las mismas medidas. Acá se toca SOLO el relleno y la
     sombra; la estructura del tablero de «Hoy» queda como está. */
  .visita,.dia-lista{border-radius:var(--r2);box-shadow:none}
  .visita .v-abrir{padding:10px 12px}
  .dia-lista{padding:10px 12px}
  .visita.tarde{box-shadow:inset 4px 0 0 var(--alert)}

  /* La ficha que está abierta, marcada en la lista. Es la única forma de saber
     cuál de las cuarenta es la que se está mirando al lado. */
  /* ⚠️ AHORA TAMBIÉN LLEVA FONDO, no solo la barra al canto. Con las tarjetas
     separadas por aire bastaba el borde; apretadas en una lista de filas
     pegadas, la barra de 3 px sola se pierde entre cuarenta bordes iguales.
     El fondo celeste se ve de reojo, sin leer. */
  .tarjeta-paciente.puesta,.tarjeta-tutor-lista.puesta,.visita.puesta{
    border-color:var(--brand);
    background:var(--brandl);
    box-shadow:inset 3px 0 0 var(--brand);
  }
  /* ⚠️ Si además está atrasada, manda el rojo. Esta regla va DESPUÉS de la de
     arriba a propósito: las dos pintan el mismo borde y gana la última. Cuál
     de las cuarenta estoy mirando ya lo sé —la tengo abierta al lado—; que
     esta se pasó de hora, no. */
  .visita.tarde.puesta{
    border-color:var(--alert);
    box-shadow:inset 4px 0 0 var(--alert);
  }

  /* El aviso flotante se iba al centro de la pantalla y quedaba montado sobre
     la barra lateral. Acá se va a la esquina de abajo a la derecha, y sube en
     línea recta en vez de subir "desde el centro". */
  .aviso{
    left:auto;right:28px;bottom:24px;transform:none;
    width:min(380px,calc(100% - 56px));
  }
  @media (prefers-reduced-motion:no-preference){
    .aviso{animation:asoma-pc .2s ease-out}
    @keyframes asoma-pc{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  }

  /* ⚠️ ACÁ HABÍA UN `.tarjeta-paciente:hover{box-shadow:var(--som)}` y se
     quitó el 9 de septiembre de 2026. Al pasar de tarjeta a fila, una sombra
     que aparece bajo el cursor levanta la fila del plano y hace saltar a las
     vecinas. El «pasar por encima» ahora lo dice el fondo, más arriba. */
}

/* En un monitor grande, dejar media pantalla vacía no es aire: es desperdicio.
   Labs hace lo mismo en dos escalones (780 → 1100 → 1280), y por eso en un
   monitor ancho se ven más exámenes de una vez sin que nada se apriete.

   ⚠️ ESTE BLOQUE VA DESPUÉS DEL DE 900 Y FUERA DE ÉL, no adentro. Al escribirlo
   la primera vez quedó metido en medio del de 900: eso cerró aquel bloque
   antes de tiempo y dejó la barra lateral y las dos columnas dentro de este.
   Resultado: en un monitor de 1440 px —o sea, casi todos— no se aplicaba nada
   y la pantalla se caía al diseño de teléfono, con el encabezado azul metido
   dentro de una columna angosta. Se vio en la primera captura y se arregló. */
@media (min-width:1500px){
  /* ⚠️ ACÁ HABÍA UN `.lienzo{max-width:1440px}` Y NUNCA LLEGÓ A APLICARSE.
     El bloque de 900 escribe `#home .lienzo{…}`, que lleva un ID y le gana a
     una regla de clase sin importar el orden: el contenido se topó siempre en
     1.280, también en un monitor grande. Se saca la línea muerta en vez de
     dejarla ahí pareciendo que hace algo. Subirlo a 1.440 es una decisión de
     diseño aparte —hay que mirar antes si el título de la barra de arriba
     sigue empezando en la misma línea que el contenido— y no se toma de paso.
     Anotado en CONTINUAR-HOME.md 57. */
  .lienzo.dos{grid-template-columns:380px minmax(0,1fr)}
}

/* En un monitor ancho la lista también crece. No es solo rellenar: con 440 px
   la dirección de la visita cabe entera en una línea, y esa es la que se lee
   para saber si conviene tomar la siguiente. */
@media (min-width:1900px){
  .lienzo.dos{grid-template-columns:440px minmax(0,1fr)}
}

/* ═══════════════════ Cuando el papel se imprime de verdad ═════════════════

   El botón "Imprimir o guardar en PDF" llama a window.print(). Sin esto, lo
   que saldría por la impresora sería la aplicación entera: el encabezado
   azul, el menú, los botones y el documento perdido en el medio.

   POR QUÉ CON `visibility` Y NO CON `display:none`. Esconder cada pieza por
   su nombre obliga a acordarse de agregar acá cada pantalla nueva, y el día
   que alguien lo olvide el papel sale con basura encima. Con `visibility` se
   apaga TODO y se vuelve a encender solo el documento y lo que lleva adentro:
   una pantalla nueva no puede colarse porque nunca se enciende.

   `visibility:hidden` además deja el hueco donde estaba el elemento, y por eso
   el documento se saca del flujo con `position:absolute`: si no, saldría una
   primera hoja en blanco del alto de la aplicación. */

@media print {
  /* ⚠️ EN EL PAPEL NO HAY DÓNDE CORRERSE: la caja de la tabla desaparece y la
     cabecera vuelve a poder partirse si hace falta. Una hoja carta tiene
     ancho de sobra para las siete columnas del SAG; el problema era solo de
     la pantalla. */
  .doc-tabla-caja{overflow:visible!important;max-width:none!important}
  .doc-tabla th{white-space:normal!important}
  html, body { background:#FFF !important; }

  body * { visibility:hidden !important; }
  .doc, .doc * { visibility:visible !important; }

  .doc{
    position:absolute; left:0; top:0; width:100%;
    margin:0; padding:0; border:0; border-radius:0; box-shadow:none;
    font-size:11pt;
  }

  /* LA HOJA ES MUCHO MÁS ANCHA QUE EL TELÉFONO, y eso rompía el papel: la
     grilla de datos está escrita como `minmax(150px, 1fr)` para que en el
     teléfono quepan una o dos columnas, pero en una carta de 180 mm útiles
     entraban CUATRO de 150 px, tan angostas que los datos se partían en dos
     ("Nombre tutor Diego / Barra", "+56 9 7788 / 1100"). Un teléfono cortado
     así es ilegible y un microchip cortado así es un error.
     En papel son dos columnas y punto. */
  .doc-grilla{ grid-template-columns:repeat(2,1fr) !important; gap:5px 30px; }
  .doc-par.ancho{ grid-column:1 / -1 !important; }
  .doc{ gap:13px; }
  .doc-parrafo{ margin:0; }

  /* Una tabla o un bloque de datos partido en dos hojas es ilegible, y un
     certificado que firma un médico no puede quedar con la firma sola en la
     página siguiente. */
  .doc-tabla, .doc-bloque, .doc-med, .doc-firma { break-inside:avoid; }
  .doc-tabla thead { display:table-header-group; }

  /* El pie de la clínica va abajo de todo, no flotando a media hoja. */
  .doc-pie { break-before:avoid; }

  /* ⚠️ EL VISOR SE DESHACE AL IMPRIMIR. El documento vive dentro del marco,
     que tiene alto máximo y `overflow:hidden`: sin esto, la impresión salía
     cortada en la primera página y el resto no aparecía en ninguna parte. Y el
     velo, que es `position:fixed`, arrastraba su fondo oscuro al papel. */
  .velo{
    position:static !important; inset:auto !important;
    background:none !important; padding:0 !important; display:block !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .marco{
    max-width:none !important; max-height:none !important;
    box-shadow:none !important; overflow:visible !important; display:block !important;
    border-radius:0 !important; background:#FFF !important;
  }
  .visor-cuerpo{ overflow:visible !important; display:block !important; }
  .visor-hoja{ padding:0 !important; }

  @page { size:letter; margin:16mm; }
}

/* «(opcional)» al lado de una etiqueta. Más chico y tenue que la etiqueta,
   porque es una aclaración y no parte del nombre del campo. */
.campo label .opcional{font-weight:400;color:var(--muted)}

/* ══ LOS NÚMEROS DEL MES ═══════════════════════════════════════════════════

   Cuatro cifras arriba y un gráfico de barras abajo. Las barras son `div` y
   no una librería de gráficos: esta aplicación tiene que abrir sin señal, y
   una librería que no llega deja la pantalla en blanco justo cuando se está
   mirando. */

/* Las cuatro cifras. Dos por fila en el teléfono: cuatro no caben sin que el
   número se achique tanto que deje de ser lo primero que se ve. */
#home .kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
#home .kpi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:13px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--som);
}
#home .kpi b{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
#home .kpi span{font-size:15px;color:var(--muted)}
@media(min-width:520px){ #home .kpis{grid-template-columns:repeat(4,1fr)} }

/* El gráfico. Se desplaza de lado si hay muchos meses, en vez de apretarlos:
   una barra de 6 píxeles no dice nada. */
#home .grafico-meses{
  display:flex;gap:7px;align-items:flex-end;
  overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
}
#home .grafico-meses::-webkit-scrollbar{display:none}
/* ⚠️ SE LLAMA `mes-barra` Y NO `barra`, Y ESO NO ES UN CAPRICHO. Se llamó
   `barra` en la primera versión y le pisó el ENCABEZADO de la aplicación, que
   ya se llamaba así: `#home .barra` gana en especificidad sobre `.barra`, así
   que el encabezado se quedó sin su fondo oscuro, se puso en columna y creció
   a 302 px. La barra de arriba se veía fantasma en TODAS las pantallas y no
   había ningún error en ninguna parte.

   Es el mismo error que Nexvet Core (`CLAUDE.md`): la hoja de estilos es un
   solo espacio de nombres, igual que el JavaScript. Dos cosas distintas no
   pueden llamarse igual. */
#home .mes-barra{
  flex:1 0 52px;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:0;padding:8px 2px;border-radius:var(--r1);
}
#home .mes-barra .b-valor{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* La tira es el alto completo y la barra de adentro crece desde abajo. Sin la
   tira, barras de distinto alto no quedarían alineadas por el pie. */
#home .mes-barra .b-tira{
  width:100%;height:88px;display:flex;align-items:flex-end;
  background:var(--line2);border-radius:5px;overflow:hidden;
}
/* ⚠️ La barra se apaga con OPACIDAD y no con un color claro propio. Con
   `--brandl` —el celeste muy claro— las barras no elegidas eran fantasmas
   sobre el gris del fondo y el gráfico no se leía. Con opacidad el color sale
   siempre del de la paleta, así que sirve igual en rosa, ciruela o índigo sin
   tener que inventar un tono apagado para cada una. */
#home .mes-barra .b-tira i{width:100%;background:var(--brand);opacity:.32;border-radius:5px}
#home .mes-barra .b-mes{font-size:13px;color:var(--muted);text-transform:capitalize}
#home .mes-barra.puesta .b-tira i{opacity:1}
#home .mes-barra.puesta .b-valor,#home .mes-barra.puesta .b-mes{color:var(--brandd);font-weight:650}
#home .mes-barra:hover .b-tira i{opacity:.6}

/* ══ QUIÉN ENTRA A ESTA CLÍNICA ═══════════════════════════════════════════
   Una tarjeta por persona, con la misma forma que el bloque de un laboratorio
   —son la misma cosa: varios campos que hay que poder separar de un vistazo—.
   ⚠️ No se reusa `.bloque-lab` aunque se vea igual: una clase que dice «lab»
   puesta en las personas es la primera mitad del error que este proyecto ya
   pagó dos veces (`.hito` y `.papel`, que ya eran otra cosa). */
#home .pers{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:14px 14px 4px;margin-bottom:12px;box-shadow:var(--som);
}
#home .pers.apagado{opacity:.62;border-style:dashed}
#home .pers-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
/* ⚠️ El correo va con la monoespaciada porque ES UN DATO —es la regla de
   `--dato`— y además se parte por cualquier lado: un correo largo en un
   teléfono de 360 px arrastraría la tarjeta entera si no. */
#home .pers-cab b{
  font-family:var(--code);font-size:15px;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
#home .pers-yo{
  flex:none;background:var(--brand);color:#fff;border-radius:999px;
  padding:2px 10px;font-size:12.5px;font-weight:700;
}
#home .pers-sub{
  color:var(--muted);font-size:13.5px;margin:0 0 10px;
}
/* El enlace para poner la contraseña. Se ve una vez y hay que poder copiarlo
   entero, así que se parte y no se corta con puntos suspensivos. */
#home .enlace-clave{
  display:block;margin:6px 0;font-family:var(--code);font-size:12.5px;
  overflow-wrap:anywhere;color:var(--ink);
}

/* Cada laboratorio, en su propio bloque. Sin el bloque, cuatro campos seguidos
   por cuatro laboratorios son dieciséis cajas iguales y no se sabe dónde
   empieza cada uno. */
#home .bloque-lab{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  padding:17px 14px 4px;margin-bottom:12px;box-shadow:var(--som);
}
#home .lab-cab{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:10px;
}
#home .lab-cab b{font-size:16px;letter-spacing:-.01em}

/* El botón de dictar, al lado de la etiqueta del campo. Chico y en la esquina:
   es una ayuda, no la forma principal de escribir. */
#home .campo label{display:flex;align-items:center;justify-content:space-between;gap:8px}
#home .voz{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  background:var(--brandl);color:var(--brandd);border:0;border-radius:999px;
  padding:5px 11px;font-size:13.5px;font-weight:650;font-family:inherit;
}
#home .voz:hover{background:var(--brand);color:#fff}
/* Escuchando: rojo y latiendo, para que no quede prendido sin que nadie lo note. */
#home .voz.oyendo{background:var(--alertl);color:var(--alert);animation:oye 1.6s ease-in-out infinite}
@keyframes oye{0%,100%{opacity:1}50%{opacity:.55}}

/* ══ LA BARRA DE DICTAR LA FICHA ═══════════════════════════════════════════

   El micrófono de cada campo sirve para corregir una línea; esta barra sirve
   para escribir la ficha completa de corrido, que es lo que se hace en la casa
   del tutor. Apagada es un botón; encendida se abre en los cinco pedazos y lo
   que más se ve es que está ESCUCHANDO — eso hay que poder mirarlo de reojo
   desde el otro lado del living, no leerlo. */
#home .dic-barra{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 12px;border-radius:var(--r2);
  background:var(--card);border:1px solid var(--line);
}
#home .dic-barra.oyendo{border-color:var(--brand);background:var(--brandl)}
#home .dic-barra > .boton{width:auto;flex:none}
#home .dic-partir{min-height:44px;padding:10px 16px}
#home .dic-pista{margin:0;flex:1;min-width:200px;max-width:64ch}

#home .dic-viva{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:15px;font-weight:700;color:var(--brandd);letter-spacing:-.01em;
}
#home .dic-viva .ic{color:var(--brand)}
@media (prefers-reduced-motion:no-preference){
  #home .dic-barra.oyendo .dic-viva .ic{animation:oye 1.6s ease-in-out infinite}
}

#home .dic-partes{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
/* ⚠️ 40 px de alto y no 44: son cinco seguidos y van adentro de una barra que
   no puede empujar la ficha hacia abajo. Se toca la caja entera, no la
   palabra, así que el pulgar tiene de dónde agarrarse igual. */
#home .dic-parte{
  min-height:40px;padding:8px 13px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink2);
  font:inherit;font-size:15px;font-weight:650;letter-spacing:-.01em;
}
#home .dic-parte:hover{border-color:var(--brand);color:var(--brand)}
#home .dic-parte.puesta{background:var(--brand);border-color:var(--brand);color:#FFF}
#home .dic-listo{flex:none}

/* Dos campos cortos en una fila: «cuánto queda» y su unidad, o el mínimo y la
   fecha de vencimiento. Cada uno solo en su línea desperdicia media pantalla. */
#home .fdos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#home .fdos .campo{margin-bottom:0}

/* ══ EL ELEGIDOR DE VISTA DE LA AGENDA ═════════════════════════════════════
   Tres botones pegados. Son <button> con `aria-pressed`, no <div> con clase:
   quien usa lector de pantalla tiene que oír cuál está puesta, y con teclado
   tiene que poder cambiarla. */
#home .segmentado{
  display:flex;gap:0;background:var(--line2);border-radius:999px;
  padding:3px;margin-bottom:18px;
}
#home .seg{
  flex:1;min-height:40px;border:0;background:none;border-radius:999px;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink2);
}
#home .seg.puesta{background:var(--card);color:var(--brandd);box-shadow:var(--som)}
#home .seg:hover:not(.puesta){color:var(--ink)}

/* Las flechas para correr un día o una semana. El nombre al medio y los dos
   blancos de 44 px a los lados, que es lo que pide un dedo. */
#home .paso-dia{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
#home .paso-dia b{
  flex:1;text-align:center;font-size:16px;font-weight:650;letter-spacing:-.015em;
}
#home .paso-dia button{
  width:44px;height:44px;flex:none;border:1px solid var(--line);
  background:var(--card);border-radius:50%;font-size:19px;color:var(--ink2);
  line-height:1;
}
#home .paso-dia button:hover{border-color:var(--brand);color:var(--brand)}

/* Cada día de la semana. Los vacíos se dibujan igual, apagados: en una semana
   lo que uno viene a ver es dónde están los huecos. */
#home .dia-semana{margin-bottom:20px}
/* ⚠️ El día libre se dibuja igual pero OCUPA POCO. Con el mismo margen que un
   día lleno, una semana con cinco días libres eran cinco pantallas de nada
   entre medio, y había que desplazarse mucho para ver dos días con visitas.
   Se ve que está libre y no estorba. */
#home .dia-semana.vacio{opacity:.5;margin-bottom:2px}
#home .dia-semana.vacio .ds-cabeza{padding-bottom:2px}
#home .ds-cabeza{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;padding:0 2px 8px;text-align:left;color:inherit;
}
#home .ds-cabeza b{font-size:15px;font-weight:700;letter-spacing:.01em}
#home .ds-cabeza span{font-size:15px;color:var(--muted)}
#home .dia-semana.hoy .ds-cabeza b{color:var(--brandd)}
#home .dia-semana.hoy .ds-cabeza b::after{
  content:" · hoy";color:var(--brand);font-weight:600;
}

/* Los filtros del catálogo. Se ENVUELVEN, nunca se cortan: una pastilla a
   medias es un filtro que no se ve, y un filtro que no se ve no existe. */
#home .chips-filtro{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
#home .chip-f{
  min-height:38px;padding:8px 15px;border-radius:999px;font:inherit;font-size:15px;
  font-weight:600;border:1.5px solid var(--line);background:var(--card);color:var(--ink2);
}
#home .chip-f.puesta{border-color:var(--brand);background:var(--brandl);color:var(--brandd)}
#home .chip-f:hover:not(.puesta){border-color:var(--brand)}

/* Un ítem apagado del catálogo: sigue estando, pero se ve que no se ofrece. */
#home .bloque-lab.apagado{opacity:.62;border-style:dashed}

/* ── Un correo que se le escribió al tutor ───────────────────────────────
   Se lee como una carta guardada: arriba de qué era y cuándo, y abajo lo que
   decía, con los renglones tal como se escribieron. El texto va en `pre-wrap`
   porque el veterinario lo escribió en párrafos y así lo leyó el tutor. */
#home .correo-hecho{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
  padding:14px 16px;box-shadow:var(--som);display:flex;flex-direction:column;gap:6px;
}
#home .ch-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#home .ch-asunto{font-size:15.5px;font-weight:650;letter-spacing:-.01em;min-width:0}
#home .ch-cuando{font-size:13.5px;color:var(--muted);flex:none}
#home .ch-para{
  display:flex;align-items:center;gap:6px;font-size:15px;color:var(--muted);
}
#home .ch-texto{
  font-size:15px;line-height:1.55;color:var(--ink2);white-space:pre-wrap;
  border-top:1px solid var(--line);padding-top:8px;
}

/* Una opción apagada dentro de un menú de contacto —«WhatsApp» cuando el
   teléfono del tutor no sirve para eso—. Sigue en la lista, para que se vea
   que existe y que lo que falta es el número; el motivo va en el globito. */
#home .mas-op.apagado{color:var(--muted);cursor:default}
#home .mas-op.apagado:hover{background:transparent}

/* Una línea del catálogo, cerrada. Se lee de un vistazo qué es y a cuánto;
   se toca para abrirla y editarla. */
#home .fila-cat{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r3);padding:17px 16px;box-shadow:var(--som);color:inherit;
}
#home .fila-cat:hover{border-color:var(--brand)}
#home .fila-cat.apagado{opacity:.6;border-style:dashed}
#home .fc-izq{display:flex;flex-direction:column;gap:2px;min-width:0}
#home .fc-nom{font-size:16px;font-weight:650;letter-spacing:-.01em}
#home .fc-det{font-size:15px;color:var(--muted)}
#home .fc-val{
  font-size:16px;font-weight:700;flex:none;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* Un número que la aplicación calculó sola —el margen, el precio por ml—.
   Se distingue de lo que uno escribió: fondo tenue y el ícono al lado, para
   que nadie lo confunda con una casilla que se pueda editar. */
#home .dato-calc{
  display:flex;align-items:center;gap:8px;margin:8px 0 2px;
  background:var(--line2);border-radius:var(--r2);padding:9px 11px;
  font-size:15px;color:var(--ink2);line-height:1.4;
}
#home .dato-calc b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ══ LAS MARCAS DE UNA PLANTILLA ═══════════════════════════════════════════
   La lista de {paciente}, {tutor}… Van en letra de máquina porque hay que
   copiarlas EXACTAS —con las llaves— y una letra distinta ayuda a no
   confundir una ele con un uno. */
#home .marcas{display:flex;flex-direction:column;gap:4px;margin:4px 0 2px}
#home .marca-p{font-size:13.5px;color:var(--muted);line-height:1.4}
/* ══ LOS ARCHIVOS DE LA FICHA ══════════════════════════════════════════════
   Una fila por archivo: el ícono dice de un vistazo si es foto o PDF, el
   nombre manda, y el peso y la fecha van abajo en gris. La cruz de borrar se
   separa del resto de la fila —es su propio botón— para que tocar el archivo
   lo ABRA y nunca lo borre por error. */
#home .archivo{
  display:flex;align-items:center;gap:4px;margin-bottom:6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
}
#home .ar-abrir{
  display:flex;align-items:center;gap:11px;flex:1;min-width:0;
  padding:11px 4px 11px 12px;color:inherit;text-decoration:none;
}
#home .ar-abrir:hover .ar-nom{color:var(--brandd);text-decoration:underline}
#home .ar-ic{
  width:36px;height:36px;flex:none;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
}
/* Los dos colores son los de la marca, no una paleta nueva: el celeste claro
   para las fotos y el gris azulado para los PDF. El verde no se usa acá —
   significa «confirmado» y esto no confirma nada. */
#home .ar-ic.foto{background:var(--brandl);color:var(--brandd)}
#home .ar-ic.pdf{background:var(--line2);color:var(--ink2)}
#home .ar-cuerpo{display:flex;flex-direction:column;gap:1px;min-width:0}
#home .ar-nom{
  font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#home .ar-det{font-size:13.5px;color:var(--muted)}
#home .ar-quitar{
  width:44px;height:44px;flex:none;background:none;border:0;
  color:var(--faint);font-size:16px;border-radius:var(--r2);
}
#home .ar-quitar:hover{color:var(--alert);background:var(--alertl)}

/* «Usar ésta como foto del paciente». Va al lado de la cruz de borrar y con
   la misma medida: son los dos botones de dibujo de la fila.
   ⚠️ Encendido cuando YA es la foto —ahí el mismo botón la saca—, así que
   nunca desaparece y la fila no cambia de forma. */
#home .ar-foto{
  width:44px;height:44px;flex:none;background:none;border:0;
  color:var(--faint);border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
}
#home .ar-foto:hover{color:var(--brand);background:var(--brandl)}
#home .ar-foto.es{color:var(--brand);background:var(--brandl)}

/* Un número al lado de un rótulo: «Archivos 3». */
/* ══ EMITIR UN DOCUMENTO, DESDE LA FICHA ═══════════════════════════════════
   Siete botones chicos en rejilla, uno por tipo de papel. Antes acá había un
   solo botón que llevaba a otra pantalla a elegir: dos pasos para algo que se
   hace de pie y sabiendo de antemano qué se va a emitir.

   Se ven distintos de las tarjetas grandes de la pantalla de Documentos a
   propósito: acá son un atajo dentro de una ficha larga, no el asunto
   principal de la pantalla. */
#home .emitir{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:6px;margin-bottom:10px;
}
#home .emitir-uno{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:10px 11px;text-align:left;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
}
#home .emitir-uno:hover{border-color:var(--brand);background:var(--brandl)}
#home .e-ic{
  width:28px;height:28px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ic-tiempo-l);color:var(--ic-tiempo);
}
#home .emitir-uno:hover .e-ic{background:var(--card)}
#home .e-tit{font-size:15px;font-weight:600;line-height:1.25}

/* ══ EL VISOR, POR ENCIMA ══════════════════════════════════════════════════

   Traído de Nexvet Labs, donde ya resolvió lo mismo: antes cada radiografía
   abría una pestaña nueva del navegador. Ver el comentario largo de
   `pintarVisor()` en pagina.js.

   El velo va DESENFOCADO. No es adorno: con la ficha del paciente detrás, esa
   lista sigue siendo texto legible y compite con lo que se acaba de abrir.
   Desenfocada deja de competir y el ojo va donde tiene que ir. */
/* ⚠️ CON EL VISOR ABIERTO EL FONDO QUEDA QUIETO, Y EN SU SITIO.

   `overflow:hidden` a secas trababa el fondo pero lo mandaba arriba de todo:
   al taparle el desplazamiento, el navegador no tiene dónde poner la página
   corrida. `position:fixed` con un `top` negativo la deja exactamente donde
   estaba; el JavaScript pone ese `top` y lo devuelve al cerrar
   (`trabarElFondo()` en pagina.js). Las dos mitades tienen que ir juntas. */
html.con-visor{overflow:hidden}
html.con-visor body{position:fixed;width:100%;overflow:hidden}

#home .velo{
  position:fixed;inset:0;z-index:80;
  background:rgba(10,25,34,.55);
  -webkit-backdrop-filter:blur(6px) saturate(.9);
  backdrop-filter:blur(6px) saturate(.9);
  display:grid;place-items:center;padding:14px;
}
/* ⚠️ UN SOLO FONDO PARA TODOS LOS VISORES, Y ES OSCURO.

   Había dos: blanco para los documentos y negro para las imágenes. El negro
   estaba bien fundado —una radiografía se lee por sus grises y el blanco de al
   lado le sube el brillo aparente— pero tener dos hacía que la misma acción se
   viera de dos maneras según lo que se abriera, y eso se lee como que son dos
   cosas distintas.

   Se estandarizó en el oscuro y no en el claro, para no perder lo de las
   radiografías. Adentro, el documento y el PDF siguen siendo hojas blancas
   sobre ese fondo: es exactamente como se ve un PDF en cualquier visor, y el
   marco oscuro alrededor hace que la hoja se lea como una hoja. */
#home .marco{
  background:#0C1418;border-radius:var(--r3);
  width:100%;max-width:640px;max-height:calc(100% - 8px);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.30);
}
/* ══ LA LUPA ═══════════════════════════════════════════════════════════════

   Reusa el velo del visor —es la misma idea: una capa encima de todo— pero el
   marco va en claro y no en oscuro. El marco oscuro existe porque adentro se
   miran radiografías; acá adentro se lee una lista, y una lista se lee en
   papel blanco.

   ⚠️ ARRIBA Y NO AL MEDIO. El velo centra a sus hijos, y un buscador centrado
   salta de lugar en cuanto la lista de resultados crece o se achica: uno
   escribe una letra más y la caja donde está escribiendo se mueve sola. */
#home .velo-lupa{align-items:start;padding-top:min(11vh,90px)}
#home .marco.lupa-marco{
  background:var(--card);max-width:560px;
  box-shadow:0 24px 60px rgba(10,25,34,.30);
}
#home .lupa-caja{
  flex:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:2px 8px 2px 14px;
}
#home .lupa-caja input{padding:15px 0;font-size:16px}
#home .lupa-cerrar{
  flex:none;width:34px;height:34px;border-radius:50%;border:0;
  background:none;color:var(--muted);font-size:16px;line-height:1;
}
#home .lupa-cerrar:hover{background:var(--line2);color:var(--ink)}

#home .lupa-res{overflow-y:auto;padding:8px;display:flex;flex-direction:column}
#home .lupa-rot{
  padding:12px 8px 5px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
#home .lupa-rot:first-child{padding-top:6px}
/* Cada resultado: el dibujo o el avatar, el nombre, y a la derecha dónde vive
   —«en Tu cuenta»—, que es lo que de a poco enseña dónde estaba la cosa. */
#home .lupa-op{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  min-height:46px;padding:8px 10px;border:0;border-radius:var(--r2);
  background:transparent;color:var(--ink);font:inherit;
}
#home .lupa-op:hover{background:var(--brandl)}
#home .lupa-op > .ic{color:var(--muted);flex:none}
#home .lupa-op .lo-avatar{
  width:28px;height:28px;flex:none;font-size:12.5px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
#home .lo-nom{font-size:15.5px;font-weight:650;letter-spacing:-.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home .lo-det{
  margin-left:auto;flex:none;padding-left:12px;
  font-size:13.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48%;
}
#home .lupa-nada{margin:0;padding:18px 12px;font-size:15px;color:var(--muted);line-height:1.5}

#home .visor-cab{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:16px 8px 13px 16px;border-bottom:1px solid rgba(255,255,255,.14);
}
#home .visor-cab h3{
  margin:0;flex:1;min-width:0;font-size:16px;font-weight:650;
  letter-spacing:-.01em;color:#FFF;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#home .visor-cerrar{
  width:40px;height:40px;flex:none;background:none;border:0;
  color:#C8D8DF;font-size:17px;border-radius:var(--r2);
}
#home .visor-cerrar:hover{background:rgba(255,255,255,.14);color:#FFF}

/* El cuerpo es lo único que se desplaza: la cabecera y los botones se quedan
   quietos, para que cerrar y descargar estén siempre a mano por larga que sea
   la receta. */
#home .visor-cuerpo{
  flex:1;min-height:0;overflow-y:auto;display:flex;background:#0C1418;
}
/* La hoja blanca respirando sobre el fondo oscuro. */
#home .visor-hoja{flex:1;padding:12px}
#home .visor-hoja .doc{box-shadow:none;border:0;margin:0;border-radius:6px}
#home .visor-pdf{flex:1;width:100%;min-height:60vh;border:0;background:#fff}
#home .visor-img{
  width:100%;height:auto;margin:auto;display:block;object-fit:contain;
}
#home .visor-pie{
  flex:none;padding:10px 12px;border-top:1px solid rgba(255,255,255,.14);
  background:#0C1418;
}
/* Los botones del pie, sobre el fondo oscuro. */
#home .visor-pie .boton.suave{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#E7EEF1;
}
#home .visor-pie .boton.suave:hover{
  background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.50);color:#FFF;
}
#home .visor-pie .acciones-papel{margin:0}

/* ══ LA VUELTA GUIADA ══════════════════════════════════════════════════════

   ⚠️ NO USA `.velo`. El velo del visor tapa con un desenfoque de 6 píxeles, y
   acá lo que hay detrás es justamente lo que se está señalando: desenfocarlo
   sería apagar la única cosa que el cartel quiere que se mire. Este velo es
   transparente y solo sirve para atrapar los clics; lo que oscurece es la
   sombra del foco, que deja un agujero encima del botón.

   ⚠️ TODO VA EN `position:fixed`. Las medidas las pone el JavaScript
   (`acomodarGuia()`), y son coordenadas de PANTALLA: un `absolute` las mediría
   contra el primer padre colocado, que cambia según la pantalla en que se
   esté. */
#home .guia-velo{position:fixed;inset:0;z-index:95}
#home .guia-velo.sin-foco{background:rgba(10,25,34,.60)}
#home .guia-foco{
  position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 4000px rgba(10,25,34,.60);
  outline:2px solid #FFF;outline-offset:0;
  transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease;
}
#home .guia-globo{
  position:fixed;width:min(300px,calc(100vw - 24px));
  background:var(--card);border-radius:var(--r3);
  padding:15px 16px 12px;box-shadow:0 18px 44px rgba(10,25,34,.34);
}
#home .gg-cuenta{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
#home .guia-globo h3{
  margin:5px 0 6px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
#home .guia-globo p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
/* «Saltar» a la izquierda y separado de los otros dos: no es lo que se viene a
   apretar, pero tiene que estar a la vista. Un recorrido del que no se puede
   salir es una trampa. */
#home .gg-pie{display:flex;align-items:center;gap:8px;margin-top:14px}
#home .gg-saltar{
  margin-right:auto;background:none;border:0;padding:6px 2px;
  font-size:15px;color:var(--muted);text-decoration:underline;
}
#home .gg-saltar:hover{color:var(--ink)}
#home .gg-pie .boton{width:auto;flex:none}

/* ══ ACOMODAR LA FOTO DEL PACIENTE ═════════════════════════════════════════

   Usa el mismo velo y el mismo marco oscuro que el visor: es la misma idea
   —una capa por encima de todo— y el fondo oscuro es además lo correcto acá,
   porque lo único que importa en la pantalla es la foto.

   ⚠️ EL PLATO ES CUADRADO Y NO SE ENCOGE. `aspect-ratio:1` con un ancho tope
   de 340: lo que se guarda es un cuadrado, y si el plato fuera rectangular la
   persona encuadraría una cosa y se guardaría otra. */
#home .enc-marco{max-width:420px}
#home .enc-cuerpo{
  padding:16px 16px 10px;display:flex;flex-direction:column;
  align-items:center;gap:12px;overflow-y:auto;
}
#home .enc-plato{
  position:relative;width:100%;max-width:340px;aspect-ratio:1;
  overflow:hidden;border-radius:var(--r2);background:#05090B;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  /* Hasta que la imagen carga no hay nada que mover: se enciende con
     `puesto`, para que no se vea un cuadro negro vacío arrastrable. */
  opacity:.35;transition:opacity .18s ease;
}
#home .enc-plato.puesto{opacity:1}
#home .enc-plato:active{cursor:grabbing}
/* ⚠️ `touch-action:none` ES LO QUE HACE QUE ESTO FUNCIONE EN UN TELÉFONO. Sin
   eso el navegador se queda con el gesto —desplaza la página, hace zoom de la
   página entera— y el dedo nunca llega a mover la foto. */
#home .enc-img{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);transform-origin:center center;
  max-width:none;pointer-events:none;
}
/* El círculo es una GUÍA de lo que se va a ver en el avatar; lo que se guarda
   es el cuadrado entero. La sombra de 600 píxeles es lo que apaga las
   esquinas sin tapar el centro. */
#home .enc-guia{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 600px rgba(5,9,11,.55);
  border:2px solid rgba(255,255,255,.85);
}
#home .enc-zoom{
  display:flex;align-items:center;gap:10px;width:100%;max-width:340px;
  font-size:13px;color:#AEC0C8;
}
#home .enc-zoom input{flex:1;accent-color:var(--brand);min-width:0}
#home .enc-pista{
  margin:0;font-size:13.5px;line-height:1.45;color:#AEC0C8;text-align:center;
  max-width:40ch;
}
/* Los tres botones del pie EN UNA FILA, no uno debajo del otro: `.boton` de
   Home mide el ancho entero, y tres botones de borde a borde para «usar»,
   «elegir otra» y «cancelar» ocupaban más pantalla que la foto que se está
   acomodando. El principal se lleva lo que sobra; los otros dos miden lo que
   dicen. En un teléfono angosto se acomodan solos en dos renglones. */
#home .enc-marco .acciones-papel{flex-direction:row;flex-wrap:wrap;gap:8px}
#home .enc-marco .acciones-papel .boton{width:auto;flex:0 1 auto}
#home .enc-marco .acciones-papel .boton:first-child{flex:1 1 150px}

/* ══ LOS TRES ICONOS DE UN DOCUMENTO ══════════════════════════════════════

   ⚠️ LOS COLORES NO SON DE LOS TRES QUE SIGNIFICAN ALGO. En este proyecto el
   verde quiere decir «verificado», el ámbar «esto hay que mirarlo» y el rojo
   «esto está mal», y ninguno se usa de adorno. Un botón de descargar pintado
   de verde le robaría el significado al único color que lo tiene.

   Estos tres son otra familia —petróleo, índigo y ciruela—, que no dice nada
   por sí sola: solo sirve para que el ojo separe tres botones pegados. Salen
   de las paletas que ya tiene Home, así que no son colores nuevos en el
   sistema, solo usados para otra cosa. */
#home .doc-fila{
  display:flex;align-items:stretch;gap:0;margin-bottom:6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
  overflow:hidden;
}
#home .doc-fila:hover{border-color:var(--brand)}
/* El renglón pierde su propio marco: el marco ahora es el de la fila entera,
   que envuelve al texto y a los tres botones. */
#home .dia-lista.plano{
  border:0;border-radius:0;background:none;box-shadow:none;flex:1;min-width:0;
}
#home .doc-acciones{
  display:flex;align-items:center;gap:2px;flex:none;padding:0 6px 0 0;
}
#home .ic-btn{
  width:42px;height:42px;flex:none;border:0;background:none;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
}
/* Un pelo más gruesos que el resto de los iconos: a 19 px y con el trazo fino
   de siempre, el color se perdía y los tres se veían grises. */
#home .ic-btn .ic{width:22px;height:22px;stroke-width:1.9}
#home .ic-btn.ver{color:var(--ac-ver)}
#home .ic-btn.bajar{color:var(--ac-bajar)}
#home .ic-btn.mandar{color:var(--ac-mandar)}
/* ⚠️ EL CUARTO NO ES UNA ACCIÓN DE FILA, y por eso no lleva ninguno de los tres
   colores de arriba: es el botón de actualizar el calendario, que vive suelto
   en su bloque. Va en el azul de la marca, que es el color de «el tiempo» —la
   familia de la agenda y del reloj—. */
/* Apagado mientras está trabajando: el aviso de después dice qué pasó. */
#home .ic-btn:disabled{opacity:.45;cursor:default}
/* Al pasar por encima se enciende su propio color de fondo, tenue. Con
   `color-mix` no hay que escribir tres colores más a mano: se saca del mismo,
   y el día que cambie uno cambia también su fondo. */
#home .ic-btn.ver:hover{background:color-mix(in srgb, var(--ac-ver) 12%, transparent)}
#home .ic-btn.bajar:hover{background:color-mix(in srgb, var(--ac-bajar) 12%, transparent)}
#home .ic-btn.mandar:hover{background:color-mix(in srgb, var(--ac-mandar) 12%, transparent)}

/* ══ BOTONES DE ACCIÓN: DIBUJO ARRIBA, PALABRA ABAJO ══════════════════════

   Reemplazan a los botones de frase de la lista de exámenes. Con cuatro
   exámenes en pantalla, ocho frases largas obligan a leerlas todas para
   elegir; el dibujo se reconoce de un vistazo.

   ⚠️ LA PALABRA NO SE SACA. Un icono solo es rápido para quien ya lo conoce y
   una adivinanza para quien no. La palabra es corta —«Ver», «Guardar»,
   «Enviar», «Subir», «Avisar»— y el rótulo largo va en `title`.

   ⚠️ Y siguen midiendo 44 px de alto, que es lo que pide un dedo. Hacerlos
   chicos porque ahora son iconos sería cambiar una molestia por otra peor. */
#home .acc-fila{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#home .acc{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-width:62px;min-height:52px;padding:6px 8px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  color:var(--ink2);
}
#home .acc .ic{width:17px;height:17px;stroke-width:1.9}
#home .acc span{font-size:12.5px;font-weight:600;letter-spacing:-.01em}
#home .acc:hover{border-color:currentColor}

/* Los colores de la familia. Ver el comentario de `--ac-ver` más abajo: no
   significan nada por sí solos, están para separar botones pegados. */
#home .acc.ver{color:var(--ac-ver)}
#home .acc.bajar{color:var(--ac-bajar)}
#home .acc.mandar{color:var(--ac-mandar)}
/* ⚠️ «Avisar al laboratorio» SÍ lleva un color con significado: el ámbar, que
   en todo el proyecto quiere decir «esto hay que mirarlo». Aparece solo cuando
   el examen se pasó del plazo, así que acá el color no es adorno — está
   diciendo algo, y es lo mismo que dice en el resto de la aplicación. */
#home .acc.avisar{color:var(--warn);border-color:var(--warnb);background:var(--warnl)}

/* `.cuenta-rot` —el número al lado de un rótulo— se fue con el rótulo de
   «Archivos»: esa cuenta vive ahora en el número de la pestaña, que es donde
   están todas las demás. */

#home .marca-p b{font-size:13.5px;font-weight:650;color:var(--brandd)}
#home .marca-p small{display:block;font-size:12.5px;color:var(--muted)}

/* ══ LA AGENDA EN UN MONITOR ═══════════════════════════════════════════════

   En el teléfono todo va uno debajo del otro y así se queda. En un monitor
   hay ancho de sobra, y dejarlo en blanco es lo que hacía que la aplicación
   se viera como una columna angosta pegada al menú. */
@media (min-width:1100px){
  /* EL MES a la izquierda y las visitas de ese día a la derecha. Es la forma
     natural de mirar un calendario: se toca un día y lo suyo aparece al lado,
     sin perder el mes de vista. */
  #home .mes-y-dia{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;align-items:start;
  }
  #home .mes-y-dia .dia-al-lado{display:flex;flex-direction:column;gap:12px}
  #home .mes-y-dia .dia-al-lado .rotulo{margin-top:0}

  /* LA SEMANA en siete columnas, que es como se mira una semana. Cada día con
     lo suyo debajo; los libres quedan como columnas cortas y vacías, que es
     exactamente la información que uno viene a buscar. */
  #home .lienzo .dia-semana{margin-bottom:0}
  #home .semana-reja{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
    gap:12px;align-items:start;
  }
  #home .semana-reja .dia-semana.vacio{margin-bottom:0}
  #home .semana-reja .ds-cabeza{
    flex-direction:column;align-items:flex-start;gap:1px;padding-bottom:8px;
  }
  /* Las fichas de la semana, en columna angosta: sin la hora al lado del
     nombre no se entiende nada, así que el nombre baja y el sello se apaga. */
  #home .semana-reja .dia-lista{
    padding:10px 11px;border-radius:var(--r2);
  }
  #home .semana-reja .dia-lista .nom{font-size:15px}
  #home .semana-reja .dia-lista .det{font-size:12.5px;line-height:1.3}
  #home .semana-reja .dia-lista > .ic{display:none}
  #home .semana-reja .sello{font-size:12px;padding:2px 6px}
}

@media (min-width:900px){
  /* ⚠️ UN BOTÓN DE 1300 PX NO ES UN BOTÓN, ES UNA FRANJA. En el teléfono un
     botón de borde a borde es lo correcto —es el blanco que busca el pulgar—,
     pero en un monitor el mismo botón estirado a lo ancho de la pantalla se ve
     como un aviso, no como algo que se aprieta. Se topan solo los que están
     sueltos en la pantalla; los que van de a dos o dentro de una tarjeta se
     reparten su espacio como siempre. */
  #home .lienzo > .boton,
  #home .lienzo > a.boton{max-width:340px}
  #home .segmentado{max-width:420px}

  /* El calendario no necesita 530 px de alto: con celdas más bajas el mes
     entero se ve de una vez y queda sitio para el día de al lado. */
  #home .mes .dia{min-height:52px}
}

@media (min-width:900px){
  /* En la columna de la lista los botones de a dos no caben con el tamaño
     normal y se parten a media palabra («Llegó el / resultado»). Acá van más
     chicos: es una columna angosta y el detalle está al lado, así que estos
     botones son atajos, no la acción principal de la pantalla. */
  #home .col-lista .botones.par .boton{font-size:15px;padding:0 10px;gap:6px}
  #home .col-lista .boton.chico{font-size:13.5px}
}

@media (min-width:900px){
  /* ══ CENTRADO, COMO NEXVET LABS ════════════════════════════════════════

     ⚠️ ESTO REEMPLAZA UNA DECISIÓN ANTERIOR, y conviene saber por qué. El
     contenido estaba PEGADO A LA IZQUIERDA a propósito: el encabezado dice de
     quién es la visita que se está mirando, y centrando el contenido el nombre
     del paciente dejaba de empezar en la misma línea que lo de abajo.

     El argumento era correcto y la solución era incompleta. Hasta 1600 px no
     sobraba nada; de 1900 en adelante quedaban 222 px muertos a la derecha, y
     a 2400 quedaban 722. La aplicación se veía apoyada contra el borde
     izquierdo de una pantalla grande.

     Ahora se centran LOS DOS —el contenido y lo escrito en el encabezado— con
     el mismo tope. Siguen empezando en la misma línea, y ya no sobra nada de
     un solo lado. Es exactamente lo que hace Labs con su `.wrap`. */
  #home .barra-dentro{max-width:1280px;margin-inline:auto;width:100%}

  /* ⚠️ EL TOPE LO PONE EL RELLENO, NO EL ANCHO — Y ESO ES POR LA BARRA DE
     DESPLAZAMIENTO.

     El lienzo es lo que se desplaza, así que la barra sale en SU borde
     derecho. Con `max-width:1280px` centrado, ese borde queda en medio de la
     pantalla: en un monitor de 1.700 px la barra aparecía pegada al calendario,
     con 200 px de página en blanco a su derecha. Se veía como si la aplicación
     tuviera una ventana adentro de otra.

     Ahora el lienzo ocupa el ancho entero —la barra va al borde de la página,
     que es donde la mano la busca— y lo que topa el contenido en 1.280 es el
     relleno de los lados, que crece solo cuando sobra pantalla. El contenido
     queda exactamente donde estaba. */
  #home .lienzo{
    max-width:none;margin-inline:0;width:100%;
    padding-inline:max(28px,calc((100% - 1280px) / 2));
  }
  /* Con dos columnas no hay tope ni centrado: las dos juntas ocupan todo. */
  #home .lienzo.dos{max-width:none;margin-inline:0;padding-inline:28px}
}
@media (min-width:1500px){
  #home .barra-dentro{max-width:1440px}
}

/* ══ LA BARRA DE ARRIBA CRUZA TODA LA PANTALLA, COMO EN LABS ════════════════

   Antes la barra oscura empezaba DESPUÉS del menú lateral, y el nombre del
   producto vivía encima del menú. Ahora la barra cruza las dos columnas y la
   marca va adentro: es lo que hace que Home y Labs se vean como la misma casa.

   En el teléfono nada de esto se aplica: ahí no hay menú lateral, la marca se
   apaga y el título de la pantalla se queda con todo el espacio de arriba. */
@media (max-width:899px){
  #home .barra-marca{display:none}
}
@media (min-width:900px){
  #home > .barra{grid-column:1 / -1;grid-row:1}
  #home .pestanas{grid-row:2 / 4}
  /* Ya no hace falta centrar el envoltorio: la marca lo ancla a la izquierda,
     igual que en Labs, y el título vive al lado de ella. */
  #home .barra-dentro{max-width:none;margin-inline:0;align-items:center}
  /* ⚠️ LOS NÚMEROS SON LOS DE NEXVET LABS, EXACTOS. Estaban en `12px 20px` y
     la marca en 15 px, contra los `20px 28px 18px` y los 19 px de Labs: dos
     encabezados de 75 y 83 px de alto en dos aplicaciones que la misma
     persona abre en el mismo monitor. Se midieron los dos y se copió el de
     Labs, que es el que este cambio tomó como patrón. */
  #home .barra{padding:24px 28px 18px}
  #home .marca-lat{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
  /* ⚠️ Y SIN EL RELLENO DE ABAJO, QUE ERA DE OTRA ÉPOCA. `.marca-lat` trae
     `padding:2px 12px 18px` de cuando la marca vivía ENCIMA del menú lateral
     y esos 18 px la separaban del primer botón. Al mudarse a la barra oscura
     nadie los sacó: medido, `.barra-marca` era la pieza más alta del
     encabezado con 55,5 px —contra 42 de las flechas y 38 del avatar— y por
     ella sola la barra de Home medía 93,5 donde la de Labs mide 83. Diez
     píxeles de nada, todos los días, en todas las pantallas. */
  #home .barra-marca .marca-lat{padding:0}
  /* El nombre del producto en UNA línea. Con «Nexvet Home» partido en dos, el
     nombre del médico de abajo quedaba a media altura del título de al lado y
     la barra se veía torcida. */
  #home .marca-lat .mt-nombre{white-space:nowrap}
  #home .barra .titulo{align-self:center}
  #home .barra h1{font-size:17px;font-weight:650}
  #home .barra .sub{font-size:13px;margin-top:1px}
  #home .pestanas{padding-top:14px}

  /* ══ EL MENÚ PLEGADO ═════════════════════════════════════════════════════
     Se queda con los dibujos y suelta los nombres. Se anima el ancho de la
     COLUMNA del contenedor y no el del menú: así el contenido de al lado se
     ensancha al mismo tiempo, en vez de quedarse quieto y saltar al final. */
  #home{transition:grid-template-columns .24s cubic-bezier(.2,.7,.3,1)}
  #home.plegado{grid-template-columns:62px minmax(0,1fr)}
  #home.plegado .pestanas{padding-left:8px;padding-right:8px;align-items:center}
  #home.plegado .pestanas button{width:46px;padding:10px 0;justify-content:center}
  #home.plegado .pestanas button .nom-pest{display:none}
  /* El contador no cabe al lado del nombre cuando no hay nombre: pasa a ser
     una marca en la esquina del dibujo. */
  /* El contador vive dentro del dibujo (`.globito`), así que plegado no hay
     nada que reubicar: ya está en la esquina donde corresponde. */
  #home.plegado .pestanas button{position:relative}
}

/* ⚠️ EN UNA COLUMNA FLEXIBLE LOS HIJOS SE ENCOGEN POR DEBAJO DE SU CONTENIDO,
   y hay que decirles que no. `.lienzo` y las dos columnas de `.lienzo.dos` son
   `flex-direction:column` con alto acotado y desplazamiento propio: cuando el
   contenido no cabe, el navegador reparte el faltante achicando cada hijo en
   vez de dejar que se desplace.

   Se veía así: en un monitor, con seis visitas en la lista, cada tarjeta
   quedaba de 80 px cuando su contenido medía 202 — el nombre del paciente
   cortado por la mitad, y las cifras de arriba también. Se veía como si las
   tarjetas estuvieran mal hechas, y lo que estaba mal era que podían encogerse.

   `flex-shrink:0` en los hijos directos es la regla que falta. No se puede
   poner en `.visita` o en `.dia-lista` una por una: el día que se agregue una
   tarjeta nueva volvería a pasar y nadie se acordaría de por qué. */
#home .lienzo > *,
#home .lienzo.dos > div > *{flex-shrink:0}

@media (min-width:900px){
  /* ⚠️ EL CONTADOR SE VA AL BORDE DERECHO DE LA FILA, y no al lado del dibujo.
     Estaba dentro de `.ic-pest`, así que las pestañas CON contador tenían ese
     bloque más ancho y su nombre empezaba más a la derecha que el de las que
     no tienen: cuatro pestañas y dos alineaciones distintas. Ahora `.ic-pest`
     mide siempre lo mismo —el dibujo— y el contador se cuelga del botón. */
  #home .pestanas button{position:relative}
  /* ⚠️ `.ic-pest` tiene `position:relative` desde el teléfono —ahí el contador
     va montado sobre el dibujo—. Acá hay que APAGARLO: si no, el `right:10px`
     de abajo se mide contra los 20 px del dibujo y el contador aparece a la
     IZQUIERDA del icono, que fue exactamente lo que pasó. */
  #home .pestanas .ic-pest{flex:none;width:20px;justify-content:center;position:static}
  #home .pestanas .globito{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    border:0;height:19px;min-width:19px;font-size:12.5px;
  }
  /* Plegado no hay fila de la que colgarse: vuelve a la esquina del dibujo. */
  #home.plegado .pestanas .globito{
    right:5px;top:5px;transform:none;height:16px;min-width:16px;font-size:11.5px;
  }
}

/* ══ UNA FILA DE ACCIONES QUE SE ENVUELVE ══════════════════════════════════
   Tres o cuatro botones que en el teléfono se reparten el ancho y en un
   monitor quedan del porte de su texto. Reemplaza a las franjas apiladas: un
   botón de borde a borde repetido tres veces se lee como tres avisos, no como
   tres cosas que se pueden apretar. */
#home .botones.fila-acciones{
  flex-direction:row;flex-wrap:wrap;gap:9px;
}

/* ═══════ EL MENÚ «⋯», Y LAS ACCIONES QUE NO SE ESTIRAN ═══════════════════

   ⚠️ EL PROBLEMA QUE ARREGLA. Todas las acciones eran botones de borde a
   borde, uno debajo del otro. En un teléfono ya era mucho; en un computador
   cada uno medía mil píxeles con cuatro palabras al medio. Y lo peor no era lo
   feo: con seis botones del mismo tamaño ninguno dice cuál es el que uno viene
   a apretar.

   Las medidas salen de la skill de interfaz, y son las tres que aplican acá:
   mínimo 44 px de alto en el teléfono, al menos 8 px de separación entre dos
   cosas tocables, y nada de encajonar texto en una caja de alto fijo — por eso
   los chips crecen si la palabra es larga en vez de recortarla. */

#home .mas-caja{position:relative;display:inline-flex;flex:none}

/* El botón de los tres puntos. Cuadrado, del alto de los chips de al lado. */
#home .mas-boton{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border-radius:var(--r2);border:1.5px solid var(--line);
  background:var(--card);color:var(--ink2);
}
#home .mas-boton svg{width:22px;height:22px}
#home .mas-boton:hover{border-color:var(--brand);color:var(--brand)}
#home .mas-boton.puesto{border-color:var(--brand);background:var(--brandl);color:var(--brandd)}

/* El menú con nombre —«Contactar»—, que abre lo mismo que los tres puntos.
   Es un botón normal más una flechita que dice que hay algo adentro: sin ella
   parece que la acción ocurre al apretarlo, y lo que ocurre es que se abre. */
#home .menu-nombrado{padding-right:11px}
#home .menu-nombrado .ch{width:15px;height:15px;flex:none;margin-left:-1px;opacity:.7}
#home .menu-nombrado.puesto{
  background:var(--brandl);border-color:var(--brand);color:var(--brandd);
}
#home .menu-nombrado.puesto .ch{transform:rotate(180deg)}

/* La lista. Se abre hacia ABAJO y hacia la DERECHA, alineada con el borde
   izquierdo del botón: es el sentido en que se lee.

   ⚠️ ANTES ERA `right:0` SIEMPRE, y por eso el menú salía cortado. Con el
   botón al principio de una fila de acciones —«⋯ Archivar este paciente», al
   pie de la ficha— la lista crecía hacia la izquierda, se salía del lienzo y
   la mitad de la palabra quedaba tapada. Se veía como un menú roto.

   Se da vuelta sola cuando no cabe por la derecha, y eso NO lo puede decidir
   el CSS: hay que medir. Lo hace `acomodarMenu()` en pagina.js, que le pone
   la clase `al-reves` después de dibujar. */
#home .mas-lista{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  min-width:212px;max-width:min(80vw,280px);
  display:flex;flex-direction:column;padding:5px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:0 10px 28px rgba(16,32,44,.14);
}
#home .mas-lista.al-reves{left:auto;right:0}
#home .mas-op{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  min-height:44px;padding:10px 11px;border:0;border-radius:var(--r1);
  background:transparent;color:var(--ink);font:inherit;font-size:15px;
  text-decoration:none;
}
#home .mas-op:hover{background:var(--line2)}
#home .mas-op .ic{color:var(--muted);flex:none}
/* Cancelar una visita no puede verse igual que escribirle un correo. */
#home .mas-op.peligro{color:var(--alert)}
#home .mas-op.peligro .ic{color:var(--alert)}

/* La fila de acciones compactas: cada una mide lo que dice, no lo que sobra.
   ⚠️ `width:auto` es imprescindible, igual que en `.fila-acciones`: `.boton`
   trae `width:100%` desde el teléfono y sin esto ningún reparto sirve. */
#home .acciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
}
#home .acciones > .boton{
  width:auto;flex:0 0 auto;min-height:44px;padding:10px 15px;
  font-size:15px;
}
/* ⚠️ EN LAS TARJETAS DE LA FICHA LOS BOTONES VAN EN REJILLA, NO EN FILA.

   `.acciones` reparte en fila y deja que cada botón mida lo que dice. En una
   pantalla ancha eso se ve bien, pero la ficha del paciente pone estas
   tarjetas en una COLUMNA ANGOSTA: ahí los tres se van uno debajo del otro y
   cada uno con un largo distinto —«Cómo llegar», «Contactar», «Agregar
   mascota»—, dejando un borde derecho en escalera que se lee como desorden.

   En rejilla todas las celdas miden lo mismo. Caben dos al lado y el tercero
   ocupa la fila entera, o los tres se apilan iguales si no cabe ninguno: en
   los dos casos los bordes quedan alineados. */
#home .tarjeta-tutor .acciones,
#home .tarjeta-id .acciones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;
}
#home .tarjeta-tutor .acciones > .boton,
#home .tarjeta-id .acciones > .boton,
#home .tarjeta-tutor .acciones > .mas-caja,
#home .tarjeta-id .acciones > .mas-caja{
  width:100%;min-width:0;flex:none;justify-content:center;
}
#home .tarjeta-tutor .acciones .menu-nombrado,
#home .tarjeta-id .acciones .menu-nombrado{width:100%;justify-content:center}
/* El último, cuando queda solo en su fila, se estira: si no, deja un hueco a
   la derecha que es exactamente el desorden que esto vino a arreglar. */
#home .tarjeta-tutor .acciones > *:last-child:nth-child(odd),
#home .tarjeta-id .acciones > *:last-child:nth-child(odd){grid-column:1 / -1}

/* En el teléfono los tres principales sí reparten el ancho: ahí el dedo
   agradece el área, y no sobra espacio que malgastar. */
@media (max-width:520px){
  #home .acciones > .boton{flex:1 1 auto;min-width:104px;justify-content:center}
}
/* ⚠️ `width:auto` es imprescindible: `.boton` lleva `width:100%` desde el
   teléfono, y con eso puesto ningún reparto de flex sirve — los tres siguen
   ocupando una franja entera cada uno. */
#home .botones.fila-acciones > *{flex:1 1 auto;min-width:150px;width:auto}
@media (min-width:900px){
  /* En el monitor cada uno mide lo que dice y se acomodan a la izquierda. */
  #home .botones.fila-acciones > *{flex:0 0 auto;min-width:0;padding:0 18px}
}

/* ══ LA SEMANA COMO PARRILLA DE HORAS ══════════════════════════════════════

   Las horas bajan por la izquierda y los siete días son columnas. Cada hueco
   libre se toca y agenda ahí mismo; cada hora tomada dice de quién es.

   En el teléfono NO se dibuja: siete columnas en 390 px dan 45 px por día,
   donde no cabe ni un nombre. Ahí queda la lista por día, que es la misma
   información vista de otra forma. */
#home .solo-pantalla{display:none}
@media (min-width:900px){
  /* ⚠️ Con `#home` delante, y no `.solo-fono` a secas: la lista del teléfono
     la enciende `#home .semana-reja{display:grid}`, que gana por
     especificidad. Sin el `#home` acá, la lista seguía dibujándose DEBAJO de
     la parrilla: la misma semana dos veces. */
  #home .solo-pantalla{display:block}
  #home .solo-fono{display:none}
  /* ⚠️ `solo-pantalla` PONE `display:block` Y LLEVA UN ID, así que le gana al
     `display:flex` de la pastilla y la dejaba con el número descentrado. Se le
     devuelve el suyo. Cualquier cosa que sea flex y use `solo-pantalla` va a
     necesitar lo mismo. */
  #home .tp-alerta.solo-pantalla{display:flex}
}

#home .parrilla{
  display:grid;
  /* La columna de las horas, y una por día. Son siete en la semana y una en
     el día: lo dice `--dias`, que pone el JavaScript. */
  grid-template-columns:58px repeat(var(--dias,7),minmax(0,1fr));
  /* La primera fila es la cabecera de los días y se estira sola; el resto son
     de 15 minutos. Sin `grid-template-rows:auto` la cabecera medía 22 px como
     cualquier fila y los «LUN / MAR» salían cortados por la mitad. */
  grid-template-rows:auto;
  /* ⚠️ 44 px POR MEDIA HORA. Las filas pasaron de 15 a 30 minutos (`FILA_MIN`
     en pagina.js), así que la altura se dobló para que el día siga midiendo lo
     mismo de alto: la escala es la misma, con la mitad de líneas. Una visita
     de 45 minutos ocupa una fila y media y se dibuja en dos: sigue siendo el
     bloque más chico que alcanza a mostrar la hora y el nombre. */
  /* ⚠️ 40 px Y NO 44. La semana empieza a las 9 y termina a las 19: son 20
     bloques, y a 44 px la parrilla medía 880 px de alto —más que la pantalla
     útil de un portátil— así que había que desplazarse para ver la tarde. A 40
     entra casi entera. Más abajo no se puede: una visita de media hora es UN
     bloque, y ahí adentro van la hora y el nombre. */
  grid-auto-rows:40px;
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;
  box-shadow:var(--som);
}

/* ⚠️ LA CABECERA DE LOS DÍAS SE DESPEGA DEL CUERPO. Era blanca sobre blanco y
   la parrilla entera se leía como una sola sábana: los «LUN 7 / MAR 8» parecían
   la primera fila de horas. Con el gris de siempre detrás se lee como lo que
   es, un encabezado, igual que en el padrón y en la tabla de recordatorios. */
#home .pr-dia,#home .parrilla > .pr-esquina{background:var(--line2)}
#home .pr-dia{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:0;padding:8px 4px;color:var(--muted);
  font-family:inherit;
}
#home .pr-dia b{font-size:12.5px;font-weight:650;text-transform:uppercase;letter-spacing:.04em}
#home .pr-dia span{font-size:17px;font-weight:700;color:var(--ink)}
#home .pr-dia.hoy{background:var(--brandl)}
#home .pr-dia.hoy b,#home .pr-dia.hoy span{color:var(--brand)}
#home .pr-dia:hover{background:var(--line)}
/* El día sin horario lo dice con una palabra, no pintando sus veinte celdas.
   Va en el gris más apagado: es un dato de fondo, no una alerta. */
#home .pr-dia.cerrado b,#home .pr-dia.cerrado span{color:var(--faint)}
#home .pr-cerrado{
  font-style:normal;font-size:11.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint);margin-top:-1px;
}

/* ══ HOY, DE ARRIBA ABAJO ══════════════════════════════════════════════════

   ⚠️ En siete columnas iguales, saber en cuál está uno parado tiene que poder
   hacerse SIN LEER. El número azul del encabezado obliga a mirar arriba,
   contar y volver a bajar, y eso se hace cada vez que se abre la semana.

   ⚠️ SON DOS CANTOS Y UN ENCABEZADO, NO UN RELLENO. La columna entera iba
   pintada de celeste y el resultado fue que la agenda se veía azul de arriba
   abajo: el celeste de la marca (#E8F0FE) es EL MISMO color con el que se
   dibuja una consulta (`--t-consulta-l`), así que el rato libre de hoy se leía
   como una fila de consultas y los colores de tipo —que son lo único que la
   parrilla tiene que decir de un vistazo— quedaban flotando sobre su mismo
   tono. Una línea de color a cada lado no se confunde con nada y no compite
   con lo que hay adentro.

   ⚠️ Y el relleno tampoco alcanzaba solo, que fue la razón por la que los
   cantos existen: ese celeste y el gris de las horas cerradas (#EFF3F6) tienen
   casi el mismo valor, así que la columna de hoy se veía igual que un sábado
   cerrado. Quedan los cantos, que era la parte que funcionaba. */
#home .parrilla > .col-hoy,
#home .parrilla > .pr-dia.hoy{
  border-left:2px solid var(--brand);border-right:2px solid var(--brand);
}

#home .pr-hora{
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:3px 9px 0 0;font-size:12.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;line-height:1;
  /* La hora se escribe justo debajo de su línea, que es donde empieza esa hora
     de verdad. La columna de horas no lleva raya vertical a la derecha: la
     pone la primera columna de días. */
  border-right:0;
}

/* El hueco libre. Vacío hasta que uno se acerca: una parrilla llena de signos
   «+» es una parrilla llena de ruido. Al pasar por encima aparece el signo y
   se entiende que ahí se puede agendar. */
#home .pr-libre{
  border:0;background:var(--card);padding:0;font-family:inherit;
}
/* Al acercarse, el hueco dice la hora que se va a tomar: «+ 09:45». Sin eso
   uno aprieta a ciegas y recién se entera en la pantalla siguiente. */
#home .pr-libre span{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;
  color:var(--brand);font-size:15px;font-weight:650;opacity:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transition:opacity .12s ease,background-color .12s ease;
}
#home .pr-libre:hover span,#home .pr-libre:focus-visible span{opacity:1;background:var(--brandl)}

/* ══ FUERA DE HORARIO ══════════════════════════════════════════════════════

   ⚠️ SIN FONDO GRIS, Y ES LO QUE ARREGLA LA COLUMNA DE HOY. El gris de acá
   (`--line2`) y el celeste de la marca tienen casi el mismo valor, así que
   una columna con la mitad de las horas cerradas se veía igual que un sábado
   —y eso le pasaba a HOY, que es justo la columna que hay que encontrar sin
   leer—. Los dos cantos azules de `col-hoy` existen por ese choque; el gris
   era la otra mitad del problema y se fue el 11 de septiembre de 2026.

   Se ve como un hueco cualquiera y lo dice al acercarse: en gris apagado, no
   en azul como el hueco que sí está en horario. Y ahora se puede agendar ahí,
   con una pregunta en medio (ver `data-fuera` en pagina.js). */
#home .pr-fuera{
  border:0;background:var(--card);padding:0;font-family:inherit;cursor:pointer;
}
#home .pr-fuera span{
  display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;
  color:var(--faint);font-size:15px;font-weight:600;opacity:0;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transition:opacity .12s ease,background-color .12s ease;
}
#home .pr-fuera:hover span,#home .pr-fuera:focus-visible span{opacity:1;background:var(--line2)}
/* El racimo es la casilla; las visitas de adentro se reparten el ancho. Dos a
   la misma hora salen lado a lado, no una encima de la otra. */
#home .pr-racimo{display:flex;gap:3px;min-width:0;overflow:hidden;padding:1px 3px}
#home .pr-racimo > *{flex:1 1 0;min-width:0}
#home .pr-tomada{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:1px;border:0;border-radius:7px;
  background:var(--brandl);color:var(--brandd);
  /* 5 px y no 6: con los bloques de 40 px, la hora y el nombre de una visita
     de media hora tienen que caber sin tocarse con el borde. */
  padding:3px 8px;font-family:inherit;text-align:left;overflow:hidden;
}
#home .pr-tomada:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}

/* ⚠️ EL COLOR POR TIPO DE VISITA SE FUE el 26 de septiembre de 2026, con su
   leyenda: la parrilla se pinta por ESTADO (ver más abajo, «LOS ESTADOS EN LA
   PARRILLA», y el comentario «EL COLOR ES EL ESTADO» en pagina.js). */
#home .pt-hora{display:flex;align-items:center;gap:4px}

/* El riel de horas del día: la misma parrilla de la semana con una sola
   columna, así que el día ocupa todo el ancho en vez de una séptima parte. */
  .dia-riel{margin-bottom:6px}
  .dia-lista-visitas{display:flex;flex-direction:column;gap:10px}
/* Debajo del riel la lista repite lo mismo, y eso está bien: el riel dice
   CUÁNDO y la lista dice QUÉ. Pero la lista deja de ser lo primero, así que se
   separa con un poco de aire y un rótulo no hace falta. */
  .dia-riel + .dia-lista-visitas{margin-top:16px}

/* ══ LA FICHA DEL PACIENTE, EN PESTAÑAS ═══════════════════════════════════

   Quién es queda fijo arriba y lo demás se cambia debajo. Antes era todo, uno
   debajo de otro: para saber si le falta una vacuna había que bajar. */
  .ficha-cab{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r3);
    padding:18px 17px;box-shadow:var(--som);
  }
  .ficha-cab .avatar-ficha{width:54px;height:54px;font-size:19px;flex:none}
  /* El botón no se ve: lo que se ve es el avatar de siempre con una marquita
     de cámara abajo a la derecha, que es lo que dice que se puede tocar. */
  .fc-foto{
    position:relative;flex:none;padding:0;border:0;background:none;
    line-height:0;border-radius:50%;cursor:pointer;
  }
  .fc-foto:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
  .fc-foto-marca{
    position:absolute;right:-2px;bottom:-2px;
    width:22px;height:22px;border-radius:50%;
    background:var(--brand);color:#FFF;border:2px solid var(--card);
    display:flex;align-items:center;justify-content:center;
  }
  .fc-foto-marca svg{width:11px;height:11px}
  .fc-foto:hover .fc-foto-marca{background:var(--brandd)}
  .fc-quien{min-width:0;flex:1 1 220px}
  .fc-nombre{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.1;word-break:break-word}
  .fc-sub{font-size:15px;color:var(--muted);margin-top:2px}
  .fc-alertas{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
  /* ⚠️ Lleva `#home` porque `#home .boton` pone `width:100%` y lleva un ID:
     sin el prefijo, el botón de corregir se estiraba de borde a borde debajo
     del nombre del paciente. */
  #home .fc-corregir{width:auto;flex:none}
  /* «Corregir los datos» y el «⋯», pegados: son las dos cosas que se le hacen
     a la ficha, y el menú al lado de un botón se lee como «y algo más», que es
     exactamente lo que es. */
  .fc-acciones{display:flex;align-items:center;gap:6px;flex:none}

  /* ── El microchip y el Registro Nacional, debajo del nombre ──────────────
     Dos datos de una línea. Van en la cabecera y no en un bloque aparte: son
     quién es este animal, igual que su nombre y su especie.
     ⚠️ Lo que FALTA va en el gris de siempre, nunca en ámbar: no tener
     microchip no es un problema que haya que ir a mirar. */
  .fc-marcas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:7px}
  .fcm{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13.5px;color:var(--ink2);line-height:1.25;
  }
  .fcm b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  /* ⚠️ EL DIBUJO NO LLEVA COLOR DE FAMILIA, y eso NO es una excepción a la
     regla de las cuatro familias: los cuatro tintes valen para los íconos que
     van en una PASTILLA —`.rotulo .ic`, `.aj-ic`, `.p-ic`, `.e-ic`—, y un
     dibujo suelto en medio de una línea de texto hereda el color del texto en
     toda la aplicación, igual que el alfiler de la dirección en cada tarjeta
     del día. Acá pasa lo mismo, y por eso el que falta se apaga entero. */
  .fcm .ic{width:16px;height:16px;flex:none}
  .fcm.falta,.fcm.falta .ic{color:var(--muted)}

  /* Las pestañas. El número de cada una es el de adentro: deja saber si vale
     la pena entrar sin entrar. */
  /* ⚠️ SIN BARRA DE DESPLAZAMIENTO, y no es cosmética: `overflow-x:auto` le
     pone a `overflow-y` el valor `auto` también —lo dice el estándar, cuando
     uno de los dos deja de ser `visible`—, y el `margin-bottom:-1px` de cada
     pestaña deja la fila UN PÍXEL más alta que su caja. Con eso el navegador
     dibujaba una barra de desplazamiento VERTICAL al canto de una fila de 48
     píxeles que no se desplaza a ninguna parte: en el computador se veía como
     una raya oscura al lado de «Correos», y era lo primero que se miraba al
     abrir un paciente.

     Se esconde igual que en las otras dos filas que corren de lado —`.cinta`
     y `.grafico-meses`—, que ya lo hacían así. Lo que dice que hay más
     pestañas es que se ven cortadas en el borde, no una barra.

     ⚠️ ESCONDERLA NO BASTÓ, y Seba la volvió a ver el 26 de septiembre de
     2026 con este arreglo ya subido: `scrollbar-width:none` le pide al
     navegador que no DIBUJE la barra, y hay navegadores y ajustes del Mac
     («mostrar siempre las barras») que igual la dibujan. `overflow-y:hidden`
     es otra cosa: dice que la fila NO se desplaza de arriba abajo, así que no
     hay barra vertical que dibujar ni que esconder. */
  .ficha-pest{
    display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--line);
    padding:0 2px;margin-top:2px;scrollbar-width:none;
  }
  .ficha-pest::-webkit-scrollbar{display:none}
  #home .fp{
    display:flex;align-items:center;gap:8px;flex:none;
    padding:11px 14px;min-height:48px;background:none;border:0;
    border-bottom:2.5px solid transparent;margin-bottom:-1px;
    font-size:15px;font-weight:650;color:var(--muted);letter-spacing:-.01em;
  }
  #home .fp:hover{color:var(--ink2)}
  #home .fp.puesta{color:var(--brand);border-bottom-color:var(--brand)}
  .fp-nom{white-space:nowrap}
  .fp-n{
    min-width:19px;height:19px;padding:0 6px;border-radius:999px;
    background:var(--line2);color:var(--muted);
    font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  }
  #home .fp.puesta .fp-n{background:var(--brandl);color:var(--brand)}
  /* ⚠️ El ámbar solo cuando hay algo VENCIDO, no cuando hay algo. Un globito
     de color en una pestaña que siempre lo tiene deja de significar nada. */
  .fp-n.avisa{background:var(--warnl);color:var(--warn)}

  .ficha-cuerpo{display:flex;flex-direction:column;gap:14px}
  .fc-dentro,.fc-lado{display:flex;flex-direction:column;gap:12px;min-width:0}
  .fc-lado .rotulo:first-child{margin-top:0}

/* ══ LOS NÚMEROS: mirar a la izquierda, perseguir al canto ═════════════════

   Lo que falta cobrar es lo único de esa pantalla sobre lo que se puede HACER
   algo hoy; el resto son números para mirar. Al final había que bajar por doce
   barras para llegar a la única parte accionable. */
  .num2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
  .num-izq,.num-der{display:flex;flex-direction:column;gap:12px;min-width:0}
  .num-der{padding-left:24px;border-left:1px solid var(--line)}

/* ══ TU CUENTA, AGRUPADA ═══════════════════════════════════════════════════

   Eran nueve botones idénticos, uno debajo de otro. Nueve cosas iguales no son
   una lista: son un montón. */
  .ajustes{display:flex;flex-direction:column;gap:4px}
  .aj-grupo{display:flex;flex-direction:column;gap:7px;min-width:0}
  #home .aj-op{
    display:flex;align-items:center;gap:13px;width:100%;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:12px 13px;min-height:56px;color:var(--ink);
    font-size:15.5px;font-weight:650;letter-spacing:-.01em;
  }
  #home .aj-op:hover{border-color:var(--brand)}
  /* El azul es el de los íconos (`--ic-tiempo`) y no el de la paleta elegida:
     ver «Las pastillas de color». */
  .aj-ic{
    width:34px;height:34px;border-radius:9px;flex:none;
    background:var(--ic-tiempo-l);color:var(--ic-tiempo);
    display:flex;align-items:center;justify-content:center;
  }
  .aj-tit{flex:1;min-width:0}
  #home .aj-op > .ic{color:var(--faint)}

@media (min-width:900px){
  /* Tres columnas: los tres grupos se leen a la vez en vez de uno debajo del
     otro. En el teléfono se apilan, con los títulos separando. */
  .ajustes{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:24px;align-items:start}
  .aj-grupo .rotulo{margin-top:0}
}

@media (min-width:1100px){
  /* El tutor al canto: su teléfono y su dirección se necesitan MIENTRAS se
     mira cualquier otra cosa. En el teléfono cae debajo, que es lo correcto
     ahí: no hay canto. */
  .ficha-cuerpo{
    display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;
  }
  .fc-lado{
    padding-left:24px;border-left:1px solid var(--line);
  }
}
/* ⚠️ `line-height` corto en los dos renglones: con el relleno de la casilla,
   la hora y el nombre de una visita de media hora tienen 36 px, y con el alto
   de línea normal el nombre salía cortado por la mitad (medido el 26 de
   septiembre de 2026). */
#home .pt-hora{font-size:12px;font-weight:600;opacity:.85;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#home .pt-nom{
  font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
/* ⚠️ LAS RAYAS DE LA PARRILLA VAN AL FINAL DEL BLOQUE, y a propósito.

   Las pone cada casilla y no un `gap` de la grilla: con `gap:1px` y fondo de
   color había una raya cada 15 minutos —la semana entera rayada— y no se
   distinguía un hueco libre de un rato muerto. Ahora la línea llena va en la
   hora, una tenue en la media y ninguna en los cuartos, así un bloque libre de
   45 minutos se lee como UN bloque.

   Y van acá abajo porque las casillas son botones: cada una trae su `border:0`
   —si no, el navegador les pinta su propio borde— y ese `border:0` borraba
   estas rayas. Misma especificidad, gana la última: escritas arriba, los días
   se juntaban en una sola mancha blanca sin separación entre columnas. */
#home .parrilla > *{border-right:1px solid var(--line)}
#home .parrilla > .pr-hora{border-right:0}
#home .parrilla > .borde-hora{border-top:1px solid var(--line)}
#home .parrilla > .borde-media{border-top:1px solid var(--line2)}
#home .parrilla > .pr-esquina,#home .parrilla > .pr-dia{
  border-bottom:1px solid var(--line);
}

/* ══ LOS ESTADOS EN LA PARRILLA ═══════════════════════════════════════════

   Desde el 26 de septiembre de 2026 el color de una visita dice en qué ESTÁ,
   no de qué es. Cinco maneras de verse, y ninguna pide leyenda:

     agendada           celeste, el de siempre
     en camino          celeste, y lo dice al lado de la hora
     atendiendo         azul lleno: es la que está pasando
     hecha              gris y con ✓: ya pasó
     pedida sin confirmar  con borde y rayado: la escribió el tutor

   ⚠️ «HECHA» YA NO ES `opacity:.5`. Bajarle la opacidad a todo el bloque
   apagaba también el texto, y un nombre al 50 % no llega al 4,5 de contraste.
   Gris con tinta apagada se lee igual de «pasado» y se lee. */
#home .pr-tomada.hecha{background:var(--line2);color:var(--muted)}
#home .pr-tomada.ahora{background:var(--brand);color:var(--bg)}
#home .pr-tomada.por-confirmar{
  background-color:var(--card);color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand);
  background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--brandl) 6px 12px);
}

/* Hoy, con el número en un círculo: se encuentra sin leer. Los dos cantos
   azules de `col-hoy` se quedan (ver «HOY, DE ARRIBA ABAJO»). */
#home .pr-dia.hoy span{
  width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
/* La raya de ahora. Se ubica en la fila de su media hora y baja dentro de ella
   lo que va de esa media hora (`--parte`, entre 0 y 1). ⚠️ Los 40 px son los
   de `grid-auto-rows`: si cambia la altura de la fila, cambia acá. */
#home .parrilla > .pr-ahora{
  align-self:start;position:relative;z-index:3;height:2px;border:0;
  margin-top:calc(var(--parte,0) * 40px - 1px);background:var(--brand);pointer-events:none;
}
#home .parrilla > .pr-ahora::before{
  content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;
  border-radius:50%;background:var(--brand);
}

/* ══════════════ La ficha del paciente: quién es / qué le pasa ══════════════

   Dos columnas cuando hay pantalla: a la izquierda quién es —el animal, sus
   alertas, su tutor y cómo contactarlo—, a la derecha qué le pasa —lo que le
   toca, sus visitas, sus exámenes—.

   La izquierda se queda quieta (`sticky`) mientras la derecha se desplaza:
   el teléfono del tutor no se va de la pantalla mientras se lee la última
   visita. Antes era una sola columna larga y había que subir y bajar.

   En el teléfono no hay dos columnas y no hace falta hacer nada: el orden del
   HTML ya deja primero quién es y después qué le pasa. */
#home .ficha-2col{display:flex;flex-direction:column;gap:12px}
#home .ficha-lado,#home .ficha-obra{display:flex;flex-direction:column;gap:12px;min-width:0}
#home .ficha-lado > *,#home .ficha-obra > *{flex-shrink:0}

#home .tarjeta-id,#home .tarjeta-tutor{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 14px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
/* El animal se presenta centrado y con su dibujo grande: es la única parte de
   la pantalla que contesta «¿de quién es esta ficha?» de un vistazo. */
#home .tarjeta-id{align-items:center;text-align:center}
#home .tarjeta-id .datos,#home .tarjeta-id .boton{width:100%}
#home .avatar-ficha{width:76px;height:76px;font-size:23px;border-radius:50%}
#home .id-nombre{
  font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:var(--ink);word-break:break-word;
}
#home .id-sub{font-size:13.5px;color:var(--muted)}
#home .id-alertas{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
}
#home .tarjeta-tutor .rotulo{margin:0}

@media (min-width:1180px){
  #home .ficha-2col{
    display:grid;
    /* 300 px es lo que necesita la dirección para caber en dos líneas. */
    grid-template-columns:300px minmax(0,1fr);
    align-items:start;gap:14px;
  }
  #home .ficha-lado{position:sticky;top:0}
}
@media (min-width:1600px){
  #home .ficha-2col{grid-template-columns:330px minmax(0,1fr)}
}

/* ══ GRABAR LA ATENCIÓN ════════════════════════════════════════════════════

   Dos pedazos: la barra de arriba de la ficha —que es la misma forma que la
   de dictar, a propósito, porque son la misma clase de cosa— y la lista de lo
   que la grabación propone.

   ⚠️ LA BARRA GRABANDO VA EN ROJO Y NO EN AZUL. El azul de la marca es el de
   «esto está puesto» y lo usa media aplicación; grabando el micrófono está
   ABIERTO, y eso tiene que verse distinto a cualquier otra cosa encendida. Es
   el mismo rojo de `--alert`, que en Nexvet significa «esto está mal» —acá no
   está mal, pero sí es lo único de la pantalla que hay que poder ver de reojo
   desde el otro lado del living—. */
#home .grab-barra{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px 12px;border-radius:var(--r2);margin-bottom:10px;
  background:var(--card);border:1px solid var(--line);
}
#home .grab-barra > .boton{width:auto;flex:none;min-height:44px;padding:13px 16px}
#home .grab-pista{margin:0;flex:1;min-width:200px;max-width:64ch}
#home .grab-viva{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:15px;font-weight:700;letter-spacing:-.01em;
}

#home .grab-barra.grabando{border-color:var(--alert);background:var(--alertl)}
#home .grab-barra.grabando .grab-viva{color:var(--alert)}
#home .grab-barra.grabando .grab-viva .ic{color:var(--alert)}
/* El reloj en monoespaciada de tabla: los números no bailan al pasar de 9:59
   a 10:00, que es lo que hace que se lea de reojo. */
#home .grab-reloj{
  font-family:var(--code);font-size:17.5px;font-weight:700;color:var(--alert);
  font-variant-numeric:tabular-nums;flex:none;margin-left:auto;
}
/* Guardada y esperando señal. Va en ámbar —«hay que mirarlo»— y no en rojo:
   no está mal, falta que pase algo. */
#home .grab-barra.pendiente{border-color:var(--warnb);background:var(--warnl)}
#home .grab-barra.pendiente .grab-viva{color:var(--warn)}
#home .grab-barra.pendiente .grab-viva .ic{color:var(--warn)}
#home .grab-barra.pendiente > .boton{min-height:38px;padding:10px 14px}

#home .grab-barra.subiendo{border-color:var(--brand);background:var(--brandl)}
#home .grab-barra.subiendo .grab-viva{color:var(--brandd)}
#home .grab-barra.subiendo .grab-viva .ic{color:var(--brand)}

@media (prefers-reduced-motion:no-preference){
  #home .grab-barra.grabando .grab-viva .ic{animation:oye 1.6s ease-in-out infinite}
  #home .grab-barra.subiendo .grab-viva .ic{animation:oye 1.6s ease-in-out infinite}
}

/* ══ LA PROPUESTA ══════════════════════════════════════════════════════════

   ⚠️ CADA CAMPO ES UNA TARJETA CON SU CITA DEBAJO, y la cita no es adorno:
   es lo que hace que revisar sea mirar dos líneas en vez de acordarse de la
   consulta entera. */
  .prop-lista{display:flex;flex-direction:column;gap:10px}
  .prop{
    border:1px solid var(--line);border-left:3px solid var(--ok);
    border-radius:var(--r2);background:var(--card);padding:11px 13px;
  }
/* ⚠️ EL CANTO ÁMBAR ES TODA LA SEÑAL. Un campo cuya frase de origen no se
   encontró en la grabación puede estar bien igual, así que no se esconde ni
   se pinta de rojo: se marca, y quien decide es el veterinario. */
  .prop.dudosa{border-left-color:var(--warn);background:var(--warnl)}

  .prop-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
  .prop-campo{font-size:15px;font-weight:700;color:var(--ink);flex:none}
/* El botón de pasarlo a la ficha se va al canto, que es donde el pulgar lo
   encuentra sin tapar el texto. */
  .prop-cab > .mini-boton{margin-left:auto;flex:none}
  .prop-texto{font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
/* La cita va más chica y en gris: es de dónde salió, no lo que se guarda. */
  .prop-cita{
    margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
    font-size:13.5px;line-height:1.45;color:var(--muted);font-style:italic;
    max-width:72ch;
  }

/* Lo grabado entero, cuando se pide verlo. Se desplaza por dentro: son unas
   dos mil palabras y no puede empujar la ficha tres pantallas hacia abajo. */
  .transcripcion{
    margin-top:10px;padding:12px 14px;border-radius:var(--r2);
    background:var(--line2);border:1px solid var(--line);
    font-size:15px;line-height:1.6;color:var(--ink2);
    white-space:pre-wrap;max-height:340px;overflow-y:auto;max-width:78ch;
  }

/* --------------------------------------------------------------- la ruta */
/* Cuánto se maneja en el día. La pantalla entera está explicada en
   `verRuta()` de pagina.js y el porqué del cálculo en `home/rutas.py`.

   ⚠️ ESTO NO ES UN MAPA Y NO SE DIBUJA COMO UNO. Un mapa en un teléfono pide
   zoom, pide señal y no contesta la única pregunta que importa acá —cuánto
   manejo y qué cambio lo acorta—. Es una lista: las paradas en el orden
   acordado y, entre medio, el trayecto. */

  .rt-dias{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
  .rt-dia{
    background:var(--card);border:1px solid var(--line);color:var(--muted);
    border-radius:999px;padding:7px 16px;font-size:15px;font-weight:600;
    min-height:36px;
  }
  .rt-dia.on{background:var(--brandl);border-color:var(--brand);color:var(--brandd)}
  /* El botón de volver a calcular se va al otro extremo: es una acción de
     mantenimiento, no una de las dos que se aprietan todos los días. */
  .rt-dias .mini-boton{margin-inline-start:auto}

  .rt-total{margin:0 0 14px;font-size:15.5px;color:var(--muted)}
  .rt-total b{color:var(--ink);font-weight:650}

  /* El aviso del cambio lleva el botón de WhatsApp a lo ancho: es lo único de
     esta pantalla que hay que apretar. */
  /* El botón vive adentro del bloque de texto (ver `verRuta()`), así que se
     separa con su propio margen y no se estira a lo ancho de la nota. */
  /* ⚠️ `width:max-content` Y NO SOLO `inline-flex`. En el teléfono el botón a
     lo ancho está bien —es lo único que hay que apretar—, pero en el
     computador la nota mide 1.500 px y un botón de ese largo para cuatro
     palabras se ve como una franja, no como un botón. El `max-width` es para
     que en una pantalla angosta no se salga. */
  /* ⚠️ VA CON `#home` DELANTE, y es la única regla nueva de este archivo que
     lo lleva. No es por imitar a las viejas: `#home .boton` (línea 863) trae
     `width:100%` y, por llevar un ID, le gana a cualquier clase sola — así
     que sin el prefijo esta regla no hacía nada y el botón salía de 1.500 px
     en el computador. Está anotado en CLAUDE.md y aun así se cayó en la
     trampa: se vio en la foto, no leyendo el CSS.

     En el teléfono el botón a lo ancho está bien —es lo único que hay que
     apretar—; en el computador, cuatro palabras en una franja de un metro no
     se leen como un botón. */
  /* ⚠️ `flex` Y NO `inline-flex`: con `inline-flex` el botón se queda pegado
     al final del renglón de texto, al lado de «Hay que pedírselo al tutor».
     Un caja de bloque empieza en su propio renglón, y `width:max-content` la
     deja del porte de lo que dice. */
  #home .rt-cambio .boton{
    display:flex;margin-top:12px;
    width:max-content;max-width:100%;padding-inline:20px;
  }
  .rt-cambio small{color:inherit;opacity:.85}

  .rt-lista{display:flex;flex-direction:column;margin-top:16px}
  .rt-parada{
    display:flex;align-items:flex-start;gap:12px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    padding:12px 14px;
  }
  /* ⚠️ ANCHO FIJO Y NO `auto`: son horas y todas miden lo mismo, así que con
     `auto` calzan por casualidad. El día que una diga «09:30» y otra «9:30»
     —o que entre una visita sin hora— la columna de al lado se corre sola.
     Es la misma lección de los 92 px del padrón. */
  .rt-hora{flex:none;width:52px;font-weight:700;font-size:15px;color:var(--brandd)}
  .rt-donde{display:flex;flex-direction:column;gap:2px;min-width:0}
  .rt-donde small{color:var(--muted);font-size:13.5px;line-height:1.4}

  /* El trayecto va ENTRE dos paradas y por eso se dibuja como un tramo de
     línea con el texto encima, no como otra tarjeta: si fuera una tarjeta más,
     la lista se leería como si manejar fuera una parada. */
  .rt-tramo{
    margin-inline-start:26px;padding:7px 0 7px 18px;
    border-inline-start:2px dashed var(--line2);
    font-size:13.5px;color:var(--muted);
  }
  /* Dos visitas en la misma puerta —dos gatas de la misma familia— no son un
     trayecto de cero: son la misma parada, y se dice. */
  .rt-tramo.misma{color:var(--ok);border-inline-start-style:solid}

/* ══════════════════════════════════════════════════════════════════════════
   EL PISO DE LOS 44 PÍXELES, PARA TODO LO QUE SE TOCA
   ══════════════════════════════════════════════════════════════════════════

   La primera regla escrita de esta hoja, arriba del todo, dice: «todo lo que
   se toca de al menos 44 píxeles de alto». Auditadas las 44 pantallas en un
   navegador el 12 de septiembre de 2026, no se cumplía en dieciséis
   controles, y tres de ellos salen en TODAS las pantallas:

       .volver          38×28   en 38 pantallas   ← la flecha de volver
       .lupa-boton      38×38   en 44 pantallas
       .yo              38×38   en 44 pantallas
       .voz «Dictar»    77×25   en 5
       .mini-boton     101×21   en 2
       .chip-editar     63×32   ·  .alerta-chip 75×34
       .chip-f          63×38   ·  .rt-dia 84×36   ·  «‹» del mes 34×34

   Veintiocho píxeles es media uña. Y no es un descuido viejo: la bajada de
   escala de hoy dejó `.volver` en 28 donde antes tenía 32 —la letra bajó y
   el alto la siguió—, que es justo lo que este bloque existe para impedir.

   ⚠️ VA EN UN SOLO SITIO Y AL FINAL, a propósito. Estas clases están
   repartidas por cuatro mil líneas y la mitad se declara con `#home` delante:
   corregirlas una por una significa que la próxima que se escriba vuelve a
   nacer chica. Acá abajo, con `#home` y siendo lo último que lee el
   navegador, gana siempre.

   ⚠️ SOLO HASTA 899 px. De ahí para arriba se usa con mouse, donde el mínimo
   es otro y 44 px se ve enorme — Labs tiene sus botones en 32 y 38 y está
   bien. Lo que se toca con el dedo es esto de acá abajo.

   ⚠️ LO QUE CRECE ES EL ALTO, NO LA LETRA. El relleno hace el trabajo; los
   tamaños de letra son los de Labs y se quedan donde están.                */

@media (max-width:899px){
  /* Los tres que están en todas las pantallas. Los dos redondos pasan a 44 y
     siguen siendo redondos: un círculo de 44 es un círculo. */
  #home .yo,
  #home .lupa-boton{width:44px;height:44px}
  /* El botón de puro dibujo mide 42: le faltan dos para el dedo. */
  #home .ic-btn{width:44px;height:44px}
  #home .dia-fl{width:44px;height:44px;min-height:44px}
  #home .volver{min-height:44px;padding:7px 14px;display:inline-flex;
                align-items:center;justify-content:center}

  /* Los chicos repartidos por las pantallas. `align-items:center` va con
     cada uno porque al subir el alto el texto quedaría arriba. */
  #home .voz,
  #home .mini-boton,
  #home .chip-editar,
  #home .alerta-chip,
  #home .chip-f,
  #home .rt-dia,
  #home .mes .cabeza button{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  /* El relleno de lado sube con el alto: una píldora de 44 de alto y 10 de
     lado se ve como una pastilla estirada. */
  #home .voz{padding:5px 14px}
  #home .alerta-chip{padding:3px 13px}
  #home .chip-editar{padding:5px 14px}

  /* ⚠️ LA CASILLA DE MARCAR MIDE 19×19 Y NO SE PUEDE ESTIRAR SIN DEFORMARLA:
     lo que se agranda es LA FILA ENTERA, que ya es la etiqueta y ya es
     apretable. Así el dedo tiene 44 px de alto en todo el ancho de la
     pantalla en vez de un cuadrito de la mitad de una uña. */
  #home label:has(> input[type="checkbox"]),
  #home .casilla{min-height:44px;display:flex;align-items:center;gap:10px}

}


/* ═══════════════════════════ ══ LO QUE PIDIÓ LA ESCALA NUEVA ══ ═════════
   Lo escribe `diseno/subir_escala.py`, y no se borra a mano: son las dos
   cajas que quedaron chicas al pasar el cuerpo de 12,5 px a 15. Las encontró
   `diseno/auditar.py`, midiendo las 55 pantallas a cuatro anchos. */

  /* La primera columna NOMBRA la pieza y no se parte: «Buzón de correo» en
     vertical se lee como dos filas distintas. */
  #nube table.viv td:first-child{white-space:nowrap}

  /* ⚠️ Y EN UNA VENTANA ANGOSTA LOS ANCHOS FIJOS SE SUELTAN. Con el cuerpo en
     15 px, los 118 px del chip más los 78 de la fecha dejan la columna del
     medio en 43, y ahí hasta «sin-origen» se parte en dos renglones. Un ancho
     fijo endereza una lista ANCHA —que es para lo que se puso—; en una
     angosta la estrangula. */
  @media(max-width:1040px){
    #nube .fila.histfila > .chip{width:auto;min-width:96px}
    #nube .fila.histfila > .der{width:auto}
  }

  /* ⚠️ Y EL MENÚ NECESITA 32 px MÁS: con el cuerpo en 15, «Bandeja de
     exámenes» —la pestaña que más se abre— se cortaba en «Bandeja de
     exáme…». Esto NO lo encuentra `auditar.py`, y es a propósito: el corte
     con puntos suspensivos es una de las cuatro cosas que marcó mal alguna
     vez, así que dejó de marcarlo. Se ve mirando la pantalla, no midiendo.
     Plegado sigue en 62: ahí no hay texto que cortar.

     ⚠️⚠️ Y VA DENTRO DE UNA VENTANA DE TAMAÑO. Escrita suelta al final del
     archivo le ganaba a la regla del teléfono —`@media(max-width:880px)
     {#nube{grid-template-columns:1fr}}`—: las dos pesan exactamente lo mismo
     (un `#nube` a secas; estar dentro de un `@media` NO agrega peso), así que
     mandaba la última escrita y en un teléfono la aplicación ENTERA quedaba
     apretada en una columna de 300 px. */
  @media(min-width:881px){#nube{grid-template-columns:300px minmax(0,1fr)}}

/* ══ LAS ATENCIONES DE LA FICHA ═══════════════════════════════════════════════

   26 de septiembre de 2026. Cada atención es una hoja clínica corta: rótulo a
   la izquierda, texto a la derecha. Ver `tarjetaAtencion()` en pagina.js. */
.at-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.at-cuenta{font-size:14px;color:var(--muted)}
.at-vista{display:inline-flex;padding:3px;border-radius:10px;background:var(--line2)}
#home .at-vista button{
  min-height:36px;padding:0 12px;border:0;border-radius:8px;background:none;
  font-size:13.5px;font-weight:600;color:var(--muted);
}
#home .at-vista button.puesta{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(21,35,44,.12)}
.at-tarjeta{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;display:flex;flex-direction:column;gap:12px;
}
.at-tarjeta.ahora{border:1.5px solid var(--brand)}
.at-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.at-cuando{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.at-tarjeta.ahora .at-cuando{color:var(--brand)}
.at-motivo{font-size:15.5px;font-weight:650;color:var(--ink)}
.at-signos{display:inline-flex;gap:6px;margin-left:auto}
.at-signo{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap;
}
#home .at-plegar{
  width:40px;height:40px;border:0;border-radius:8px;background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
#home .at-plegar:hover{background:var(--line2);color:var(--ink)}
.at-cuerpo{display:grid;grid-template-columns:128px minmax(0,1fr);gap:8px 16px}
.at-rot{
  font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding-top:2px;
}
.at-txt{font-size:14.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.at-txt.at-fuerte{font-weight:650}
.at-pie{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--line2)}
.at-chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);font-size:13px;color:var(--ink2);
}
.at-chip.debe{border-color:var(--warnb);background:var(--warnl);color:var(--warn)}
.at-der{margin-left:auto;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.at-hecho{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ok)}
/* El botón de una atención es chico a propósito: va adentro de una tarjeta y
   no puede pesar más que el diagnóstico que está justo arriba. */
#home .at-btn{
  min-height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--brandd);font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
}
#home .at-btn:hover{border-color:var(--brand);background:var(--brandl)}
@media (max-width:899px){#home .at-btn{min-height:44px}}
#home .at-linea{
  display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  text-align:left;font-size:14.5px;color:var(--ink);
}
#home .at-linea:hover{border-color:var(--brand)}
.at-linea .at-motivo{font-size:14.5px;flex:none}
.at-linea .at-dx{color:var(--ink2);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-linea .ic{margin-left:auto;flex:none;color:var(--muted)}
@media (max-width:599px){
  .at-cuerpo{grid-template-columns:1fr;gap:2px}
  .at-rot{padding-top:10px}
  .at-signos{margin-left:0}
  .at-linea .at-motivo{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .at-linea .at-dx{display:none}
}

/* ══ LOS RECORDATORIOS DE LA FICHA, EN TABLA ══════════════════════════════════

   Tres renglones en vez de tres cajas pintadas. El color va solo en el estado,
   y lo que está al día no se pinta. Ver `sToca` en `verPaciente()`. */
.toca-tabla{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.toca-tabla th{
  font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:11px 14px;background:var(--line2);
}
.toca-tabla td{font-size:14.5px;padding:10px 14px;border-top:1px solid var(--line2);vertical-align:middle}
.vt-que{font-weight:600}
.vt-fecha{font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.vt-est{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
}
.vt-est.mal{background:var(--alertl);color:var(--alert)}
.vt-est.pronto{background:var(--warnl);color:var(--warn)}
.vt-est.nada{background:var(--line2);color:var(--muted)}
.vt-est.bien{padding:0;color:var(--ok)}
.vt-acc{width:52px;text-align:right}
#home .vt-editar{
  width:44px;height:44px;border:0;border-radius:8px;background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
#home .vt-editar:hover{background:var(--line2);color:var(--brand)}
@media (max-width:599px){
  .toca-tabla .vt-ultima{display:none}
  .toca-tabla th,.toca-tabla td{padding-left:8px;padding-right:4px}
  .toca-tabla{table-layout:fixed}
  .toca-tabla .vt-acc{width:44px}
  #home .vt-editar{width:40px}
  /* «Desparasitación» es una sola palabra y no se puede partir: con la
     tabla fija la primera columna tiene que alcanzarle, o se monta encima de
     la fecha (medido a 390 px el 26 de septiembre de 2026). */
  .toca-tabla th:first-child{width:34%}
  .toca-tabla th:nth-child(3){width:28%}
  .toca-tabla .vt-que{font-size:13.5px}
  .toca-tabla .vt-fecha{font-size:13.5px}
  .vt-est{font-size:12.5px;padding:0 8px}
}
/* Lo que dice el lector de pantalla y no la pantalla: la cabecera de la
   columna del lápiz. */
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ══ RECORDATORIOS: UNA FILA POR PACIENTE ═════════════════════════════════════

   Una sola lista para el computador y el teléfono: en el teléfono las tres
   partes de la fila se apilan. Ver `listaDeAvisos()` en pagina.js. */
.rec-filtros{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:11px;background:var(--line2);margin-bottom:14px;align-self:flex-start;width:max-content;max-width:100%;box-sizing:border-box}
#home .rec-filtros button{
  min-height:36px;padding:0 14px;border:0;border-radius:8px;background:none;
  font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px;
}
#home .rec-filtros button.puesto{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(21,35,44,.12)}
.rec-n{font-size:12.5px;font-weight:700}
.rec-lista{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rec-grupo{
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:16px 18px 6px;
}
.rec-fila{
  display:grid;grid-template-columns:250px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:12px 18px;border-top:1px solid var(--line2);
}
.rec-grupo + .rec-fila{border-top:0}
#home .rec-quien{
  display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;
  text-align:left;min-width:0;color:inherit;
}
.rec-nom{display:flex;flex-direction:column;min-width:0}
.rec-nom b{font-size:15.5px;font-weight:650}
.rec-nom small{font-size:13.5px;color:var(--muted)}
.rec-que{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--ink)}
.rec-q{display:inline-flex;align-items:center;gap:7px}
.rec-punto{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.rec-punto.mal{background:var(--alert)}
.rec-acc{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#home .rec-btn{
  min-height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  color:var(--ink2);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center;gap:7px;text-decoration:none;white-space:nowrap;
}
#home .rec-btn:hover{border-color:var(--brand)}
#home .rec-btn.primario{background:var(--brand);border-color:var(--brand);color:var(--bg)}
#home .rec-btn.marca{border-color:var(--brand);color:var(--brandd)}
#home .rec-btn.plano{border-color:transparent;color:var(--brand)}
#home .rec-btn.apagado{opacity:.55;cursor:not-allowed}
.rec-hecho{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ok);white-space:nowrap}
.rec-sale{font-size:13.5px;color:var(--muted);white-space:nowrap}
@media (max-width:899px){
  .rec-filtros{display:flex}
  .rec-fila{grid-template-columns:1fr;gap:10px;padding:14px 16px}
  .rec-acc{justify-content:flex-start}
  #home .rec-btn{min-height:44px;flex:1 1 auto}
}

/* Los avisos de cada insumo del botiquín —«Venció el…», «Quedan 2»—. Nacieron
   para las tarjetas de Recordatorios, que se fueron el 26 de septiembre de
   2026; el botiquín los sigue usando. */
#home .tl-que{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
#home .tl-item{
  font-size:15px;color:var(--warn);background:var(--warnl);
  border-radius:var(--r1);padding:8px 9px;
}
#home .tl-item.venci{color:var(--alert);background:var(--alertl)}

/* ══ LA VISTA DE UN DÍA: cambiar la hora o cancelar desde el bloque ═══════ */
#home .pr-racimo > .pr-acciones{flex:none;display:flex;align-items:center;gap:2px}
#home .pr-accion{
  width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;
}
#home .pr-accion:hover{background:var(--line2);color:var(--brand)}
#home .pr-accion.sacar:hover{background:var(--alertl);color:var(--alert)}

/* ══ LAS PESTAÑAS DE LA FICHA Y LOS BOTONES DE EMITIR: que se sienta el mouse ══

   26 de septiembre de 2026, Seba: «se ven muy vacíos». Las pestañas no
   cambiaban nada al pasar por encima salvo un gris más oscuro; ahora se
   iluminan. Y los botones de emitir un documento tenían un ícono de 16 px
   arriba de un título de dos renglones: el ícono se perdía. Ahora van en
   fila, ícono y nombre del mismo peso. */
#home .fp{border-radius:10px 10px 0 0;transition:background-color .12s ease,color .12s ease}
#home .fp:hover{background:var(--line2);color:var(--ink)}
#home .fp.puesta:hover{background:var(--brandl);color:var(--brand)}
#home .fp .ic{width:17px;height:17px}
#home .emitir{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
#home .emitir-uno{
  flex-direction:row;align-items:center;gap:10px;padding:10px 12px;min-height:52px;
  transition:border-color .12s ease,background-color .12s ease,transform .12s ease;
}
#home .emitir-uno:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(21,35,44,.08)}
#home .emitir-uno .e-ic{flex:none;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
#home .emitir-uno .e-ic .ic{width:18px;height:18px}
#home .emitir-uno .e-tit{font-size:14px;font-weight:600;line-height:1.25}

/* ══ LA CAMPANITA DE LA BARRA ══════════════════════════════════════════════ */
.campana-caja{position:relative;flex:none;margin-left:auto}
.campana-caja + .lupa-boton{margin-left:0}
#home .campana-boton{position:relative;margin-left:0}
.campana-n{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--warn);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
.campana-n.urge{background:var(--alert)}
.avisos-panel{
  position:absolute;right:0;top:46px;z-index:60;width:320px;max-width:calc(100vw - 32px);
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px rgba(10,25,34,.22);padding:8px;display:flex;flex-direction:column;gap:2px;
}
.avisos-tit{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
#home .av-item{
  display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;
  border:0;border-radius:10px;background:none;text-align:left;color:var(--ink);
}
#home .av-item:hover{background:var(--line2)}
.av-punto{flex:none;width:9px;height:9px;border-radius:50%;background:var(--warn)}
.av-item.urge .av-punto{background:var(--alert)}
.av-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.av-txt b{font-size:14px;font-weight:650}
.av-txt small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avisos-nada{margin:0;padding:6px 10px 10px;font-size:13.5px;color:var(--muted)}

/* ══ CONFIGURACIÓN, MÁS LIVIANA (26 de septiembre de 2026) ═════════════════

   Seba: «botones muy largos y el diseño feo». Cada opción era una caja con su
   propio borde, y tres columnas de cajas se leían como un formulario. Ahora
   cada grupo es UNA tarjeta con sus opciones separadas por una línea —como
   los ajustes de un teléfono—, y los colores y la luz son fichas chicas. */
.aj-lista{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#home .aj-lista .aj-op{border:0;border-radius:0;border-top:1px solid var(--line2);box-shadow:none;margin:0;min-height:52px}
#home .aj-lista .aj-op:first-child{border-top:0}
#home .aj-lista .aj-op:hover{background:var(--line2)}
.apariencia{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px;margin-top:8px}
@media (max-width:899px){.apariencia{grid-template-columns:1fr;gap:4px}}
#home .paletas.chicas{display:flex;flex-wrap:wrap;gap:8px}
#home .paletas.chicas .paleta{
  flex:0 0 auto;flex-direction:row;gap:8px;min-height:44px;padding:0 14px 0 8px;
  border-radius:999px;font-size:14px;
}
#home .paletas.chicas .muestra{width:26px;height:26px}
.cuenta-pie{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
#home .salir-chico{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--ink2);font-size:14px;font-weight:600;
}
#home .salir-chico:hover{border-color:var(--alert);color:var(--alert)}
.ap-parte{min-width:0}

/* ⚠️ LA BARRA MIDE LO MISMO EN TODAS LAS PESTAÑAS. En «Hoy» lleva además las
   flechas del día y medía 84 px contra 82 en las demás: al cambiar de pestaña
   la pantalla entera saltaba dos píxeles, y eso es lo que Seba veía como «más
   ancha» (medido en Chromium el 26 de septiembre de 2026). Con el alto fijo,
   lo de adentro se centra y nada salta. */
@media (min-width:900px){
  #home > .barra{height:82px;box-sizing:border-box}
  #home > .barra .barra-dentro{height:100%}
}

/* ══ EL REGISTRO DEL SAG EN LA CALCULADORA ═════════════════════════════════ */
.sag-lista{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:8px}
#home .sag-uno{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;
  width:100%;min-height:52px;padding:9px 12px;border:0;border-top:1px solid var(--line2);
  background:var(--card);text-align:left;color:var(--ink);
}
#home .sag-uno:first-child{border-top:0}
#home button.sag-uno:hover{background:var(--brandl)}
.sag-uno.sin{opacity:.7}
.sag-g{font-size:14px;grid-column:1}
.sag-d{font-size:12.5px;color:var(--muted);grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sag-c{grid-column:2;grid-row:1 / span 2;font-size:13.5px;font-weight:700;color:var(--brand);white-space:nowrap}
.sag-uno.sin .sag-c{color:var(--muted);font-weight:500}

/* ══ LA AYUDA QUE SE ABRE CON LA ⓘ ═════════════════════════════════════════ */
.ayuda{margin:4px 0 10px}
#home .ayuda-boton{
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 10px 0 6px;
  border:0;border-radius:8px;background:none;color:var(--muted);font-size:13.5px;font-weight:600;
}
#home .ayuda-boton:hover,#home .ayuda.abierta .ayuda-boton{background:var(--line2);color:var(--ink)}
#home .ayuda-boton .ic{width:18px;height:18px;color:var(--brand)}
.ayuda-texto{
  margin:6px 0 0;padding:10px 14px;border-radius:10px;background:var(--line2);
  font-size:14px;line-height:1.55;color:var(--ink2);max-width:72ch;
}

/* ══ GOOGLE CALENDAR, ARRIBA DE LA AGENDA ══════════════════════════════════ */
.agenda-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.agenda-cab > .segmentado{margin-bottom:0;flex:0 1 420px;min-width:260px}
#home .gcal-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--brandd);font-size:14px;font-weight:600;
}
#home .gcal-chip:hover{border-color:var(--brand);background:var(--brandl)}
/* El punto verde dice que está conectado y andando: es lo que ese color
   significa en Nexvet, y no se usa para nada más en esta fila. */
#home .gcal-arriba .menu-nombrado{position:relative;padding-right:28px}
#home .gcal-arriba .menu-nombrado::after{
  content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-radius:50%;background:var(--ok);
}

/* ══ EL MAPA DE LA RUTA ════════════════════════════════════════════════════ */
.rt-mapa{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line2);margin:4px 0 14px}
.rt-mapa{height:360px}
@media (max-width:599px){.rt-mapa{height:280px}}
.rt-letra{
  flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink2);color:var(--bg);
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}

/* Las sugerencias del SAG bajo «Medicamento», en la receta. */
.sag-sug{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.sag-sug-tit{width:100%;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
#home .sag-chip{
  min-height:36px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:13px;color:var(--ink2);text-align:left;
}
#home .sag-chip:hover{border-color:var(--brand);background:var(--brandl);color:var(--ink)}
#home .sag-chip b{color:var(--ink);font-weight:650}
@media (max-width:899px){#home .sag-chip{min-height:44px}}

/* ══ EL COMPROBANTE DE MICROCHIP ═══════════════════════════════════════════ */
.mc-grupo{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.mc-rot{font-size:12.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mc-ops{display:flex;flex-wrap:wrap;gap:6px}
#home .mc-op{
  min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);font-size:14px;font-weight:600;color:var(--ink2);
}
#home .mc-op:hover{border-color:var(--brand)}
#home .mc-op.puesta{background:var(--brandl);border-color:var(--brand);color:var(--brandd)}
@media (max-width:899px){#home .mc-op{min-height:44px}}
.doc-sub{text-align:center;font-size:12px;color:#5E6E75;margin:-6px 0 10px}
.doc-etiqueta{
  display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 0 12px;
  padding:12px;border:1.5px dashed #9AA8B1;border-radius:10px;
}
.doc-etiqueta small{font-size:11px;color:#5E6E75}

/* ══ LA VISITA: LO QUE FALTA Y LO HECHO, EN UNA GRILLA ═════════════════════ */
.rot-cuenta{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
.tareas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:8px}
#home .tarea{
  position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;text-align:left;color:var(--ink);
}
#home .tarea:hover{border-color:var(--brand);box-shadow:0 2px 6px rgba(21,35,44,.08)}
#home .tarea .fa-icono{flex:none;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center}
#home .tarea .fa-cuerpo{display:flex;flex-direction:column;min-width:0}
#home .tarea .fa-tit{font-size:14.5px;font-weight:650}
#home .tarea .fa-det{font-size:12.5px;color:var(--muted)}
.tarea-ok{
  position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  background:var(--okl);color:var(--ok);display:flex;align-items:center;justify-content:center;
}
.tarea-ok .ic{width:13px;height:13px}
#home .tarea.lista .fa-det{color:var(--ok)}

/* ══ LA RUTA COMO RECORRIDO ════════════════════════════════════════════════ */
#home .rt-lista{display:flex;flex-direction:column;gap:0}
.rt-fila{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px}
.rt-eje{display:flex;flex-direction:column;align-items:center}
#home .rt-fila .rt-letra{width:30px;height:30px;font-size:13.5px;margin-top:14px}
.rt-linea{width:2px;flex-grow:1;background:var(--line);margin-top:4px}
.rt-cuerpo{min-width:0}
#home .rt-fila .rt-parada{
  display:flex;align-items:center;gap:14px;padding:10px 12px 10px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
}
#home .rt-fila .rt-hora{flex:none;width:50px;font-weight:650;color:var(--brand);font-variant-numeric:tabular-nums}
#home .rt-fila .rt-donde{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
#home .rt-ir{
  flex:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--brandd);
  font-size:13.5px;font-weight:600;text-decoration:none;
}
#home .rt-ir:hover{border-color:var(--brand);background:var(--brandl)}
#home .rt-tramo{
  display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:9px 4px 9px 14px;
  border:0;border-radius:8px;background:none;font-size:13px;color:var(--muted);text-align:left;
}
#home .rt-tramo b{color:var(--ink2);font-weight:600}
#home .rt-tramo i{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--brand);opacity:0}
#home button.rt-tramo:hover{background:var(--line2)}
#home button.rt-tramo:hover i,#home .rt-tramo.puesto i{opacity:1}
#home .rt-tramo.puesto{background:var(--brandl);color:var(--brandd)}
.rt-fin{padding:9px 0 4px 14px;font-size:13px;color:var(--muted)}
.rt-mapa-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px;font-size:14px;color:var(--ink2)}
#home .rt-mapa-todo{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--brandd);font-size:13.5px;font-weight:600}
@media (max-width:599px){
  #home .rt-ir span{display:none}
  #home .rt-ir{padding:0 11px;min-height:44px}
}

/* ══ GRABAR Y DICTAR: DOS HERRAMIENTAS EN UNA FILA ═════════════════════════ */
#home .voz-boton{display:inline-flex;margin:0 8px 10px 0;padding:0;border:0;background:none;box-shadow:none;vertical-align:top}
#home .voz-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);font-size:14px;font-weight:600;
}
#home .voz-btn:hover{border-color:var(--brand);background:var(--brandl);color:var(--brandd)}
#home .voz-btn .ic{color:var(--brand)}
/* El punto de «grabar», el mismo gesto que cualquier grabadora. Es tinta, no
   rojo: en Nexvet el rojo significa que algo está mal. */
.voz-punto{width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--line2)}
@media (max-width:899px){#home .voz-btn{min-height:44px}}

/* ⚠️ LA FLECHA DE VOLVER, ALINEADA CON EL BOTÓN DEL MENÚ (26 de septiembre de
   2026, Seba: «¿esto puede quedar alineado?»). Llevaba `margin-top:2px`, era
   una píldora de 20 de radio y el botón de plegar es un cuadrado de 34: dos
   botones vecinos, a alturas y formas distintas. En el computador los dos son
   el mismo cuadrado; en el teléfono la flecha conserva sus 44 px. */
@media (min-width:900px){
  #home .barra .volver{
    width:34px;height:34px;min-height:34px;padding:0;margin:0;border-radius:9px;
    align-self:center;display:flex;align-items:center;justify-content:center;
  }
  /* ⚠️ La flecha se veía corrida («chueco»): el ícono traía el margen que
     lleva cuando va al lado de una palabra. Acá va sola. */
  #home .barra .volver .ic{margin:0;width:18px;height:18px}
}

/* ══ LAS SILUETAS DE PERRO Y GATO EN EL AVATAR ═════════════════════════════
   El celeste es fijo, en claro y en oscuro: la referencia es justamente para
   el navegador oscuro, y un círculo claro con la silueta blanca es lo que se
   distingue ahí. `overflow:hidden` recorta el cuello en el borde. */
#home .avatar-ini.con-silueta{background:#D3E3F3;overflow:hidden;padding:0}
.av-silueta{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* Las marcas de las plantillas, abiertas desde la ⓘ. */
.marcas-caja{margin-top:6px;padding:12px 14px;border-radius:10px;background:var(--line2)}
.marcas-caja p{margin:0 0 10px;font-size:13.5px;color:var(--ink2);max-width:72ch}
.marcas-caja .marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 14px}
#home .marcas-caja .marca-p{display:block;padding:6px 10px;border-radius:8px;background:var(--card)}
#home .voz-btn.grabar{padding-left:14px}

/* ══ LA LÍNEA DIVISORIA DE ARRIBA, ALINEADA CON LA BARRA LATERAL ═══════════
   26 de septiembre de 2026, pedido de Seba. La raya que separa «Nexvet Home»
   del título caía donde terminara el nombre, y la barra lateral terminaba en
   200 px: dos líneas verticales casi alineadas, que es peor que dos
   distintas. Ahora la marca mide exactamente lo que la barra lateral menos el
   relleno de la barra de arriba (28 px), y la barra lateral pasó de 200 a
   220 para que «Nexvet Home» y el botón de plegar quepan. Plegada no se
   alinea: la marca no se achica a 62 px. */
@media (min-width:900px){
  /* ⚠️ 236 Y NO 220: con 192 de marca, el logo, «Nexvet Home» y el botón de
     plegar no cabían y el botón se montaba sobre la línea (lo vio Seba el
     mismo día). 208 = 236 − 28 del relleno de la barra. */
  #home:not(.plegado){grid-template-columns:236px minmax(0,1fr)}
  #home:not(.plegado) .barra-marca{
    box-sizing:border-box;width:208px;justify-content:space-between;
    padding-right:12px;margin-right:16px;
  }
  #home:not(.plegado) .barra-marca > :first-child{min-width:0;overflow:hidden}
  #home:not(.plegado) .barra-marca .plegar{flex:none}
}
#home .pr-accion.ok:hover{background:var(--okl);color:var(--ok)}

/* ══ LA RUTA EN DOS COLUMNAS ═══════════════════════════════════════════════ */
@media (min-width:1100px){
  .rt-dos{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}
  .rt-col-mapa{position:sticky;top:0}
  .rt-dos .rt-mapa{margin:0}
  .rt-dos .rt-mapa{height:calc(100vh - 300px);min-height:420px}
  .rt-dos .rt-mapa-cab{margin-top:0}
  /* En la columna angosta el botón es solo el alfiler: el nombre completo va
     en `aria-label`, y al lado del nombre del paciente no hace falta más. */
  #home .rt-dos .rt-ir span{display:none}
  #home .rt-dos .rt-ir{padding:0 11px}
  #home .rt-dos .rt-fila .rt-parada{padding:9px 10px 9px 12px;gap:10px}
  #home .rt-dos .rt-fila .rt-hora{width:44px}
}

/* ══ EL EXAMEN FÍSICO GENERAL ══════════════════════════════════════════════ */
.exf{padding:14px 16px 4px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.exf-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
@media (max-width:599px){.exf-num{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ══ ESPERANDO LA TRANSCRIPCIÓN ════════════════════════════════════════════ */
.espera-grab{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:12px}
.espera-giro{flex:none;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--brandl);border-top-color:var(--brand);animation:espera-gira .9s linear infinite;margin-top:2px}
@keyframes espera-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.espera-giro{animation-duration:2.4s}}
.espera-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.espera-txt b{font-size:14.5px}
.espera-txt small{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.espera-paso{display:inline-flex;align-items:center;gap:5px}
.espera-paso.ok{color:var(--ok)}
.espera-paso b{font-variant-numeric:tabular-nums;color:var(--ink2)}

/* ══ LA MARCA DE AGUA DE NEXVET EN LOS DOCUMENTOS ══════════════════════════
   26 de septiembre de 2026, pedido de Seba. El logotipo de la triangulación
   y la palabra, en el azul de Nexvet, casi transparente: se nota que el papel
   salió de Nexvet sin quitarle legibilidad a nada. Va detrás del contenido
   (`z-index`) y sale también al imprimir (`print-color-adjust`). El PDF que se
   manda por correo lleva la misma, puesta por el cartero. */
.doc{position:relative;isolation:isolate}
.doc::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 44'%3E%3Cg fill='%231C5FC4' stroke='%231C5FC4'%3E%3Cpath d='M16 8.05L25.18 23.95L6.82 23.95L11.87 15.21' fill='none' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='8.05' r='3.4' stroke='none'/%3E%3Ccircle cx='25.18' cy='23.95' r='3.4' stroke='none'/%3E%3Ccircle cx='6.82' cy='23.95' r='3.4' stroke='none'/%3E%3Ctext x='16' y='38' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-weight='700' font-size='8' stroke='none'%3Enexvet%3C/text%3E%3C/g%3E%3C/svg%3E")
    center 42% / 46% auto no-repeat;
  opacity:.06;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}

/* ══ EL MODO NOCTURNO, SEGUNDA VUELTA (26 de septiembre de 2026) ═══════════
   Seba: «los colores del tema oscuro se ven pésimo». Se midió en el navegador
   cada elemento de quince pantallas buscando fondos claros y letra bajo 4,5,
   y salieron siempre los mismos cinco culpables:

   1. EL BOTÓN PRINCIPAL. Su degradado va de `--brand` a `--brandd`, y de noche
      los dos son CLAROS: letra blanca sobre celeste pálido, 2,35 de contraste.
      De noche va de un solo color, el de la marca, con la letra oscura
      (7,1 sobre el azul, 8,3 sobre el índigo).
   2. LAS PASTILLAS DE LOS ÍCONOS. Sus cuatro familias (`--ic-*`) nunca
      tuvieron valor de noche: cuadros pastel encendidos sobre la tarjeta
      oscura. Van los mismos cuatro tonos, bajados de fondo y subidos de tinta.
   3. LOS CÍRCULOS CON NÚMERO (globitos, campana, el día de hoy) y el aviso de
      abajo: blanco sobre un fondo que de noche es claro.
   4. LA ETIQUETA DE ALERTA DEL PACIENTE, con sus colores escritos a mano.
   5. EL ELEGIDOR DE VISTA: la opción puesta era MÁS OSCURA que el riel, así
      que parecía la apagada.

   Y LOS GRISES DE FONDO se corren hacia el azul: eran los de Labs, con un
   dejo verdoso que peleaba con la barra azul de arriba. Siguen siendo tokens:
   ninguna regla de día se tocó. */
#home.noche{
  color-scheme:dark;
  --bg:#0E131A; --card:#161D27; --line:#27313F; --line2:#1C2430;
  --suelo:#0E131A; --linea-campo:#3D4A5A;
  --ic-tiempo:#7FB0F4;  --ic-tiempo-l:#17263D;
  --ic-papel:#C3A6E8;   --ic-papel-l:#261D36;
  --ic-gente:#A9BCC6;   --ic-gente-l:#1E2830;
  --ic-afuera:#E891B9;  --ic-afuera-l:#35192A;
  --sobre-marca:#0B1118;
}
#home.noche .boton:not(.suave):not(.gris){
  background:var(--brand);border-color:var(--brand);color:var(--sobre-marca);
}
#home.noche .boton.apagado{opacity:.45}
#home.noche .dia.hoy,
#home.noche .pestanas .globito,
#home.noche .campana-n{color:var(--sobre-marca)}
#home.noche .aviso{background:#E7EEF1;color:#0B1118}
#home.noche .alerta-chip{background:var(--line2);color:var(--ink2);border-color:var(--line)}
#home.noche .segmentado{background:var(--bg);border:1px solid var(--line)}
#home.noche .seg.puesta{background:var(--brandl);color:var(--brandd);box-shadow:none}

/* ══ DESDE DÓNDE SALE (26 de septiembre de 2026) ═══════════════════════════
   Los lugares con nombre van como los mismos chips de «Mañana · Hoy», porque
   son la misma clase de cosa: con qué mirar el día. El primero de la lista es
   la salida, con la casita en vez de una letra. */
.rt-salida{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.rt-salida-rot{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-inline-end:4px}
.rt-salida .mini-boton{display:inline-flex;align-items:center;gap:6px}
.rt-salida-editar{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:14px 16px;margin:0 0 16px;max-width:640px}
.rt-salida-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2)}
.rt-salida-fila span{display:flex;flex-direction:column;min-width:0}
.rt-salida-fila small{color:var(--muted);font-size:13px}
.rt-salida-nueva{display:grid;grid-template-columns:1fr 2fr 1fr;gap:10px;margin:12px 0}
.rt-salida-nueva .campo{margin:0}
@media (max-width:699px){.rt-salida-nueva{grid-template-columns:1fr}}
.rt-fila.salida .rt-letra{background:var(--brandl);color:var(--brandd)}
.rt-fila.salida .rt-letra svg{width:16px;height:16px}

/* ══ LA FICHA, REDISEÑADA (27 de septiembre de 2026, canvas «Home · ficha,
   visita y dosis») ═══════════════════════════════════════════════════════
   Grabar y dictar en una fila; grabar es el grande y de color, porque es lo
   que se aprieta al llegar y hace otra cosa (graba toda la visita). */
#home .ficha-herr{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:4px 0 16px}
#home .ficha-herr > div{margin:0}
#home .ficha-herr > .grab-barra:not(.voz-boton){flex:1 1 100%}
#home .grabar-grande{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 20px 8px 12px;
  border:0;border-radius:14px;background:var(--ic-afuera);color:#FFF;text-align:left;cursor:pointer;
}
#home .grabar-grande:hover{filter:brightness(1.08)}
#home .gg-punto{width:30px;height:30px;border-radius:50%;background:#FFF;display:flex;align-items:center;justify-content:center;flex:none}
#home .gg-punto i{width:12px;height:12px;border-radius:50%;background:#C0275B}
#home .gg-txt{display:flex;flex-direction:column;line-height:1.25}
#home .gg-txt b{font-size:15.5px;font-weight:650}
#home .gg-txt small{font-size:12.5px;opacity:.88}
#home .ficha-herr .dic-barra .voz-btn{min-height:56px;border-radius:14px;padding:0 18px}
#home.noche .grabar-grande{color:#1a0a12}
#home.noche .gg-punto{background:#1a0a12}
#home.noche .gg-punto i{background:#FF8FB8}

/* La fila del rótulo: «Traer la anterior» y «Dictar» a la derecha. */
#home .campo > label .campo-acc{margin-inline-start:auto;display:inline-flex;gap:6px}

/* El examen físico, plegable. */
#home .exf-caja{border:1px solid var(--line);border-radius:14px;background:var(--card);margin:6px 0 16px;overflow:hidden}
#home .exf-cab{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
#home .exf-caja.abierta .exf-cab{border-bottom:1px solid var(--line2)}
#home .exf-ic{width:30px;height:30px;border-radius:8px;background:var(--ic-papel-l);color:var(--ic-papel);display:flex;align-items:center;justify-content:center;flex:none}
#home .exf-tit{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
#home .exf-tit > b{font-size:15.5px;font-weight:650}
#home .exf-tit > small{font-size:13.5px;color:var(--muted)}
#home .exf-datos{display:flex;flex-wrap:wrap;gap:6px}
#home .exf-datos span{padding:4px 9px;border-radius:8px;background:var(--line2);font-size:13.5px}
#home .exf-datos small{color:var(--muted);font-size:12px}
#home .exf-caja .exf{padding:16px;border:0;margin:0}
#home .exf-caja .exf-num{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
#home .exf-peso{margin:-6px 0 10px}

/* ══ LA VISITA COMO FLUJO (27 de septiembre de 2026) ══════════════════════ */
#home .flujo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
@media (max-width:899px){#home .flujo{grid-template-columns:repeat(2,minmax(0,1fr))}}
#home .fl-paso{display:flex;flex-direction:column;gap:8px;min-height:124px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left;color:var(--ink);cursor:pointer;font:inherit}
#home .fl-paso:hover{border-color:var(--brand)}
#home .fl-paso.listo{border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
#home .fl-paso.sigue{border:1.5px solid var(--brand);box-shadow:0 0 0 3px var(--brandl)}
#home .fl-paso.apagado{cursor:default;opacity:.7}
#home .fl-paso.apagado:hover{border-color:var(--line)}
#home .fl-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
#home .fl-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--line2);color:var(--ink2);flex:none}
#home .fl-paso.sigue .fl-num{background:var(--brand);color:var(--sobre-marca,#FFF)}
#home .fl-num.ok{background:var(--okl);color:var(--ok)}
#home .fl-num.carga .espera-giro{width:18px;height:18px}
#home .fl-est{font-size:12.5px;font-weight:600;color:var(--muted);text-align:right}
#home .fl-paso.listo .fl-est{color:var(--ok)}
#home .fl-paso.sigue .fl-est{color:var(--brandd)}
#home .fl-tit{font-size:16px;font-weight:650}
#home .fl-det{font-size:13px;color:var(--muted);line-height:1.4}
#home .herramientas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
#home .herramientas .boton{width:auto;min-height:44px;font-size:14.5px;padding:8px 14px}
#home .herr-rot{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-inline-end:6px}
#home .doc-corte{height:24px}

/* ══ LA VENTANA DE PREGUNTA (27 de septiembre de 2026) ════════════════════ */
.preg-velo{position:fixed;inset:0;background:rgba(21,35,44,.45);z-index:60}
.preg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:61;
  width:min(440px,calc(100% - 32px));border-radius:16px;background:var(--card);color:var(--ink);
  box-shadow:0 24px 60px -20px rgba(16,32,44,.5)}
.preg-cuerpo{padding:24px 24px 18px;display:flex;flex-direction:column;gap:12px}
.preg-ic{width:40px;height:40px;border-radius:12px;background:var(--alertl);color:var(--alert);display:flex;align-items:center;justify-content:center}
.preg h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.preg-dato{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--line2);font-size:14px}
.preg-dato b{font-weight:600}
.preg-dato span{color:var(--ink2)}
.preg p{margin:0;font-size:14px;line-height:1.5;color:var(--ink2)}
.preg-pie{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--line2)}
#home .preg-pie .boton{width:auto;min-height:44px}
#home .boton.peligro{background:var(--alert);border-color:var(--alert);color:#FFF}
#home.noche .boton.peligro{color:#1a0b09}
@media (prefers-reduced-motion:no-preference){.preg{animation:preg-entra .16s ease-out}
  @keyframes preg-entra{from{opacity:0;transform:translate(-50%,-47%)}to{opacity:1;transform:translate(-50%,-50%)}}}
#home.noche .boton.peligro:not(.suave):not(.gris){background:var(--alert);border-color:var(--alert)}

/* ══ DOSIS Y RECETA (27 de septiembre de 2026, canvas) ════════════════════ */
#home .tres-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
#home .tres-campos .campo{margin-bottom:0}
@media (max-width:599px){#home .tres-campos{grid-template-columns:1fr}}
#home .recientes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
#home .reciente{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
#home .reciente:hover{border-color:var(--brand)}
#home .reciente b{font-size:14px;font-weight:600}
#home .reciente small{font-size:12.5px;color:var(--muted)}
#home .res-dosis{border-radius:16px;background:var(--marca-honda,#0E2F63);color:#FFF;padding:22px 24px;display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
#home .res-dosis.vacio{background:var(--line2);color:var(--muted)}
#home .res-dosis.malo{background:var(--alert)}
#home .rd-rot{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.75}
#home .rd-cifra{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
#home .rd-sub{font-size:14.5px;opacity:.85}
#home .rd-ojo{font-size:13.5px;font-weight:600}
#home .dosis-der{position:sticky;top:12px;align-self:start}
#home .rec-bloque{margin-bottom:18px}
#home .rec-cuanto{padding:16px;border-radius:12px;background:var(--fondo-hondo,#F4F7FB);margin:0 0 18px}
#home.noche .rec-cuanto{background:var(--line2)}
#home .rc-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
#home .rc-cab b{font-size:15px;font-weight:650}
#home .rc-cab small{font-size:12.5px;color:var(--muted)}
#home .rc-res{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:6px 8px 6px 14px;border-radius:10px;background:var(--marca-honda,#0E2F63);color:#FFF}
#home .rc-res b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:19px;font-weight:600}
#home .rc-res small{font-size:12px;opacity:.8}
#home .rc-res.vacio{background:var(--card);color:var(--muted);border:1px dashed var(--line)}
#home #res-receta .ayuda{margin-top:6px}
#home .rc-res .mini-boton{background:#FFF;color:#0E2F63;border-color:#FFF}
#home .sello.enviando{display:inline-flex;align-items:center;gap:6px}
#home .sello.enviando .espera-giro{width:12px;height:12px;border-width:2px}
@media (prefers-reduced-motion:no-preference){
  #home .examen.llegando{animation:examen-llega .45s cubic-bezier(.2,.8,.2,1)}
  @keyframes examen-llega{from{opacity:0;transform:translateX(-24px) scale(.97)}to{opacity:1;transform:none}}
}
#home .agregar-item{margin:4px 0 14px}
#home .cobro-agregar{border:1px dashed var(--brand);border-radius:var(--r2);padding:14px;margin:4px 0 14px;background:var(--card)}
#home .ca-campos{display:grid;grid-template-columns:2fr 1fr;gap:10px}
@media (max-width:599px){#home .ca-campos{grid-template-columns:1fr}}
#home .item.extra{align-items:center}
#home .exf-caja .exf-num{align-items:end}
#home .rec-cuanto .tres-campos{grid-template-columns:1fr 1fr minmax(170px,1.2fr)}
#home .rc-res b{white-space:nowrap}
.mapa-fijo iframe{width:100%;height:100%;border:0;border-radius:14px;display:block;background:#dde7ee}
#home .rc-forma{max-width:320px;margin-bottom:12px}
#home .rc-res.malo{background:var(--alertl);color:var(--alert);flex-direction:column;align-items:flex-start}
#home .rc-res.malo b{font-family:inherit;font-size:15px}
#home .rc-res{flex-wrap:wrap}
#home .rc-res b{font-family:inherit;font-size:17px;font-weight:650}
#home .rec-cuanto .tres-campos{grid-template-columns:1fr 1fr minmax(210px,1.3fr)}

/* ══ RECORDATORIOS, SIMPLE (27 de septiembre de 2026) ═════════════════════ */
#home .rs-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:860px;margin:0 0 12px;font-size:16px}
#home .rs-cab small{font-size:13px;color:var(--muted)}
#home .rs-lista{max-width:860px;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
#home .rs-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line2)}
#home .rs-fila:last-child{border-bottom:0}
#home .rs-quien{display:flex;flex-direction:column;gap:2px;min-width:0;border:0;background:none;padding:0;text-align:left;color:var(--ink);font:inherit;cursor:pointer}
#home .rs-quien b{font-size:15.5px;font-weight:650}
#home .rs-quien small{font-size:13.5px;color:var(--muted)}
#home .rs-que{font-size:14.5px;color:var(--ink2)}
#home .rs-venc{color:var(--alert);font-weight:600}
#home .rs-pronto{color:var(--muted)}
#home .rs-der{justify-self:end;text-align:right;font-size:13.5px}
#home .rs-sale{color:var(--muted)}
#home .rs-hecho{color:var(--ok);font-weight:600}
#home .rs-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--brandd);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit}
#home .rs-btn:hover{border-color:var(--brand)}
@media (max-width:599px){#home .rs-fila{grid-template-columns:1fr}#home .rs-der{justify-self:start}}

/* ══ ESTRUCTURA 4: SIN BANDA ARRIBA, EL BUSCADOR EN EL MENÚ (28-09-2026) ════
   Rediseño elegido por Seba en el lienzo («Estructura 4», ronda 3). En el
   computador la banda oscura de arriba se fue: la marca, el botón de plegar,
   el buscador, los avisos y la cuenta viven en el menú lateral, que no se
   mueve nunca. Lo que queda arriba del contenido es el encabezado de la
   página —el título, sus flechas y el botón principal de esa pantalla—, sobre
   el mismo fondo que el resto. En el teléfono la barra se queda arriba, ahora
   clara, y el menú lateral es la barra de abajo de siempre.
   ⚠️ Va al FINAL de la hoja a propósito: le gana a las reglas de la barra
   oscura de más arriba sin tener que tocarlas una por una. */

/* ── las piezas del menú lateral no existen en el teléfono ──
   ⚠️ Con `#home .pestanas` delante: `.pestanas button{display:flex}` de más
   arriba le ganaba a la clase sola, y el buscador del menú aparecía como una
   séptima pestaña en la barra de abajo del teléfono. */
#home .pestanas .lat-cab,#home .pestanas .lat-buscar,#home .pestanas .lat-pie{display:none}

/* ── las etiquetas de estado: una palabra y un color en todas las pantallas ── */
#home .sello{display:inline-flex;align-items:center;gap:4px}
#home .sello .ic{width:12px;height:12px}
.s-atendiendo{background:var(--brand);color:var(--sobre-marca,#FFF)}
.s-cobrar{background:var(--warnl);color:var(--warn)}
.s-confirmar{background:transparent;color:var(--warn);border:1.5px dashed var(--warn);padding:1.5px 6.5px}

/* ── el tablero de Hoy: una columna por estado, con su punto de color ── */
/* Tres columnas: «Por cobrar» va dentro de «Atendiendo» (ver `ETAPAS`). */
#home .tbl.tbl-hoy{grid-template-columns:repeat(3,minmax(0,1fr))}
.tbl-hoy .tbl-t::before{
  content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;
  vertical-align:1px;background:var(--brandl);box-shadow:inset 0 0 0 1.5px var(--brand);
}
#etapa-ahora .tbl-t::before{background:var(--brand);box-shadow:none}
#etapa-por-cobrar .tbl-t::before{background:var(--warn);box-shadow:none}
#etapa-listas .tbl-t::before{background:var(--ok);box-shadow:none}

/* ── la parrilla de la Agenda con los mismos colores ── */
#home .pr-tomada.hecha.lista{background:var(--okl);color:var(--ok);box-shadow:inset 3px 0 0 var(--ok)}
#home .pr-tomada.hecha.por-cobrar{background:var(--warnl);color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
#home .pr-tomada.atrasada{background:var(--alertl);color:var(--alert);box-shadow:inset 3px 0 0 var(--alert)}
#home .pr-tomada.por-confirmar{
  background:var(--card);background-image:none;color:var(--warn);box-shadow:none;
  outline:1.5px dashed var(--warn);outline-offset:-1.5px;
}
#home .pr-tomada:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}
.leyenda-estados{display:none}

/* ── «Hoy» en el teléfono: lo que sigue, y el resto por estado ── */
.hoy-fono{display:flex;flex-direction:column;gap:8px}
.hc-grupo{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.hoy-fono > .hc-grupo:first-child{margin-top:0}
.hc-grupo i{width:9px;height:9px;border-radius:50%;background:var(--brandl);box-shadow:inset 0 0 0 1.5px var(--brand)}
.hc-g-atendiendo i{background:var(--brand);box-shadow:none}
.hc-g-cobrar i{background:var(--warn);box-shadow:none}
.hc-g-lista i{background:var(--ok);box-shadow:none}
.hc-n{
  min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:var(--line2);color:var(--ink2);
  font-size:11.5px;letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;
}
.hc-sigue{
  border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(135deg,var(--campo) 0%,var(--campo-hondo) 100%);color:var(--campo-tinta);
}
.hc-sigue.tarde{box-shadow:inset 4px 0 0 var(--alert)}
.hc-sigue-top{display:flex;align-items:center;gap:8px}
.hc-r{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--campo-tenue)}
.hc-sigue-top .sello{margin-left:auto}
#home .hc-sigue-abrir{
  display:flex;flex-direction:column;gap:3px;background:none;border:0;padding:0;
  color:inherit;text-align:left;font-family:inherit;
}
.hc-sigue-abrir b{font-size:22px;font-weight:700;letter-spacing:-.01em}
.hc-sigue-abrir span{font-size:14.5px;color:var(--campo-tenue)}
.hc-sigue-acc{display:flex;gap:8px}
#home .hc-sigue-acc .boton{flex:1;min-height:46px;justify-content:center;margin:0}
#home .hc-sigue-acc .hc-iniciar{background:#FFF;border-color:#FFF;color:var(--campo-hondo)}
#home .hc-sigue-acc .hc-llegar{background:transparent;border:1px solid rgba(255,255,255,.45);color:var(--campo-tinta)}
.hc-fila{
  display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding-right:10px;
}
.hc-fila.hecha{opacity:.72}
#home .hc-abrir{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;
  padding:12px 4px 12px 14px;min-height:56px;text-align:left;color:var(--ink);font-family:inherit;
}
.hc-h{width:44px;flex:none;font-size:14px;font-weight:700;color:var(--brand);display:flex}
.hc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hc-t b{font-size:15px}
.hc-t small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .hc-cobrar{flex:none}
#home .hc-listas{
  width:100%;padding:12px 14px;min-height:56px;gap:12px;text-align:left;
  font-family:inherit;color:var(--ink);
}
.hc-listas .hc-h{color:var(--ok)}
#home .hc-plegar{align-self:center;background:none;border:0;color:var(--brand);font-weight:600;font-size:14px;padding:8px 12px}

/* ── el teléfono: la barra de arriba, clara ── */
@media (max-width:899px){
  #home .barra{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line)}
  #home .barra h1{color:var(--ink)}
  #home .barra .sub{color:var(--muted)}
  #home .volver,#home .dia-fl,#home .dia-hoy{background:var(--line2);color:var(--ink2)}
  #home .yo,#home .lupa-boton{background:var(--line2);border-color:var(--line);color:var(--ink2)}
  #home .volver-a,#home .barra-accion{display:none}
  #home .barra :focus-visible{outline-color:var(--brand)}
}

/* ── el computador: sin banda, y el menú con todo ── */
@media (min-width:900px){
  #home > .barra{grid-column:2;grid-row:1}
  #home .pestanas{grid-row:1 / 4;padding:18px 12px 14px}
  #home .barra{
    background:transparent;color:var(--ink);box-shadow:none;position:static;
    padding:26px 32px 6px;
  }
  #home .barra-dentro{align-items:center;gap:12px}
  #home .barra h1{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
  #home .barra .sub{font-size:14px;color:var(--muted);margin-top:3px}
  #home .barra .campana-caja,#home .barra .lupa-boton,#home .barra .yo{display:none}
  #home .barra .volver{
    display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 10px;margin:0;
    background:var(--card);color:var(--brand);border:1px solid var(--line);border-radius:10px;
    font-size:14px;font-weight:600;
  }
  #home .barra .volver:hover{background:var(--line2)}
  #home .barra .volver-a{white-space:nowrap}
  /* ⚠️ `width:auto`: más arriba la flecha sola mide 44 px fijos, y con el
     nombre adentro el texto se salía del botón y se montaba sobre el título. */
  #home .barra .volver{width:auto;min-width:0;flex:none}
  #home .dia-fl,#home .dia-hoy{background:var(--card);color:var(--ink2);border:1px solid var(--line);margin-top:0}
  #home .dia-fl:hover,#home .dia-hoy:hover{background:var(--line2)}
  /* ⚠️ `width:auto`: `.boton` mide el ancho entero en el teléfono, y acá
     se comía la barra y aplastaba el título contra el borde. */
  #home .barra .barra-accion{margin:0 0 0 auto;flex:none;width:auto;min-height:40px;padding:0 16px}
  #home .barra :focus-visible{outline-color:var(--brand)}
  /* Agendar ya está arriba, al lado del título: el botón del mes sobraría. */
  #home .lienzo .agendar-arriba{display:none}
  .leyenda-estados{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12.5px;color:var(--muted)}
  .leyenda-estados span{display:inline-flex;align-items:center;gap:6px}
  .leyenda-estados i{display:inline-block;width:22px;height:13px;border-radius:3px}
  .le-agendada{background:var(--brandl)}
  .le-atendiendo{background:var(--brand)}
  .le-por-cobrar{background:var(--warnl);box-shadow:inset 3px 0 0 var(--warn)}
  .le-lista{background:var(--okl);box-shadow:inset 3px 0 0 var(--ok)}
  .le-atrasada{background:var(--alertl);box-shadow:inset 3px 0 0 var(--alert)}
  .le-por-confirmar{outline:1.5px dashed var(--warn);outline-offset:-1.5px}

  /* la cabeza del menú: la marca y el botón de plegar */
  #home .pestanas .lat-cab{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 2px 14px 4px}
  #home .pestanas .marca-lat{
    display:flex;flex-direction:row;align-items:center;gap:9px;min-height:0;padding:4px 2px;
    background:none;border-radius:8px;color:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.02em;
  }
  #home .pestanas .marca-lat:hover{background:none}
  #home .pestanas .marca-lat .marca-simbolo{color:var(--brand)}
  #home .pestanas .marca-lat .mt-nombre span{color:var(--brand)}
  #home .pestanas .marca-lat small{color:var(--muted);font-size:12px;font-weight:500}
  #home .pestanas .plegar{
    width:32px;height:32px;min-height:0;padding:0;justify-content:center;flex:none;
    background:transparent;color:var(--muted);border-radius:8px;
  }
  #home .pestanas .plegar:hover{background:var(--line2);color:var(--ink2)}
  /* el buscador, escrito como una caja */
  #home .pestanas .lat-buscar{
    display:flex;flex-direction:row;align-items:center;gap:9px;width:100%;height:40px;min-height:40px;
    padding:0 8px 0 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:10px;
    background:var(--line2);color:var(--muted);font-size:14px;font-weight:500;
  }
  #home .pestanas .lat-buscar:hover{border-color:var(--brand);background:var(--card)}
  .lb-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* abajo: los avisos y la cuenta */
  #home .pestanas .lat-pie{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
  #home .lat-campana{margin-left:0;width:100%}
  #home .pestanas .lat-avisos{width:100%}
  .lat-n{
    margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--warn);
    color:#FFF;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  }
  .lat-n.urge{background:var(--alert)}
  /* ⚠️ `position:fixed` Y NO `absolute`: el menú lateral se desplaza por dentro
     (`overflow-y:auto`) y recortaría la lista de avisos, que se abre hacia el
     lado del contenido. */
  #home .lat-campana .avisos-panel{position:fixed;left:250px;right:auto;top:auto;bottom:76px}
  #home .pestanas .lat-yo{
    display:flex;flex-direction:row;align-items:center;gap:10px;min-height:52px;padding:8px 10px;
    border-radius:10px;text-align:left;
  }
  .lat-av{
    width:34px;height:34px;border-radius:50%;background:var(--brandd);color:#FFF;flex:none;
    font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  }
  .lat-yo-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
  .lat-yo-txt b{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lat-yo-txt small{font-size:12.5px;color:var(--muted);font-weight:500}
  /* plegado: quedan los dibujos */
  #home.plegado .pestanas .lat-cab{flex-direction:column;gap:8px;padding:2px 0 12px}
  #home.plegado .lat-cab .marca-txt{display:none}
  #home.plegado .pestanas .lat-buscar{width:46px;padding:0;justify-content:center}
  #home.plegado .lat-buscar .lb-txt,#home.plegado .lat-buscar kbd{display:none}
  #home.plegado .lat-n{position:absolute;right:3px;top:3px;min-width:16px;height:16px;font-size:10.5px;padding:0 4px}
  #home.plegado .pestanas .lat-yo{width:46px;padding:6px 0;justify-content:center}
  #home.plegado .lat-yo-txt{display:none}
  #home.plegado .lat-campana .avisos-panel{left:76px}
}

/* ══ REDISEÑO, PARTE 2 (28-09-2026): LA VISITA, SUS PASOS Y LA RUTA ════════ */

/* ── el estado de la visita, al lado del nombre del paciente en el título ── */
#home .barra h1 .sello{margin-left:10px;vertical-align:4px;font-size:12.5px;letter-spacing:.02em}

/* ── la franja de los pasos, arriba de la ficha, los documentos y el cobro ── */
.fl-franja{
  display:flex;align-items:center;padding:7px 10px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;overflow-x:auto;
}
#home .fl-f-paso{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 6px;flex:none;
  border:0;border-radius:999px;background:none;color:var(--muted);font:600 14px/1 inherit;white-space:nowrap;
}
#home button.fl-f-paso:hover{background:var(--line2);color:var(--ink)}
#home .fl-f-paso.listo{color:var(--ink2)}
#home .fl-f-paso.actual{background:var(--brandl);color:var(--brand);font-weight:700}
#home .fl-franja .fl-num{width:24px;height:24px;font-size:12px}
#home .fl-f-paso.actual .fl-num{background:var(--brand);color:var(--sobre-marca,#FFF)}
.fl-f-raya{flex:1;min-width:14px;height:2px;margin:0 4px;background:var(--line)}
.fl-f-raya.ok{background:var(--ok)}
@media (max-width:699px){
  /* En el teléfono no caben los cuatro nombres: queda escrito el de esta
     pantalla, y los otros tres son su número o su ✓. */
  #home .fl-f-paso:not(.actual) .fl-f-tit{display:none}
  #home .fl-f-paso:not(.actual){padding:0 6px}
}

/* ── la ruta: los mismos símbolos que el mapa de Google ── */
.g-ini{
  display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;box-sizing:border-box;
  background:#FFF;border:3px solid #3C4043;
}
.g-fin{display:inline-block;width:14px;height:19px;flex:none}
.rt-g-ley{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px;color:var(--muted)}
.rt-g{display:inline-flex;align-items:center;gap:6px}
.rt-g b{color:var(--ink);font-weight:650}
.rt-g-quien{color:var(--muted);font-size:12.5px}
.rt-g-fl{color:var(--muted)}
#home .rt-letra.g,#home .rt-letra.punto{background:transparent;color:var(--ink)}
#home .rt-letra.punto::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--line)}
#home .rt-fila.en-mapa .rt-parada{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
/* «Cómo llegar» escrito en cada paciente, y no solo el alfiler: una flecha o
   un pin sueltos son una adivinanza la primera vez. */
#home .rt-dos .rt-ir span,#home .rt-ir span{display:inline}
#home .rt-dos .rt-ir,#home .rt-ir{padding:0 12px}
#home .rt-mapa-todo{white-space:nowrap;flex:none}

/* ══ REDISEÑO, PARTE 3 (28-09-2026): EXÁMENES Y CONFIGURACIÓN EN DOS
   COLUMNAS, Y LA HISTORIA DEL PACIENTE EN UNA SOLA LÍNEA ══════════════════ */

/* ── Exámenes: la tarjeta entera abre el resultado ── */
#home .ex-abrir{
  display:flex;flex-direction:column;gap:6px;width:100%;padding:0;border:0;
  background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;
}
#home .ex-abrir .que{display:block}
.res-cab{display:flex;flex-direction:column;gap:2px;margin-bottom:2px}
.res-cab b{font-size:18px;letter-spacing:-.01em}
.res-cab small{font-size:13px;color:var(--muted)}
@media (min-width:900px){
  /* ── Configuración: el índice a la izquierda (desde 1100 px) ── */
  #home .lienzo.dos.de-cuenta{grid-template-columns:320px minmax(0,1fr)}
  #home .de-cuenta .col-lista{padding:20px 16px 40px 32px}
  #home .de-cuenta .col-detalle{padding:20px 32px 48px}
  #home .de-cuenta .ajustes{display:flex;flex-direction:column;gap:14px}
  #home .aj-op[aria-current="true"]{background:var(--brandl);color:var(--brand)}
}

/* ── la ficha del paciente: «Todo», la historia en una sola línea ── */
.hx{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 0}
#home .hx-fila{
  display:grid;grid-template-columns:92px 14px minmax(0,1fr);gap:12px;align-items:start;
  width:100%;padding:11px 18px;border:0;background:none;text-align:left;color:var(--ink);font:inherit;
}
#home button.hx-fila:hover{background:var(--line2)}
.hx-cuando{font-size:13px;color:var(--muted);text-align:right;padding-top:1px;font-variant-numeric:tabular-nums}
.hx-punto{width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--ic-tiempo)}
.hx-punto.hx-doc,.hx-punto.hx-ex{background:var(--ic-papel)}
.hx-punto.hx-cor{background:var(--ic-afuera)}
.hx-cuerpo{display:block;min-width:0;font-size:14.5px}
.hx-tipo{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ic-tiempo)}
.hx-tipo.hx-doc,.hx-tipo.hx-ex{color:var(--ic-papel)}
.hx-tipo.hx-cor{color:var(--ic-afuera)}
.hx-cuerpo small{display:block;font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:599px){
  #home .hx-fila{grid-template-columns:74px 12px minmax(0,1fr);gap:10px;padding:10px 12px}
}

/* ══ EL INFORME DE UN EXAMEN, EN UN PANEL QUE ENTRA POR EL COSTADO ══════════
   28 de septiembre de 2026, pedido de Seba. Solo en el computador: en el
   teléfono el visor de siempre ya ocupa la pantalla entera. El fondo se
   oscurece poco y sin desenfoque, para que el tablero se siga leyendo atrás. */
@media (min-width:900px){
  #home .velo.velo-lado{
    display:flex;justify-content:flex-end;align-items:stretch;padding:0;
    background:rgba(10,25,34,.30);-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  #home .velo-lado .marco{
    width:min(760px,60vw);max-width:none;height:100%;max-height:none;
    border-radius:16px 0 0 16px;box-shadow:-18px 0 50px rgba(0,0,0,.28);
  }
  #home .velo-lado .visor-pdf{min-height:0;height:100%}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  #home .velo-lado .marco{animation:entra-lado .24s cubic-bezier(.2,.7,.3,1)}
  @keyframes entra-lado{from{transform:translateX(48px);opacity:.3}to{transform:none;opacity:1}}
}

/* ══ LA RUTA 3: EL MAPA INTERACTIVO CON NUESTROS PUNTOS (28-09-2026) ═══════
   ⚠️ SIN `#home` DELANTE: el mapa vive fuera de la aplicación (en el `body`,
   para no recargarse al redibujar), así que las reglas de adentro no lo
   alcanzan. La letra se pone a mano por lo mismo. */
.mapa-vivo{border-radius:14px;overflow:hidden;background:#E9EEF1}
.mv-et{
  position:absolute;display:flex;align-items:center;gap:6px;white-space:nowrap;
  transform:translate(-9px,-9px);font:650 12.5px/1.2 "IBM Plex Sans",system-ui,sans-serif;
}
.mv-et i{
  width:18px;height:18px;border-radius:50%;flex:none;box-sizing:border-box;
  background:#1C5FC4;border:3px solid #FFF;box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.mv-et span{padding:4px 8px;border-radius:7px;background:#15232C;color:#FFF;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mv-et.off i{background:#8A99A2}
.mv-et.off span{background:rgba(255,255,255,.94);color:#43555F}
.mv-et.sal i{background:#FFF;border:4px solid #15232C}
.mv-et.on{z-index:2}
/* El mismo punto azul en la lista, al lado de las paradas que el mapa muestra. */
.mv-punto{
  display:inline-block;width:16px;height:16px;border-radius:50%;box-sizing:border-box;
  background:#1C5FC4;border:3px solid #FFF;box-shadow:0 0 0 1.5px #1C5FC4;
}

/* ══ RONDA 5 (28-09-2026, noche): EL MENÚ DE COLOR, LA VISITA 1, DOCUMENTOS H,
   CONFIGURACIÓN CON SU INICIO Y LOS EXÁMENES EN UNA LÍNEA ═════════════════ */

/* ── el menú de la izquierda vuelve a tener color (Seba: «muy blanco se ve
   demasiado plano»). Es el mismo campo de la barra de antes, así que sigue
   la paleta que se elija. ── */
@media (min-width:900px){
  #home .pestanas{background:linear-gradient(180deg,var(--campo) 0%,var(--campo-hondo) 100%);border-right:0}
  #home .pestanas button{color:rgba(255,255,255,.78)}
  #home .pestanas button:hover{background:rgba(255,255,255,.08)}
  #home .pestanas button[aria-current="true"]{background:rgba(255,255,255,.15);color:#FFF}
  #home .pestanas .globito{background:#FFF;color:var(--campo-hondo)}
  #home .pestanas .marca-lat,#home .pestanas .marca-lat .marca-simbolo{color:#FFF}
  #home .pestanas .marca-lat .mt-nombre span{color:var(--campo-tenue)}
  #home .pestanas .marca-lat small{color:var(--campo-tenue)}
  #home .pestanas .plegar{color:rgba(255,255,255,.7)}
  #home .pestanas .plegar:hover{background:rgba(255,255,255,.1);color:#FFF}
  #home .pestanas .lat-buscar{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72)}
  #home .pestanas .lat-buscar:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
  #home .pestanas .lat-pie{border-top-color:rgba(255,255,255,.14)}
  .lat-yo-txt b{color:#FFF}
  .lat-yo-txt small{color:var(--campo-tenue)}
  .lat-av{background:#FFF;color:var(--campo-hondo)}
}

/* ── la visita 1: los pasos en tarjetas y el paciente al lado ── */
.visita-cuerpo.v1{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.v1-izq{display:flex;flex-direction:column;gap:14px;min-width:0}
.v1-der{display:none}
#home .v1-izq .flujo{margin:0}
.v1-izq .fl-cabeza{display:flex;align-items:center;gap:14px}
.v1-izq .fl-barra{flex:1;max-width:260px;margin-left:auto;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.v1-izq .fl-barra i{display:block;height:100%;background:var(--ok);border-radius:3px}
#home .flujo .fl-accion{align-self:flex-start;margin-top:auto}
#home .fl-paso.sigue .fl-accion{background:var(--brand);border-color:var(--brand);color:var(--sobre-marca,#FFF)}
/* Documentos es opcional: se ve más callado y no dice «Lo que sigue». */
#home .fl-paso.opcional{border-style:dashed;background:transparent}
@media (min-width:1100px){
  .visita-cuerpo.v1{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
  .v1-der{display:flex;flex-direction:column;gap:10px}
  #home .v1-der .boton{width:100%;justify-content:flex-start;margin:0}
  /* El paciente y el tutor ya están en la columna de al lado. */
  #home .par-fichas.en-visita{display:none}
}

/* ── los exámenes: lo que decide en una línea, el porqué en la ⓘ ── */
.si-linea{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:9px 12px;border-radius:10px;
  font-size:14px;line-height:1.35;
}
.si-linea.si{background:var(--okl);color:var(--ok)}
.si-linea.ojo{background:var(--warnl);color:var(--warn)}
.si-linea.no{background:var(--alertl);color:var(--alert)}
.si-linea > span{color:var(--ink2)}
.si-linea .ayuda{margin-left:auto}
.si-linea .ayuda.abierta{flex-basis:100%;margin-left:0}
.si-linea .ayuda-texto{color:var(--ink2)}

/* ── Configuración: su página de inicio y la apariencia en dos filas ── */
.aj-inicio{display:flex;flex-direction:column;gap:8px;max-width:640px}
.aj-inicio h2{margin:0 0 6px;font-size:19px;letter-spacing:-.01em}
#home .aj-in-fila{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;
}
#home .aj-in-fila:hover{border-color:var(--brand)}
.aj-in-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.aj-in-t b{font-size:15px}
.aj-in-t small{font-size:13px;color:var(--muted)}
.aspecto{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.asp-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.asp-rot{width:52px;font-size:13px;font-weight:650;color:var(--muted)}
.asp-colores{display:flex;gap:10px}
#home .asp-color{width:28px;height:28px;min-height:28px;padding:0;border-radius:50%;border:2px solid var(--card);background:var(--p-brand);box-shadow:0 0 0 1px var(--line)}
#home .asp-color.puesta{box-shadow:0 0 0 2px var(--p-brand)}
.asp-tema{display:inline-flex;padding:3px;border-radius:10px;background:var(--line2)}
#home .asp-tema button{min-height:32px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink2);font:600 13px inherit}
#home .asp-tema button.puesta{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(16,32,44,.12)}

/* ── Documentos H: una lista como la de la visita ── */
.dl{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dl-cab{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line2)}
.dl-cab b{font-size:15px}
.dl-f{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line2)}
.dl-f:last-child{border-bottom:0}
.dl-f.ok{background:var(--okl)}
.dl-ic{width:36px;height:36px;border-radius:10px;background:var(--ic-papel-l);color:var(--ic-papel);display:flex;align-items:center;justify-content:center}
.dl-f.ok .dl-ic{background:var(--card);color:var(--ok)}
.dl-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-t b{font-size:15px}
.dl-t small{font-size:13px;color:var(--muted)}
.dl-acc{display:flex;gap:6px}
#home .dl-acc .boton{width:auto;min-height:38px;padding:0 14px;margin:0}
.dl .papel-abierto{padding:14px 18px;border-bottom:1px solid var(--line2)}
.dl-cuenta{font-size:13.5px;color:var(--muted)}
.fl-accion{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--brand);font-size:13px;font-weight:650}

/* ══ LO GRABADO, ADENTRO DE LA FICHA (28-09-2026, la «B» del lienzo) ════════
   Ya no hay lista aparte: cada campo lleva debajo la frase de donde salió. El
   magenta es la familia del micrófono (`--ic-afuera`) y marca DE DÓNDE salió
   algo; lo que significa algo lo siguen diciendo los sellos de siempre: verde
   «está en la grabación», ámbar «no lo encontré». */
#home .grab-listo{
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:12px 14px;margin:0 0 16px;border-radius:var(--r2);
  background:var(--card);border:1px solid var(--line);
  box-shadow:inset 4px 0 0 var(--ic-afuera);
}
#home .gl-ic{
  width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--ic-afuera-l);color:var(--ic-afuera);
}
#home .gl-txt{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
#home .gl-txt b{font-size:15.5px}
#home .gl-txt small{font-size:13px;color:var(--muted);line-height:1.45;max-width:72ch}
#home .gl-acc{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin-left:auto}
#home .de-grab{
  display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;margin:-4px 0 14px;
  font-size:12.5px;line-height:1.4;color:var(--muted);
}
#home .dg-cita{font-style:italic;min-width:0}
#home .dg-cita .ic{display:inline-block;color:var(--ic-afuera);vertical-align:-3px;margin-right:5px}
#home .de-grab.ofrece{padding:8px 10px;border-radius:10px;background:var(--ic-afuera-l);color:var(--ink2)}
#home .de-grab.ofrece .dg-cita{font-style:normal;flex:1 1 220px}
#home .s-grab{background:var(--ic-afuera-l);color:var(--ic-afuera)}
#home .exf-nom{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
#home .exf-grab{
  display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink2);
}
#home .exf-grab > .ic{color:var(--ic-afuera);flex:none;margin-top:2px}
#home .exf-grab > span{flex:1 1 260px;min-width:0}
#home .exf-rev{color:var(--warn);font-weight:600}
#home .exf-grab.frenado{padding:10px 12px;border:0;border-radius:10px;background:var(--warnl);color:var(--warn)}
#home .exf-grab.frenado > .ic{color:var(--warn)}

/* ══ LOS CAMPOS CON EL RÓTULO ADENTRO (28-09-2026) ════════════════════════
   Pedido de Seba con el Textarea de Material Tailwind a la vista. Vacía, la
   caja muestra su nombre donde va el texto; al tocarla o con algo escrito, el
   nombre sube al borde (animado) y aparece el ejemplo gris.
   ⚠️ EL FONDO DEL RÓTULO ES MITAD TRANSPARENTE: tapa solo la línea del borde
   y la mitad de abajo, que es la caja. Con un fondo entero de color, sobre el
   suelo gris quedaría un parche blanco arriba del borde.
   ⚠️ El borde es `--linea-campo`, más oscuro que el de las tarjetas: es lo
   que hace que las cajas donde se escribe se distingan del resto. */
#home .campo.flota{gap:6px}
#home .fl-caja{position:relative}
#home .fl-caja > input,#home .fl-caja > textarea{
  border:1px solid var(--linea-campo);background:var(--card);padding:17px 12px 9px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#home .fl-caja > textarea{padding-top:19px}
#home .fl-caja > label{
  position:absolute;left:9px;top:13px;max-width:calc(100% - 18px);padding:0 4px;
  display:block;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;line-height:18px;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  background:linear-gradient(to bottom,transparent 48%,var(--card) 48%);
  transition:top .2s ease,font-size .2s ease,color .2s ease;
}
#home .fl-caja > :is(input,textarea)::placeholder{color:transparent;transition:color .2s ease}
#home .fl-caja > :is(input,textarea):focus::placeholder{color:var(--faint)}
#home .fl-caja > :is(input,textarea):is(:focus,:not(:placeholder-shown)) + label{
  top:-9px;font-size:12px;font-weight:600;color:var(--ink2);
}
#home .fl-caja > :is(input,textarea):focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
#home .fl-caja > :is(input,textarea):focus + label{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  #home .fl-caja > label,#home .fl-caja > :is(input,textarea){transition:none}
}

/* ══ RONDA 6: EL LIENZO «HOME · ATENCIÓN, RECETA Y COBRO» (28-09-2026) ═════
   Aprobado por Seba. Diario: `docs/CONTINUAR-HOME.md` 133. */

/* Los botones de un texto largo —dictar, traer la anterior— van adentro de
   la caja, abajo a la derecha; el texto les deja su espacio. */
#home .fl-caja.con-acc > textarea{padding-bottom:50px}
#home .fl-caja > .campo-acc{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;margin:0}

/* Las tarjetas: la ficha en tres partes, y la receta. Mismo dibujo que la
   del examen físico, que ya estaba. */
#home .fi-bloque{border:1px solid var(--line);border-radius:14px;background:var(--card);margin:6px 0 16px;overflow:hidden}
#home .fi-cab{
  display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px;border-bottom:1px solid var(--line2);
  font-size:15.5px;font-weight:650;color:var(--ink);letter-spacing:0;text-transform:none;
}
#home .fi-cuenta{
  min-width:22px;height:20px;padding:0 7px;border-radius:999px;background:var(--line2);color:var(--ink2);
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}
#home .fi-cuerpo{padding:18px 16px 8px;display:flex;flex-direction:column;gap:16px}
#home .fi-cuerpo .campo{margin:0}
#home .fi-pie{padding:12px 16px 14px}
#home .fi-vacio{margin:14px 16px 0}
#home .exf-num{row-gap:18px}
#home .exf-num .fl-caja > label{font-size:14px}

/* La atención anterior, en el panel del paciente. */
#home .pa-ant{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
#home .pa-ant-cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#home .pa-ant-cab b{font-size:14.5px}
#home .pa-ant-cab span{font-size:13px;color:var(--muted)}
#home .pa-ant-dl{margin:0;display:flex;flex-direction:column;gap:7px}
#home .pa-ant-dl dt{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#home .pa-ant-dl dd{
  margin:1px 0 0;font-size:14px;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#home .pa-ant .boton{align-self:flex-start;width:auto}
#home .pa-ant-mas{font-size:12.5px;color:var(--muted)}

/* La ficha anterior en el visor: una hoja blanca sobre el marco oscuro. */
#home .marco.ancho{max-width:980px}
#home .fa-cuerpo{background:var(--card);color:var(--ink);border-radius:6px;padding:20px 22px;display:flex;flex-direction:column;gap:14px}
#home .fa-fechas{display:flex;gap:6px;flex-wrap:wrap}
#home .fa-motivo{margin:0;color:var(--muted);font-size:14px}
#home .fa-cols{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px}
@media (max-width:760px){#home .fa-cols{grid-template-columns:minmax(0,1fr)}}
#home .fa-lee{margin:0}
#home .fa-lee dt{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
#home .fa-lee dd{margin:4px 0 16px;font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
#home .fa-vacio{color:var(--faint);font-style:italic}
#home .fa-lado{display:flex;flex-direction:column;gap:10px;min-width:0}
#home .fa-docs{display:flex;flex-direction:column;gap:6px}
#home .fa-doc{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink);font-size:14px;text-align:left;cursor:pointer;
}
#home .fa-doc:hover{border-color:var(--brand);background:var(--brandl)}

/* La ventana del medicamento: un formulario, clara como la lupa. */
#home .marco.claro{background:var(--card);max-width:720px;box-shadow:0 24px 60px rgba(10,25,34,.30)}
#home .marco.claro .visor-cab{border-bottom:1px solid var(--line)}
#home .marco.claro .visor-cab h3{color:var(--ink)}
#home .marco.claro .visor-cerrar{color:var(--muted)}
#home .marco.claro .visor-cerrar:hover{background:var(--line2);color:var(--ink)}
#home .marco.claro .visor-cuerpo{background:var(--card)}
#home .marco.claro .visor-pie{background:var(--suelo);border-top:1px solid var(--line)}
#home .marco.claro .visor-pie .boton.suave{background:var(--card);border-color:var(--line);color:var(--brand)}
#home .marco.claro .visor-pie .boton.suave:hover{background:var(--brandl)}
#home .marco.claro .acciones-papel{justify-content:flex-end}
#home .velo-form{align-items:center}
#home .vm-cuerpo{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
#home .vm-cuerpo .campo{margin:0}
#home .vm-cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){#home .vm-cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Los medicamentos añadidos. */
#home .fi-bloque .med-lista{display:flex;flex-direction:column;gap:0;margin:0}
#home .fi-bloque .med-item{border:0;border-bottom:1px solid var(--line2);border-radius:0;align-items:center;padding:14px 16px}
#home .med-n{
  width:32px;height:32px;border-radius:9px;background:var(--ic-papel-l);color:var(--ic-papel);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;flex:none;
}
#home .med-acc{display:flex;align-items:center;gap:6px;flex:none}
#home .med-acc .boton{width:auto}
#home .med-acc .med-quitar{width:40px;height:40px;border-radius:10px}
#home .med-agregar{width:100%;border-style:dashed}
#home .rec-todo{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:640px){#home .rec-todo{grid-template-columns:minmax(0,1fr)}}
#home .rc-poner{width:auto}
#home .rc-puesta{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-weight:600;font-size:13.5px}

/* La firma y el timbre digitales: un interruptor, sutil. */
#home .interruptor{
  display:flex;align-items:center;gap:12px;width:100%;min-height:44px;margin:4px 0 12px;
  padding:8px 2px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);
}
#home .int-riel{position:relative;width:38px;height:22px;border-radius:999px;background:var(--linea-campo);flex:none;transition:background .2s ease}
#home .int-riel i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFF;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s ease}
#home .interruptor.on .int-riel{background:var(--brand)}
#home .interruptor.on .int-riel i{transform:translateX(16px)}
#home .int-txt{display:flex;flex-direction:column;line-height:1.3}
#home .int-txt b{font-size:14px;font-weight:600}
#home .int-txt small{font-size:12.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){#home .int-riel,#home .int-riel i{transition:none}}

/* Resumen y documentos: el resumen arriba, los demás como islas, el envío
   al lado. */
#home .docs-rejilla{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
@media (max-width:1099px){#home .docs-rejilla{grid-template-columns:minmax(0,1fr)}}
#home .docs-izq{display:flex;flex-direction:column;gap:14px;min-width:0}
#home .isla{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
#home .isla.hecha{box-shadow:inset 0 3px 0 var(--ok)}
#home .isla-ic{
  width:40px;height:40px;border-radius:12px;background:var(--ic-papel-l);color:var(--ic-papel);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
#home .isla.hecha .isla-ic{background:var(--okl);color:var(--ok)}
#home .isla > b{font-size:15px}
#home .isla > small{font-size:13px;color:var(--muted);line-height:1.4}
#home .isla-acc{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}
#home .isla-acc .boton{width:auto}
#home .isla-fila{display:flex;align-items:center;justify-content:space-between;gap:8px}
#home .isla-resumen{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap}
#home .isla-resumen .isla-acc{margin:0 0 0 auto;padding:0}
#home .isla-txt{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:3px}
#home .isla-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#home .isla-t b{font-size:16px}
#home .isla-txt small{font-size:13.5px;color:var(--muted);line-height:1.4}
#home .islas-rot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
#home .islas-rot .rotulo,#home .islas-rot .pista{margin:0}
#home .islas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
#home .envio{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;position:sticky;top:16px;
}
#home .envio h3{margin:0;font-size:16px}
#home .envio .boton{width:100%}
#home .envio .pista{margin:0}
#home .env-para{margin:0;display:flex;flex-direction:column;font-size:14px;color:var(--ink);word-break:break-word}
#home .env-para span{font-size:12.5px;color:var(--muted)}
#home .env-lista{display:flex;flex-direction:column;gap:6px}
#home .env-f{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);font-size:14px;color:var(--muted);text-align:left;cursor:pointer;
}
#home .env-f.on,#home .env-f.fijo{color:var(--ink);border-color:var(--ok);background:var(--okl)}
#home .env-f.on .ic,#home .env-f.fijo .ic{color:var(--ok)}
#home .env-f.fijo{cursor:default}

/* Cobrar: el descuento en una línea y el total abajo, pegado al borde. */
#home .desc-fila{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--suelo);
}
#home .desc-rot{font-weight:650;font-size:14.5px}
#home .desc-tipo{flex:none}
#home .desc-valor{width:130px;flex:none}
#home .desc-motivo{flex:1 1 200px;min-width:0}
#home .desc-fila .campo{margin:0}
#home .desc-quitar{
  width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--alert);cursor:pointer;
}
#home .desc-quitar:hover{background:var(--alertl)}
#home .total-final{
  position:sticky;bottom:0;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:10px;padding:14px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(16,32,44,.08);
}
#home .total-final .et{font-size:16px;font-weight:650}
#home .total-final .cifra{font-size:28px;font-weight:700;letter-spacing:-.01em}

/* Archivos: una grilla con la imagen a la vista. */
#home .ar-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:4px}
#home .ar-tesela{position:relative;display:flex;flex-direction:column;min-width:0}
#home .ar-tesela .ar-abrir{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);width:100%}
#home .ar-img{
  position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted);
}
#home .ar-img img{width:100%;height:100%;object-fit:cover;display:block}
#home .ar-img.pdf{background:var(--ic-papel-l);color:var(--ic-papel)}
#home .ar-tipo{
  position:absolute;top:8px;left:8px;height:20px;padding:0 7px;border-radius:6px;background:var(--ic-papel);
  color:#FFF;font-size:11px;font-weight:700;display:inline-flex;align-items:center;
}
#home .ar-perfil{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:999px;background:rgba(10,20,28,.7);color:#FFF;font-size:11.5px;font-weight:600}
#home .ar-pie{display:flex;flex-direction:column;min-width:0}
#home .ar-pie b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .ar-pie small{font-size:12px;color:var(--muted)}
#home .ar-acc{position:absolute;top:6px;right:6px;display:flex;gap:4px}
#home .ar-acc .ar-foto,#home .ar-acc .ar-quitar{
  width:34px;height:34px;border-radius:9px;background:rgba(10,20,28,.62);color:#FFF;font-size:14px;
}
#home .ar-acc .ar-foto:hover,#home .ar-acc .ar-foto.es{background:var(--brand);color:#FFF}
#home .ar-acc .ar-quitar:hover{background:var(--alert);color:#FFF}
#home .ar-carga{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  background:linear-gradient(0deg,rgba(10,20,28,.75),rgba(10,20,28,0));
  color:#FFF;font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:6px;
}
#home .ar-carga i{height:4px;border-radius:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
#home .ar-carga i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:#FFF;border-radius:2px;animation:ar-carga 1.1s ease-in-out infinite}
@keyframes ar-carga{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){#home .ar-carga i::after{animation:none;width:100%;opacity:.6}}

/* ⚠️ LA CÁMARA DEL COMPUTADOR VIVE FUERA DE #home (ver `abrirCamara()`), así
   que no hereda ni las variables ni las clases de la aplicación: lleva sus
   propios colores. Es oscura de día y de noche, como un visor de cámara. */
.camara-velo{
  position:fixed;inset:0;z-index:1000;background:rgba(8,14,20,.6);display:flex;align-items:center;
  justify-content:center;padding:20px;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
}
.camara{width:100%;max-width:560px;background:#151E24;color:#E7EEF1;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;display:flex;flex-direction:column}
.camara svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cam-cab{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.cam-cab b{font-size:16px}
.cam-cab span{font-size:13.5px;color:#9FB6C0}
.cam-cerrar{margin-left:auto;width:44px;height:44px;border:0;border-radius:10px;background:none;color:#C8D8DF;font-size:17px;cursor:pointer}
.cam-cerrar:hover{background:rgba(255,255,255,.12);color:#FFF}
.cam-cuerpo{padding:16px;display:flex;flex-direction:column;gap:14px}
.cam-visor{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0B1116}
.cam-visor video{width:100%;height:100%;object-fit:cover;display:block}
.cam-vivo{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:999px;background:rgba(0,0,0,.5);color:#FFF;font-size:12px;
}
.cam-vivo i{width:8px;height:8px;border-radius:50%;background:#5FD08D}
.cam-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;
  border-radius:12px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#E7EEF1;
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.cam-btn.pri{background:#1C5FC4;border-color:#1C5FC4;color:#FFF}
.cam-btn:hover{filter:brightness(1.12)}
.cam-btn:focus-visible,.cam-cerrar:focus-visible{outline:2px solid #8FB6F0;outline-offset:2px}
.cam-obt{width:18px;height:18px;border-radius:50%;border:3px solid #FFF}
.cam-permiso{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:10px 6px}
.cam-permiso b{font-size:17px}
.cam-permiso p{margin:0;font-size:14px;color:#C6D5DB;line-height:1.5;max-width:40ch}
.cam-ic{width:60px;height:60px;border-radius:18px;background:rgba(110,163,240,.16);color:#8FB6F0;display:inline-flex;align-items:center;justify-content:center}
.cam-ic svg{width:30px;height:30px}
.cam-bot{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cam-tomadas{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9FB6C0;font-weight:700}
.cam-tomadas[hidden]{display:none}
.cam-tiras{display:flex;gap:8px;flex-wrap:wrap}
.cam-tiras img{width:74px;height:56px;object-fit:cover;border-radius:8px}
.cam-tomar{width:100%}
#home .marco.ventana-med{max-height:calc(100% - 24px)}
#home .vm-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#home .volver-agenda{align-self:flex-start;width:auto;margin-bottom:4px}
@media (max-width:599px){#home .islas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){
  #home .marco:is(.ancho,.claro) .visor-pie .acciones-papel{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:8px}
  #home .marco:is(.ancho,.claro) .visor-pie .boton{width:auto}
}