/* estilos heredados del mock aprobado por Leben (mock/mock-ficticio.html), 9-sep-2026 */

/* ============================================================================
   SISTEMA VISUAL DEFINITIVO — producto de la corredora
   Base: dirección C ("densidad amable"), con injertos medidos de A y B.
   Este archivo es la ÚNICA fuente de color, tipografía, espacio, radio y
   sombra del producto. Ningún componente declara un valor propio. Si un
   componente necesita un color que no está aquí, no necesita ese color.

   ---------------------------------------------------------------------------
   LA LEY DEL COLOR (injertada de B — leerla antes de tocar un solo valor)

     1. La SATURACIÓN dice CUÁNTO CORRE  -> el semáforo. Es lo único que grita.
     2. El TONO dice QUÉ ES              -> el ramo. SOLO en póliza y cliente,
                                            nunca en la pantalla de trabajo.
     3. El AZUL es marca y acción        -> no informa nada. Por eso puede ser
                                            un botón sin ensuciar la lectura.
     4. Todo lo demás es papel y tinta.

   Consecuencias duras:
   - El tipo de ticket NO tiene color. La aseguradora NO tiene color. El
     usuario NO tiene color. El canal de aviso NO tiene color fuera de la tira
     del año. Si algo nuevo pide un color, la respuesta por defecto es NO: se
     le da forma, posición o peso tipográfico.
   - El rojo macizo (--vencido-macizo) existe UNA vez y significa UNA cosa:
     algo ya venció. Ni un contador, ni un botón, ni un encabezado lo usan.
     Un conteo de pendientes no es una alarma; si el rojo también cuenta, deja
     de querer decir "esto ya venció".
   - Toda pastilla lleva SIEMPRE la palabra escrita. El color nunca viaja solo.

   ---------------------------------------------------------------------------
   LOS TRES BLOQUES DE TEMA, en este orden y sin excepciones:
     1) :root                                       -> paleta clara completa
     2) @media (prefers-color-scheme: dark)
          :root:not([data-theme="light"])           -> oscuro por el sistema
     3) :root[data-theme="dark"]                    -> oscuro por elección
   Ningún color se declara ÚNICAMENTE dentro de un bloque de tema: si el token
   no existe en :root, la pantalla se rompe para quien no ha elegido tema.

   ---------------------------------------------------------------------------
   CONTRASTE — medido, no estimado. Los números anotados por token son el
   PEOR caso contra las cuatro superficies del tema (--fondo, --panel,
   --ficha, --hundido). Mínimos: 4.5:1 texto, 3:1 gráfico y borde de control.
   ========================================================================= */

/* (sin fuentes externas: la política de seguridad solo permite el propio origen) */


/* ===========================================================================
   BLOQUE 0 — LO QUE NO CAMBIA CON EL TEMA
   Tipografía, escala, espacio, radios y medidas de estructura.
   ========================================================================= */
:root {

  /* -------------------------------------------------------------------------
     TIPOGRAFÍA — tres familias, tres oficios. No hay una cuarta.
     ---------------------------------------------------------------------- */

  /* Títulos, nombres de persona o empresa, y cifras grandes. Slab serif
     cálida: hace que la pantalla se lea como un documento y no como un
     tablero. Es lo que un Excel no puede hacer y se nota a un metro.
     ÚSALA POCO: título de pantalla, nombre de cliente, cifra de la banda. */
  --fuente-titulo: "Zilla Slab", Georgia, "Times New Roman", serif;

  /* Todo lo demás: filas, botones, etiquetas, prosa. Humanista y ligeramente
     estrecha, así entran más caracteres por fila sin sentirse apretada. */
  --fuente-ui: "Asap", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* SOLO identificadores que alguien copia o dicta por teléfono: número de
     póliza, número de ticket, cédula/RIF, cuenta bancaria. NUNCA prosa,
     nunca montos (los montos van en --fuente-ui con tabular-nums). */
  --fuente-dato: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* Escala. Base 16px de verdad. Si un dato no cabe a 15px, sobra contenido
     en esa celda: se apila, no se encoge la letra. */
  --t-etiqueta: 12px;   /* etiqueta de columna y de campo, en mayúsculas.
                           Subida de 11 a 12px: a 11px con letterspacing y
                           color secundario es el texto más difícil de la
                           pantalla, y el corredor lo lee 100 veces al día. */
  --t-pie: 12px;        /* nota al pie, moneda, número dentro de una fila */
  --t-menor: 13px;      /* segunda línea de una celda apilada */
  --t-fila: 15px;       /* dato principal de una fila */
  --t-base: 16px;       /* prosa, botones, campos, texto que se lee entero */
  --t-sub: 18px;        /* subtítulo de sección */
  --t-panel: 22px;      /* título de tarjeta o panel */
  --t-nombre: 28px;     /* nombre del cliente, título de pantalla */
  --t-cifra: 34px;      /* cifra grande de la banda de resumen */

  --peso-normal: 400;
  --peso-medio: 500;    /* dato principal de fila: el "casi negrita" del sistema */
  --peso-fuerte: 600;   /* títulos y botones */

  --alto-apretado: 1.18;  /* títulos y cifras */
  --alto-normal: 1.42;    /* filas y celdas */
  --alto-lectura: 1.58;   /* párrafos y el mensaje ya escrito */

  --track-etiqueta: 0.07em;  /* etiquetas en mayúsculas */
  --track-cifra: -0.01em;    /* cifras grandes: respiran mejor apretadas */

  /* REGLA DE SISTEMA, no de componente: todo número que alguien vaya a
     comparar de un vistazo lleva font-variant-numeric: tabular-nums.
     Montos, días, cuotas, conteos, fechas numéricas. Sin excepción. */

  /* -------------------------------------------------------------------------
     ESPACIO — escala corta para que nadie invente un valor a mano
     ---------------------------------------------------------------------- */
  --e-1: 2px;
  --e-2: 4px;
  --e-3: 6px;
  --e-4: 8px;
  --e-5: 12px;
  --e-6: 16px;
  --e-7: 20px;
  --e-8: 24px;
  --e-9: 32px;
  --e-10: 40px;

  /* Los cuatro números que definen la densidad del producto entero.
     Si se tocan, se toca todo. Medidos: con estos valores la fila de ticket
     de escritorio mide 65px, y en 900px de alto entran 12 tickets con su
     encabezado. Con 12px de relleno vertical medía 75px y entraban 10. */
  --fila-pad-y: 9px;    /* aire arriba y abajo DENTRO de la fila */
  --fila-pad-x: 14px;   /* aire a los lados DENTRO de la fila */
  --fila-gap: 4px;      /* separación ENTRE filas: son losas, no renglones */
  --fila-col-gap: 14px; /* separación entre columnas de la fila */

  /* -------------------------------------------------------------------------
     RADIOS — cada radio significa un tipo de objeto, no es decoración
     ---------------------------------------------------------------------- */
  --r-mini: 6px;    /* casilla del calendario, marca cuadrada */
  --r-boton: 10px;  /* botones y campos de formulario */
  --r-fila: 12px;   /* la losa de una fila */
  --r-panel: 18px;  /* tarjeta o panel completo */
  --r-chip: 999px;  /* pastilla de estado, globo de conteo, avatar */

  /* -------------------------------------------------------------------------
     MEDIDAS DE ESTRUCTURA
     ---------------------------------------------------------------------- */
  --barra-movil-alto: 62px;    /* barra inferior del teléfono */
  --rail-icono: 76px;          /* rail lateral con ícono y rótulo debajo */
  --rail-abierto: 208px;       /* rail lateral con rótulo al lado (>=1400) */
  --ficha-ancho: 340px;        /* panel de detalle en escritorio */
  --ficha-ancho-amplio: 360px; /* panel de detalle a partir de 1400 */
  --obra-max: 1600px;          /* ancho máximo del contenido */
  --alto-toque: 44px;          /* alto mínimo de lo tocable con el dedo.
                                  Aplica en TELÉFONO. En escritorio los
                                  controles de lista bajan a 36px: el ratón
                                  es preciso y la altura es espacio robado. */
  --barra-ramo: 4px;           /* la barra de color del ramo. Nunca más ancha:
                                  pasando 6px deja de ser una pestaña de
                                  archivador y empieza a ser decoración. */
  --paso: 140ms cubic-bezier(.2,.6,.3,1); /* toda transición del producto */
}


/* ===========================================================================
   BLOQUE 1 — TEMA CLARO (la base)
   ========================================================================= */
:root {
  color-scheme: light;

  /* -------------------------------------------------------------------------
     SUPERFICIES — cuatro niveles y no más.
     El fondo es papel greige cálido; la ficha es la losa que FLOTA encima
     (más clara, no más oscura: el papel bueno sube, no baja); el panel es el
     agrupador; lo hundido es lo que se lee o se rellena pero no flota.
     ---------------------------------------------------------------------- */
  --fondo:         #EAE7E1;  /* el papel: greige con sesgo oliva */
  --panel:         #F7F5F1;  /* panel agrupador: la ficha del cliente, un bloque */
  --ficha:         #FCFAF7;  /* la losa: una fila, una tarjeta, lo que flota */
  --hundido:       #DFDBD2;  /* pista de la barra de plazo, campo vacío, cabecera de tabla */
  --linea:         #DAD5CC;  /* separador fino, decorativo */
  --linea-fuerte:  #C6C0B4;  /* divisor con trabajo: banda de cifras, borde de panel */
  --borde-control: #82796D;  /* borde de campo y de botón secundario.
                                4.11 ficha · 3.93 panel · 3.47 fondo · 3.10 hundido.
                                Existe aparte de --linea-fuerte porque un
                                control necesita 3:1 y un separador no. */

  /* -------------------------------------------------------------------------
     TINTA — tres niveles. Peor caso contra las cuatro superficies.
     ---------------------------------------------------------------------- */
  --texto:    #23211D;  /* dato principal, nombres, títulos — 11.63:1 */
  --texto-2:  #565049;  /* segunda línea de celda, prosa secundaria — 5.76:1 */
  --texto-3:  #5E5952;  /* etiqueta de columna y de campo — 5.02:1
                           (era #6B655D = 4.67:1 contra el papel; subido) */
  --sobre-acento: #FFFFFF;  /* texto encima del azul de marca — 7.38:1 */

  /* -------------------------------------------------------------------------
     MARCA — azul de oficina, frío A PROPÓSITO.
     Frío para que nunca compita con el semáforo, que es cálido. Si la marca
     fuera naranja, el ojo tendría que decidir a cada rato qué naranja
     significa "urgente".
     ---------------------------------------------------------------------- */
  --acento:        #2B5B73;  /* 7.08 ficha · 5.98 fondo · 5.34 hundido */
  --acento-fuerte: #1F4557;  /* al pasar el ratón o al presionar */
  --acento-suave:  #DCE7EC;  /* fondo de pastilla de marca, fila activa del rail */
  --acento-borde:  #B9CFD9;  /* canto de una pastilla de marca */

  /* -------------------------------------------------------------------------
     SEMÁFORO — la saturación dice CUÁNTO CORRE. Lo único que puede gritar.
     Cuatro estados, no más. Cada uno con tono, relleno pálido y canto, para
     que la pastilla se lea aunque alguien no distinga bien los colores — y
     la pastilla SIEMPRE dice la palabra.
     Todos los tonos medidos ≥4.89:1 contra las cuatro superficies claras y
     ≥5.25:1 contra su propio relleno pálido.
     ---------------------------------------------------------------------- */
  --ok:            #3A6440;  /* Al día · Vigente · Procesado — 5.38 sobre su relleno */
  --ok-fondo:      #DCE8D6;
  --ok-borde:      #BBD1B3;

  --pronto:        #7E5210;  /* Vence pronto (3 días o menos) — 5.38 sobre su relleno.
                                Más oscuro de lo que uno escogería a ojo: un ámbar
                                "bonito" se esfuma contra la pista del reloj. */
  --pronto-fondo:  #F1E4C9;
  --pronto-borde:  #DDC694;

  --vencido:       #9C3A29;  /* Vencido · Esperando a <compañía> — 5.25 sobre su relleno */
  --vencido-fondo: #F3DCD6;
  --vencido-borde: #E0BAB0;

  --cerrado:       #5F5B54;  /* Cerrado · Rechazado · Renovada: ya no corre — 5.27 */
  --cerrado-fondo: #E6E3DC;
  --cerrado-borde: #CFC9BF;

  /* El ÚNICO relleno macizo y saturado del producto. Reservado a una sola
     idea: algo ya venció. Se repite una vez por cosa vencida — si hay tres,
     hay tres manchas — pero ningún otro concepto puede usarlo. */
  --vencido-macizo: #9C3A29;
  --sobre-vencido-macizo: #FFFFFF;  /* 6.88:1 */

  /* Globo de conteo de la navegación: es un CONTEO, no una alarma. Va en
     tinta, nunca en el rojo macizo. (Injerto de B: el rojo que también
     cuenta pendientes deja de querer decir "esto ya venció".) */
  --conteo-fondo: #3A342E;
  --conteo-texto: #FCFAF7;  /* 11.78:1 */

  /* -------------------------------------------------------------------------
     RAMOS — el tono dice QUÉ ES. Injerto reducido de la dirección B.
     Los siete comparten claridad y saturación (L 0.58, C 0.13 en OKLCH);
     solo cambia el ángulo de tono, así que ninguno grita más que otro y los
     siete juntos se leen como una fila de pestañas de archivador.
     Viven en un arco FRÍO (verde-azulado a magenta); el semáforo vive en el
     arco CÁLIDO. Los dos arcos no se tocan: una barra de ramo nunca se puede
     confundir con un semáforo.

     DÓNDE SE USAN — y solo aquí:
       · la barra de 4px al canto izquierdo de la TARJETA DE PÓLIZA
       · la pastilla de ramo dentro de la ficha de cliente y el filtro de ramo
     DÓNDE NO — nunca:
       · la fila de ticket, la tabla densa, la banda de resumen, la tarjeta de
         aviso, la barra de navegación. En la pantalla de trabajo el color lo
         manda el semáforo y nada más.
     Por qué la restricción: el ramo es el atributo MENOS volátil de una
     póliza — nunca cambia. Gastar el canal más caro (el tono) en el dato más
     estático es mal negocio cuando la pregunta de la pantalla es "qué me
     necesita hoy". Y un cliente tiene de 1 a 8 pólizas, nunca 60: ahí siete
     tonos ordenan; en una lista de 60 tickets, ruidan.

     Medidos sobre las superficies de ESTE sistema:
       tono sobre --ficha  : 3.91 a 4.41  (mínimo gráfico 3:1)
       texto sobre relleno : 7.24 a 7.70  (mínimo texto 4.5:1)
     ---------------------------------------------------------------------- */
  --ramo-salud-tono:        #048E7A;  /* Salud (individual y colectivo) */
  --ramo-salud-fondo:       #DDF7F0;
  --ramo-salud-texto:       #045A4D;

  --ramo-accidentes-tono:   #028A9B;  /* Accidentes personales */
  --ramo-accidentes-fondo:  #DCF6FB;
  --ramo-accidentes-texto:  #025763;

  --ramo-vida-tono:         #1882C0;  /* Vida */
  --ramo-vida-fondo:        #E4F2FE;
  --ramo-vida-texto:        #12527A;

  --ramo-auto-tono:         #6372C6;  /* Automóvil (el Excel dice "Vehículo") */
  --ramo-auto-fondo:        #ECF0FE;
  --ramo-auto-texto:        #3E487E;

  --ramo-patrim-tono:       #8E64B7;  /* Patrimoniales */
  --ramo-patrim-fondo:      #F4ECFE;
  --ramo-patrim-texto:      #593F74;

  --ramo-fianza-tono:       #AA5995;  /* Fianza */
  --ramo-fianza-fondo:      #FEE9F7;
  --ramo-fianza-texto:      #6C385E;

  --ramo-funerarios-tono:   #807972;  /* Servicios funerarios (el Excel dice
                                         "Funerario"). Gris a propósito: es el
                                         ramo más sobrio y el más raro, y
                                         quitarle el tono le baja un color al
                                         conjunto sin costar información. */
  --ramo-funerarios-fondo:  #F5EFE9;
  --ramo-funerarios-texto:  #524C45;

  /* -------------------------------------------------------------------------
     CANALES DE AVISO — correo y WhatsApp.
     SOLO tienen color dentro de la tira del año, donde no hay ningún estado
     con el que confundirse. Fuera de ahí un canal se distingue por su ícono
     y su palabra, nunca por su color.
     ---------------------------------------------------------------------- */
  --canal-correo:   #2B5B73;  /* el correo sale solo */
  --canal-whatsapp: #3A6440;  /* el WhatsApp lo manda una persona con un clic */

  /* -------------------------------------------------------------------------
     FOCO, SELECCIÓN Y SOMBRAS
     Las sombras van teñidas con la tinta del tema, nunca negro puro.
     ---------------------------------------------------------------------- */
  --foco: #2B5B73;
  --seleccion: #CFE0E8;

  --sombra-1: 0 0 0 1px rgba(35, 33, 29, 0.06), 0 1px 2px rgba(35, 33, 29, 0.06);  /* losa en reposo */
  --sombra-2: 0 0 0 1px rgba(35, 33, 29, 0.10), 0 3px 8px rgba(35, 33, 29, 0.11);  /* losa señalada */
  --sombra-3: 0 -2px 14px rgba(35, 33, 29, 0.10);                                  /* barra móvil */
  --sombra-4: 0 12px 32px rgba(35, 33, 29, 0.16), 0 2px 6px rgba(35, 33, 29, 0.10);/* hoja modal */
}


/* ===========================================================================
   BLOQUE 2 — TEMA OSCURO POR PREFERENCIA DEL SISTEMA
   Guardado con :root:not([data-theme="light"]) para que una elección explícita
   de tema claro le gane al sistema operativo.
   El oscuro NO es el claro invertido: los tonos SUBEN de claridad y BAJAN de
   saturación, porque un color saturado sobre negro vibra. Los rellenos
   pálidos se vuelven tintes oscuros del mismo tono.
   Aquí adentro solo se redefinen tokens. Ni un selector de componente.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --fondo:         #1A1816;
    --panel:         #232120;
    --ficha:         #2C2927;
    --hundido:       #131211;
    --linea:         #3A3532;
    --linea-fuerte:  #4B4541;
    --borde-control: #7C736C;  /* 3.11 ficha · 3.46 panel · 3.82 fondo */

    --texto:    #EDE9E2;  /* 11.94:1 peor caso */
    --texto-2:  #B4ADA3;  /* 6.50:1 */
    --texto-3:  #A79F96;  /* 5.53:1 (era #9E978E = 5.00; subido con su gemelo claro) */
    --sobre-acento: #131211;  /* sobre el azul claro del oscuro va tinta, no blanco */

    --acento:        #8FBACE;  /* 8.50:1 sobre el fondo */
    --acento-fuerte: #B0D0DF;
    --acento-suave:  #253C46;
    --acento-borde:  #3B5A66;

    --ok:            #93C489;
    --ok-fondo:      #2C3B26;
    --ok-borde:      #45613C;

    --pronto:        #E0AE63;
    --pronto-fondo:  #453320;
    --pronto-borde:  #6B4F2C;

    --vencido:       #EC9482;
    --vencido-fondo: #4A2820;
    --vencido-borde: #714034;

    --cerrado:       #ABA49B;
    --cerrado-fondo: #37332F;
    --cerrado-borde: #4E4842;

    --vencido-macizo: #AE3F2C;
    --sobre-vencido-macizo: #FFFFFF;  /* 5.92:1 */

    --conteo-fondo: #EDE9E2;  /* la tinta se invierte: papel sobre noche */
    --conteo-texto: #1A1816;  /* 14.63:1 */

    --ramo-salud-tono:        #45C2AB;
    --ramo-salud-fondo:       #072F28;
    --ramo-salud-texto:       #9CDDCE;

    --ramo-accidentes-tono:   #37BED3;
    --ramo-accidentes-fondo:  #032D34;
    --ramo-accidentes-texto:  #97DBE7;

    --ramo-vida-tono:         #64B3ED;
    --ramo-vida-fondo:        #112A3C;
    --ramo-vida-texto:        #A6D4F8;

    --ramo-auto-tono:         #94A5F3;
    --ramo-auto-fondo:        #21263E;
    --ramo-auto-texto:        #BFCBFC;

    --ramo-patrim-tono:       #BD97E4;
    --ramo-patrim-fondo:      #2D2239;
    --ramo-patrim-texto:      #D9C3F3;

    --ramo-fianza-tono:       #DA8EC4;
    --ramo-fianza-fondo:      #361F2F;
    --ramo-fianza-texto:      #EDBDDE;

    --ramo-funerarios-tono:   #B1A9A2;
    --ramo-funerarios-fondo:  #2C2721;
    --ramo-funerarios-texto:  #D4CCC4;

    --canal-correo:   #8FBACE;
    --canal-whatsapp: #93C489;

    --foco: #8FBACE;
    --seleccion: #2F4A55;

    --sombra-1: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40);
    --sombra-2: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 3px 10px rgba(0, 0, 0, 0.50);
    --sombra-3: 0 -2px 16px rgba(0, 0, 0, 0.55);
    --sombra-4: 0 14px 36px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.45);
  }
}


/* ===========================================================================
   BLOQUE 3 — TEMA OSCURO ELEGIDO A MANO
   Mismos valores que el bloque 2. Existe aparte para que el interruptor le
   gane al sistema operativo en LOS DOS sentidos.
   ========================================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --fondo:         #1A1816;
  --panel:         #232120;
  --ficha:         #2C2927;
  --hundido:       #131211;
  --linea:         #3A3532;
  --linea-fuerte:  #4B4541;
  --borde-control: #7C736C;

  --texto:    #EDE9E2;
  --texto-2:  #B4ADA3;
  --texto-3:  #A79F96;
  --sobre-acento: #131211;

  --acento:        #8FBACE;
  --acento-fuerte: #B0D0DF;
  --acento-suave:  #253C46;
  --acento-borde:  #3B5A66;

  --ok:            #93C489;
  --ok-fondo:      #2C3B26;
  --ok-borde:      #45613C;

  --pronto:        #E0AE63;
  --pronto-fondo:  #453320;
  --pronto-borde:  #6B4F2C;

  --vencido:       #EC9482;
  --vencido-fondo: #4A2820;
  --vencido-borde: #714034;

  --cerrado:       #ABA49B;
  --cerrado-fondo: #37332F;
  --cerrado-borde: #4E4842;

  --vencido-macizo: #AE3F2C;
  --sobre-vencido-macizo: #FFFFFF;

  --conteo-fondo: #EDE9E2;
  --conteo-texto: #1A1816;

  --ramo-salud-tono:        #45C2AB;
  --ramo-salud-fondo:       #072F28;
  --ramo-salud-texto:       #9CDDCE;

  --ramo-accidentes-tono:   #37BED3;
  --ramo-accidentes-fondo:  #032D34;
  --ramo-accidentes-texto:  #97DBE7;

  --ramo-vida-tono:         #64B3ED;
  --ramo-vida-fondo:        #112A3C;
  --ramo-vida-texto:        #A6D4F8;

  --ramo-auto-tono:         #94A5F3;
  --ramo-auto-fondo:        #21263E;
  --ramo-auto-texto:        #BFCBFC;

  --ramo-patrim-tono:       #BD97E4;
  --ramo-patrim-fondo:      #2D2239;
  --ramo-patrim-texto:      #D9C3F3;

  --ramo-fianza-tono:       #DA8EC4;
  --ramo-fianza-fondo:      #361F2F;
  --ramo-fianza-texto:      #EDBDDE;

  --ramo-funerarios-tono:   #B1A9A2;
  --ramo-funerarios-fondo:  #2C2721;
  --ramo-funerarios-texto:  #D4CCC4;

  --canal-correo:   #8FBACE;
  --canal-whatsapp: #93C489;

  --foco: #8FBACE;
  --seleccion: #2F4A55;

  --sombra-1: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40);
  --sombra-2: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 3px 10px rgba(0, 0, 0, 0.50);
  --sombra-3: 0 -2px 16px rgba(0, 0, 0, 0.55);
  --sombra-4: 0 14px 36px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.45);
}


/* ===========================================================================
   DICCIONARIO DE RAMOS — una clase, tres variables locales.
   Todo lo que quiera color de ramo lee --rt / --rf / --rx y NUNCA un color
   literal. Si algún día hay un octavo ramo, se agrega aquí y el producto
   entero lo entiende sin tocar un componente.
   Normalización del archivo del cliente: "Funerario" -> Servicios funerarios ·
   "Vehículo" -> Automóvil · "Emergencias Médicas" -> Salud (subtipo).
   ========================================================================= */
.ramo-salud       { --rt: var(--ramo-salud-tono);       --rf: var(--ramo-salud-fondo);       --rx: var(--ramo-salud-texto); }
.ramo-accidentes  { --rt: var(--ramo-accidentes-tono);  --rf: var(--ramo-accidentes-fondo);  --rx: var(--ramo-accidentes-texto); }
.ramo-vida        { --rt: var(--ramo-vida-tono);        --rf: var(--ramo-vida-fondo);        --rx: var(--ramo-vida-texto); }
.ramo-auto        { --rt: var(--ramo-auto-tono);        --rf: var(--ramo-auto-fondo);        --rx: var(--ramo-auto-texto); }
.ramo-patrim      { --rt: var(--ramo-patrim-tono);      --rf: var(--ramo-patrim-fondo);      --rx: var(--ramo-patrim-texto); }
.ramo-fianza      { --rt: var(--ramo-fianza-tono);      --rf: var(--ramo-fianza-fondo);      --rx: var(--ramo-fianza-texto); }
.ramo-funerarios  { --rt: var(--ramo-funerarios-tono);  --rf: var(--ramo-funerarios-fondo);  --rx: var(--ramo-funerarios-texto); }


/* ===========================================================================
   DICCIONARIO DE ESTADOS — misma mecánica.
   Un componente que muestre estado lleva una de estas cuatro clases y lee
   --et / --ef / --eb. No hay una quinta.
   "Vencido" NO es un estado que alguien marca: se CALCULA comparando la fecha
   de vencimiento con hoy. Enviado y Objetado son abiertos (el reloj corre);
   Procesado y Rechazado son cerrados.
   ========================================================================= */
.est-ok       { --et: var(--ok);      --ef: var(--ok-fondo);      --eb: var(--ok-borde); }
.est-pronto   { --et: var(--pronto);  --ef: var(--pronto-fondo);  --eb: var(--pronto-borde); }
.est-vencido  { --et: var(--vencido); --ef: var(--vencido-fondo); --eb: var(--vencido-borde); }
.est-cerrado  { --et: var(--cerrado); --ef: var(--cerrado-fondo); --eb: var(--cerrado-borde); }


/* ===========================================================================
   BASE DEL DOCUMENTO
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-ui);
  font-size: var(--t-base);
  line-height: var(--alto-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--seleccion); }

/* Títulos y nombres propios: slab serif. Es la regla, no una opción. */
h1, h2, h3, .nombre { font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte); line-height: var(--alto-apretado); }

/* Identificadores que alguien dicta por teléfono. */
.mono { font-family: var(--fuente-dato); font-size: 0.94em; letter-spacing: -0.01em; }

/* Todo número comparable. */
.num, .monto, .cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Foco de teclado: visible en los dos temas, siempre. */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-mini); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ===========================================================================
   COMPONENTES — construidos sobre tokens.css. Ningún color literal aquí.
   ========================================================================= */

/* --- ENTRADA ------------------------------------------------------------ */
.entrada {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--e-6);
  background: var(--fondo);
  overflow-y: auto;
}
.entrada[hidden] { display: none; }
.entrada-caja {
  width: 100%; max-width: 400px;
  background: var(--ficha); border-radius: var(--r-panel);
  box-shadow: var(--sombra-4);
  padding: var(--e-9) var(--e-8);
  display: grid; gap: var(--e-6);
}
.entrada-marca { display: flex; align-items: center; gap: var(--e-5); }

/* --- MARCA ---------------------------------------------------------------
   Los dos archivos de la corredora traen la tinta sobre papel blanco y no se
   pueden recolorear sin deformar el logotipo, asi que se sirven sobre su
   propia hoja. Es el unico blanco literal del producto y esta aqui a
   proposito: un logotipo no es un token de color, y en el tema oscuro una
   marca sin hoja se pierde. Las dos imagenes se dibujan siempre a la mitad o
   menos de su tamanio real (178x49 y 160x160) para que se vean nitidas en
   pantallas de doble densidad. */
.marca-iso, .marca-logo { display: block; background: transparent; object-fit: contain; }
.marca-iso { width: 36px; height: 36px; }
.marca-iso--grande { width: 80px; height: 80px; }
.marca-logo { width: 89px; height: 25px; }
.entrada-nombre { font-family: var(--fuente-titulo); font-size: var(--t-panel); line-height: var(--alto-apretado); }
.entrada-sub { font-size: var(--t-menor); color: var(--texto-2); }
.entrada-error { color: var(--vencido); font-size: var(--t-menor); }
.entrada-pie { font-size: var(--t-pie); color: var(--texto-3); text-align: center; }

/* --- ESTRUCTURA --------------------------------------------------------- */
.app { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.app[hidden] { display: none; }
.obra {
  width: 100%; max-width: var(--obra-max); margin: 0 auto;
  padding: var(--e-7) var(--e-6) calc(var(--barra-movil-alto) + var(--e-9));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-7); align-content: start;
}

/* Ninguna rejilla de una sola columna puede crecer con su contenido: si un
   nombre largo o un boton no cabe, se ajusta dentro, nunca desplaza la pagina. */
.entrada-caja, .cabecera, .seccion, .lista, .panel, .bloque, .aviso, .campo,
.calculado, .aporte, .tablero-principal, .filtro-grupo, .rejilla,
.tablero, .ficha-cabeza, .aviso-config-texto, .celda {
  grid-template-columns: minmax(0, 1fr);
}

/* --- NAVEGACIÓN --------------------------------------------------------- */
.rail { display: none; }
.barra-movil {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  height: calc(var(--barra-movil-alto) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--ficha); border-top: 1px solid var(--linea);
  box-shadow: var(--sombra-3);
}
.destino {
  display: grid; justify-items: center; align-content: center; gap: var(--e-1);
  color: var(--texto-2); min-height: var(--alto-toque);
  transition: color var(--paso), background var(--paso);
}
.destino svg { width: 20px; height: 20px; }
.destino-rotulo { font-size: 10.5px; letter-spacing: 0.01em; }
.destino[aria-current="page"] { color: var(--acento); }
.destino-globo {
  min-width: 17px; padding: 0 5px; border-radius: var(--r-chip);
  background: var(--conteo-fondo); color: var(--conteo-texto);
  font-size: 10.5px; font-variant-numeric: tabular-nums; line-height: 15px; text-align: center;
}
.barra-movil .destino { position: relative; }
.barra-movil .destino-globo { position: absolute; top: 4px; left: 54%; }

@media (min-width: 768px) {
  .barra-movil { display: none; }
  .app { grid-template-columns: var(--rail-icono) minmax(0, 1fr); }
  .obra { padding: var(--e-8) var(--e-7) var(--e-10); }
  .rail {
    display: flex; flex-direction: column; gap: var(--e-2);
    position: sticky; top: 0; height: 100vh;
    background: var(--panel); border-right: 1px solid var(--linea);
    padding: var(--e-6) var(--e-3) var(--e-5);
    overflow-y: auto;
  }
  .rail-marca { display: grid; justify-items: center; gap: var(--e-3); margin-bottom: var(--e-6); text-align: center; }
  .rail-logo { display: none; }
  .rail .destino {
    position: relative; border-radius: var(--r-boton);
    padding: var(--e-4) var(--e-2); gap: var(--e-2);
  }
  .rail .destino-rotulo { font-size: var(--t-etiqueta); }
  .rail .destino:hover:not([aria-current="page"]) { background: var(--hundido); color: var(--texto); }
  .rail .destino[aria-current="page"] { background: var(--acento-suave); color: var(--acento); }
  .rail .destino-globo { position: absolute; top: 2px; right: 8px; }
  .rail-pie { margin-top: auto; display: grid; justify-items: center; gap: var(--e-3); padding-top: var(--e-5); }
  .avatar {
    width: 30px; height: 30px; border-radius: var(--r-chip);
    background: var(--acento-suave); color: var(--acento);
    display: grid; place-items: center; font-size: var(--t-pie); font-weight: var(--peso-fuerte);
  }
  .rail-usuario { display: none; }
}
@media (min-width: 1400px) {
  .app { grid-template-columns: var(--rail-abierto) minmax(0, 1fr); }
  .rail { padding: var(--e-7) var(--e-5) var(--e-6); }
  .rail-marca { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: var(--e-4); text-align: left; }
  .rail-iso { display: none; }
  .rail-logo { display: block; }
  .rail .destino {
    grid-template-columns: 20px 1fr auto; justify-items: start; align-items: center;
    gap: var(--e-5); padding: var(--e-4) var(--e-5); grid-auto-flow: column;
  }
  .rail .destino-rotulo { font-size: var(--t-fila); }
  .rail .destino-globo { position: static; }
  .rail-pie { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: var(--e-4); width: 100%; }
  .rail-usuario { display: block; font-size: var(--t-pie); color: var(--texto-2); line-height: 1.25; }
}

/* --- CABECERA DE PANTALLA ---------------------------------------------- */
.cabecera { display: grid; gap: var(--e-5); }
.cabecera-alto { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-5) var(--e-6); }
.cabecera-titulo { flex: 1 1 260px; display: grid; gap: var(--e-2); }
.cabecera h1 { font-size: var(--t-nombre); }
.cabecera-fecha { font-size: var(--t-menor); color: var(--texto-2); }
.cabecera-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
@media (min-width: 768px) { .cabecera h1 { font-size: 32px; } }

/* --- INTERRUPTOR DE TEMA ------------------------------------------------ */
.tema { display: inline-flex; gap: 2px; padding: 3px; background: var(--hundido); border-radius: var(--r-chip); }
.tema button {
  font-size: var(--t-pie); padding: 6px 14px; border-radius: var(--r-chip);
  color: var(--texto-2); transition: background var(--paso), color var(--paso);
  min-height: var(--alto-toque); display: inline-flex; align-items: center;
}
@media (min-width: 768px) { .tema button { min-height: 0; } }
.tema button[aria-pressed="true"] { background: var(--ficha); color: var(--texto); box-shadow: var(--sombra-1); }

/* --- BOTONES ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-4);
  height: var(--alto-toque); padding: 0 var(--e-6);
  border-radius: var(--r-boton); border: 1px solid transparent;
  font-size: var(--t-base); font-weight: var(--peso-fuerte);
  transition: background var(--paso), color var(--paso), box-shadow var(--paso);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
@media (min-width: 768px) and (pointer: fine) { .btn { height: 40px; } }
.btn--principal { background: var(--acento); color: var(--sobre-acento); }
.btn--principal:hover { background: var(--acento-fuerte); }
.btn--secundario { background: var(--ficha); color: var(--texto); border-color: var(--borde-control); box-shadow: var(--sombra-1); }
.btn--secundario:hover { background: var(--panel); }
.btn--texto { color: var(--acento); padding: 0 var(--e-4); }
.btn--texto:hover { background: var(--acento-suave); }
.btn[disabled] { background: var(--hundido); color: var(--texto-3); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.btn--largo {
  white-space: normal; text-align: center; line-height: 1.25;
  height: auto; min-height: var(--alto-toque); padding: var(--e-4) var(--e-6);
}
@media (min-width: 768px) and (pointer: fine) { .btn--largo { min-height: 40px; } }
.btn-fila { display: flex; flex-wrap: wrap; gap: var(--e-4); }
/* "Ancho completo, uno debajo del otro" es 100 % de base, no auto. */
.btn-fila .btn { flex: 1 1 100%; }
@media (min-width: 768px) { .btn-fila .btn { flex: 0 0 auto; } }

/* --- PASTILLAS ---------------------------------------------------------- */
.pastilla {
  display: inline-flex; align-items: center; gap: var(--e-3);
  padding: 2px 10px 2px 8px; border-radius: var(--r-chip);
  font-size: var(--t-pie); font-weight: var(--peso-medio); white-space: nowrap;
  border: 1px solid var(--eb); background: var(--ef); color: var(--et);
}
.pastilla::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
.pastilla--marca { background: var(--acento-suave); color: var(--acento); border-color: var(--acento-borde); }
.pastilla--llana { background: transparent; color: var(--texto-2); border-color: var(--linea); }
.pastilla--llana::before, .pastilla--marca::before { display: none; }
.pastilla--ramo { background: var(--rf); color: var(--rx); border-color: transparent; }

/* --- BANDA DE RESUMEN --------------------------------------------------- */
/* En el telefono la banda de cifras baja debajo de los avisos: la primera
   pantalla tiene que mostrar trabajo, no estadisticas. En escritorio cabe
   arriba sin robarle sitio a nada. El orden base es el del codigo (2); solo
   la cabecera se ancla arriba y solo la banda se mueve. */
.obra > * { order: 2; }
.obra > .cabecera { order: 1; }
.obra > .banda { order: 3; }
@media (min-width: 768px) { .obra > .banda { order: 2; } }
.banda {
  background: var(--ficha); border-radius: var(--r-panel); box-shadow: var(--sombra-1);
  padding: var(--e-5) var(--e-2);
}
.banda-cifras { display: grid; grid-template-columns: repeat(2, 1fr); }
.banda-cifra { padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-1); justify-items: center; text-align: center; }
.banda-cifra + .banda-cifra { border-left: 1px solid var(--linea); }
.banda-cifras .banda-cifra:nth-child(odd) { border-left: 0; }
.banda-cifra b { font-family: var(--fuente-titulo); font-size: var(--t-cifra); font-variant-numeric: tabular-nums; letter-spacing: var(--track-cifra); line-height: var(--alto-apretado); }
.banda-cifra span { font-size: var(--t-pie); color: var(--texto-2); }
.banda-cifra--alerta b { color: var(--vencido); }
.banda-pie {
  margin-top: var(--e-5); padding: var(--e-5) var(--e-5) var(--e-2);
  border-top: 1px solid var(--linea);
  font-size: var(--t-menor); color: var(--texto-2); line-height: var(--alto-lectura);
}
@media (min-width: 768px) {
  .banda-cifras { grid-template-columns: repeat(5, 1fr); }
  .banda-cifras .banda-cifra:nth-child(odd) { border-left: 1px solid var(--linea); }
  .banda-cifras .banda-cifra:first-child { border-left: 0; }
}

/* --- SECCIONES ---------------------------------------------------------- */
.seccion { display: grid; gap: var(--e-5); }
.seccion-alto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-4); }
.seccion h2 { font-size: var(--t-sub); }
.seccion-conteo { font-size: var(--t-menor); color: var(--texto-2); }
.subtitulo { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }
.lista { display: grid; gap: var(--fila-gap); }

/* --- LOSAS Y FILAS ------------------------------------------------------ */
.losa {
  background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1);
  padding: var(--fila-pad-y) var(--fila-pad-x);
  transition: box-shadow var(--paso), transform var(--paso);
  text-align: left; width: 100%; display: block;
}
button.losa, a.losa { cursor: pointer; }
button.losa:hover, a.losa:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.losa--vencida { background: var(--vencido-fondo); }
.losa--atencion { background: var(--pronto-fondo); }   /* algo que hay que hacer, no algo vencido: la renovación que pasó sin su prima nueva */
.losa--atencion .dato-2 a { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
/* El relleno macizo existe una sola vez y significa una sola cosa: ya venció.
   Sin esto la pastilla usa --ef, que en .est-vencido ES --vencido-fondo. */
.losa--vencida .pastilla { background: var(--vencido-macizo); color: var(--sobre-vencido-macizo); border-color: var(--vencido); }
.losa--vencida .pastilla--llana { background: transparent; color: var(--texto-2); border-color: var(--linea); }
.losa--activa { box-shadow: var(--sombra-2); outline: 2px solid var(--acento); outline-offset: -1px; }
.celda { display: grid; gap: var(--e-1); min-width: 0; }
.celda-etiqueta { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }
.dato { font-size: var(--t-fila); font-weight: var(--peso-medio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dato-2 { font-size: var(--t-menor); color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.derecha { text-align: right; justify-items: end; }

.fila-ticket {
  display: grid; column-gap: var(--e-5); row-gap: var(--e-4);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tipo estado" "quien quien" "plazo monto";
}
.c-tipo { grid-area: tipo; } .c-quien { grid-area: quien; }
.c-monto { grid-area: monto; } .c-plazo { grid-area: plazo; } .c-estado { grid-area: estado; }
.tabla-cabecera { display: none; }
@media (min-width: 900px) {
  .fila-ticket {
    grid-template-areas: none;
    grid-template-columns: 116px minmax(150px, 1fr) 92px 118px 152px;
    column-gap: var(--fila-col-gap); row-gap: 0; align-items: center;
    padding: var(--e-5) var(--fila-pad-x);
  }
  .fila-ticket .celda-etiqueta { display: none; }
  .fila-ticket > * { grid-area: auto; }
  .tabla-cabecera {
    display: grid;
    grid-template-columns: 116px minmax(150px, 1fr) 92px 118px 152px;
    column-gap: var(--fila-col-gap);
    padding: 0 var(--fila-pad-x) var(--e-3);
  }
  .tabla-cabecera span { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }

  /* La retícula de 5 columnas es de la TABLA ANCHA. Dentro del panel lateral
     (340-360 px) la fila se queda apilada, como en teléfono: si no, pide
     620 px en una caja de 340 y se come el monto, el reloj y el estado. */
  .tablero-lado .fila-ticket {
    grid-template-areas: "tipo estado" "quien quien" "plazo monto";
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--e-5); row-gap: var(--e-4); align-items: start;
    padding: var(--fila-pad-y) var(--fila-pad-x);
  }
  .tablero-lado .fila-ticket .celda-etiqueta { display: block; }
  .tablero-lado .fila-ticket .c-tipo { grid-area: tipo; }
  .tablero-lado .fila-ticket .c-quien { grid-area: quien; }
  .tablero-lado .fila-ticket .c-monto { grid-area: monto; }
  .tablero-lado .fila-ticket .c-plazo { grid-area: plazo; }
  .tablero-lado .fila-ticket .c-estado { grid-area: estado; }
  .tablero-lado .tabla-cabecera { display: none; }
}

/* --- EL RELOJ DEL PLAZO ------------------------------------------------- */
.regla { display: grid; gap: var(--e-2); min-width: 72px; }
.regla-pista { height: 7px; border-radius: var(--r-chip); background: var(--hundido); overflow: hidden; }
/* el relleno toma el color del estado (--et) cuando lo hay; si no, el acento: en Cobros las barras de mes a mes no tienen estado */
.regla-relleno { height: 100%; border-radius: var(--r-chip); background: var(--et, var(--acento)); width: var(--u, 0%); }
.regla-texto { font-size: var(--t-pie); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.regla--vencido .regla-texto { color: var(--vencido); font-weight: var(--peso-medio); }

/* --- TARJETA DE AVISO --------------------------------------------------- */
.aviso {
  background: var(--ficha); border-radius: var(--r-panel); box-shadow: var(--sombra-1);
  padding: var(--e-6); display: grid; gap: var(--e-5);
}
.aviso--compacto { padding: var(--e-5) var(--e-6); gap: var(--e-4); }
.aviso-alto { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.aviso-canal { display: inline-flex; align-items: center; gap: var(--e-3); font-size: var(--t-menor); color: var(--texto-2); vertical-align: middle; }
.aviso-canal svg { width: 16px; height: 16px; }
.aviso-cuerpo { font-size: var(--t-base); line-height: var(--alto-lectura); }
.aviso-mensaje {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--r-boton);
  padding: var(--e-5); display: grid; gap: var(--e-4);
  font-size: var(--t-menor); line-height: var(--alto-lectura); color: var(--texto-2);
}
.aviso-mensaje-pie { font-size: var(--t-pie); color: var(--texto-3); }

/* --- TARJETA DE PÓLIZA -------------------------------------------------- */
.poliza {
  position: relative; overflow: hidden;
  padding-left: calc(var(--fila-pad-x) + var(--barra-ramo));
  display: grid; gap: var(--e-4);
}
.poliza::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--barra-ramo); background: var(--rt); }
.poliza-linea { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.poliza-colectiva { font-size: var(--t-menor); color: var(--texto-2); border-top: 1px solid var(--linea); padding-top: var(--e-4); }

/* --- PANELES Y FICHA ---------------------------------------------------- */
.panel { background: var(--panel); border-radius: var(--r-panel); padding: var(--e-6); display: grid; gap: var(--e-6); }
.panel--ficha { align-content: start; }
.ficha-cabeza { display: grid; gap: var(--e-4); }
.ficha-cabeza h2 { font-size: var(--t-nombre); }
.ficha-pastillas { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.contacto { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.contacto div { display: grid; gap: var(--e-1); }
.contacto dt { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }
.contacto dd { font-size: var(--t-fila); overflow-wrap: anywhere; }
/* Dentro de la ficha el .dato-2 hereda nowrap + ellipsis y sobresale del panel:
   aqui es texto de lectura, no una celda de tabla. */
.contacto dd .dato-2 { white-space: normal; overflow: visible; display: block; }

.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-5); font-size: var(--t-pie); color: var(--texto-2); }
.leyenda i { display: inline-flex; align-items: center; gap: var(--e-2); font-style: normal; }

/* --- BUSCADOR ----------------------------------------------------------- */
.buscador { position: relative; display: block; width: 100%; }
.buscador svg { position: absolute; left: var(--e-5); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.buscador input {
  width: 100%; height: var(--alto-toque);
  padding: 0 var(--e-6) 0 calc(var(--e-6) + 22px);
  background: var(--ficha); border: 1px solid var(--borde-control); border-radius: var(--r-boton);
  font: inherit; font-size: var(--t-base); color: var(--texto);
}
/* Un solo gris para TODO marcador: el default del navegador (#757575) no
   lee ningun token y cae a 3,14:1 en tema oscuro. */
.buscador input::placeholder, .notas::placeholder,
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.buscador input:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--acento); }
@media (min-width: 768px) { .buscador--cabecera { max-width: 420px; } }
@media (min-width: 768px) and (pointer: fine) { .buscador input { height: 40px; } }
.buscador--grande { max-width: 560px; }
/* dentro de un campo de formulario, la regla genérica del campo no puede quitarle al buscador el hueco de la lupa */
.campo .buscador input { padding-left: calc(var(--e-6) + 22px); }
/* Opciones de un formulario (casillas): pequeñas, a la izquierda, debajo del título; nunca una casilla del alto de un campo */
.forma-opciones { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); margin: 0; }
.opcion { display: inline-flex; align-items: center; gap: var(--e-3); font-size: var(--t-pie); color: var(--texto-2); cursor: pointer; }
.opcion input[type="checkbox"] { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--acento); cursor: pointer; }
.opcion:hover { color: var(--texto); }

/* --- FILTROS ------------------------------------------------------------ */
.filtros { display: flex; gap: var(--e-3); overflow-x: auto; padding-bottom: var(--e-2); scrollbar-width: thin; }
/* En teléfono no se dibuja barra de desplazamiento: tres de seis filtros
   quedaban fuera de pantalla sin ninguna señal. Son seis; que envuelvan. */
@media (max-width: 767px) { .filtros { flex-wrap: wrap; overflow-x: visible; } }
.filtro {
  flex: 0 0 auto; padding: 6px 14px; border-radius: var(--r-chip);
  min-height: var(--alto-toque); display: inline-flex; align-items: center;
  border: 1px solid var(--linea); background: var(--ficha); color: var(--texto-2);
  font-size: var(--t-pie); font-weight: var(--peso-medio); white-space: nowrap;
  transition: background var(--paso), color var(--paso);
}
@media (min-width: 768px) { .filtro { min-height: 32px; } }
.filtro:hover { background: var(--panel); }
.filtro[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.filtro-grupo { display: grid; gap: var(--e-3); }

/* --- FORMULARIO --------------------------------------------------------- */
.bloque { display: grid; gap: var(--e-6); }
.bloque + .bloque { margin-top: var(--e-9); }
.bloque > h3 { font-size: var(--t-sub); }
.rejilla { display: grid; gap: var(--e-6); }
@media (min-width: 768px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-7); } }
.ancho { grid-column: 1 / -1; }
.campo { display: grid; gap: var(--e-3); align-content: start; }
.campo > label { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; height: var(--alto-toque); padding: 0 var(--e-5);
  background: var(--ficha); border: 1px solid var(--borde-control); border-radius: var(--r-boton);
  font: inherit; font-size: var(--t-base); color: var(--texto);
}
.campo textarea { height: auto; min-height: 84px; padding: var(--e-4) var(--e-5); line-height: var(--alto-lectura); resize: vertical; }
.campo select { appearance: none; background-image: none; padding-right: var(--e-8); cursor: pointer; }
.campo-selector { position: relative; }
.campo-selector svg { position: absolute; right: var(--e-5); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--texto-3); pointer-events: none; }
.campo-ayuda { font-size: var(--t-menor); color: var(--texto-2); }
.campo input:disabled, .campo select:disabled { background: var(--hundido); color: var(--texto-3); cursor: not-allowed; }
.calculado {
  background: var(--hundido); border-radius: var(--r-boton); padding: var(--e-5);
  display: grid; gap: var(--e-3);
}
.calculado-nota { font-size: var(--t-pie); color: var(--texto-3); }
.calculado-lista { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.calculado-lista b {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--r-mini);
  padding: 4px 10px; font-size: var(--t-menor); font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}
.pie-form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-4); margin-top: var(--e-9); }
.pie-form .btn { flex: 1 1 auto; }
@media (min-width: 768px) { .pie-form .btn { flex: 0 0 auto; } }

/* --- ESTADO VACÍO ------------------------------------------------------- */
.vacio {
  background: var(--ficha); border: 1px dashed var(--linea-fuerte); border-radius: var(--r-panel);
  padding: var(--e-9) var(--e-6);
  display: grid; justify-items: center; text-align: center; gap: var(--e-4);
}
.vacio-glifo { width: 56px; height: 56px; border-radius: 50%; background: var(--hundido); color: var(--texto-3); display: grid; place-items: center; }
.vacio-glifo svg { width: 28px; height: 28px; }
.vacio h3 { font-size: var(--t-sub); }
.vacio p { font-size: var(--t-menor); color: var(--texto-2); max-width: 34ch; line-height: var(--alto-lectura); }

/* --- TABLERO DE DOS COLUMNAS -------------------------------------------- */
.tablero { display: grid; gap: var(--e-7); }
@media (min-width: 1240px) {
  .tablero { grid-template-columns: minmax(0, 1fr) var(--ficha-ancho); gap: var(--e-7); align-items: start; }
  /* overflow-x: clip sí puede convivir con overflow-y: auto sin forzar el otro
     eje a "auto": quita el desplazamiento horizontal accidental del panel. */
  .tablero-lado { position: sticky; top: var(--e-6); max-height: calc(100vh - var(--e-9)); overflow-y: auto; overflow-x: clip; }
}
@media (min-width: 1400px) {
  .tablero { grid-template-columns: minmax(0, 1fr) var(--ficha-ancho-amplio); }
}
.tablero-principal { display: grid; gap: var(--e-7); min-width: 0; }
.tablero[data-modo="detalle"] > .tablero-principal { display: none; }
.tablero[data-modo="lista"] > .tablero-lado { display: none; }
.solo-ancho { display: none; }
.solo-movil { display: block; }
@media (min-width: 1240px) {
  .tablero[data-modo="detalle"] > .tablero-principal { display: grid; }
  .tablero[data-modo="lista"] > .tablero-lado { display: block; }
  .solo-ancho { display: grid; }
  .solo-movil { display: none; }
}

/* --- MISCELÁNEA --------------------------------------------------------- */
.migaja { display: inline-flex; align-items: center; gap: var(--e-3); font-size: var(--t-menor); color: var(--acento); min-height: var(--alto-toque); }
@media (min-width: 768px) { .migaja { min-height: 0; } }
/* La migaja partida por ancho de pantalla. Las dos reglas van con la clase
   doble: `.migaja` sola le gana por orden de fuente a `.solo-ancho`, y las
   dos migajas salían juntas en el teléfono. */
.migaja.solo-ancho { display: none; }
.migaja.solo-movil { display: inline-flex; }
@media (min-width: 768px) {
  .migaja.solo-movil { display: none; }
  .migaja.solo-ancho { display: inline-flex; }
}
.migaja svg { width: 14px; height: 14px; }
.aporte { display: grid; gap: var(--e-4); }
.calendario-anio { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 768px) { .calendario-anio { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .calendario-anio { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1240px) { .calendario-anio { grid-template-columns: repeat(12, 1fr); } }
.mes-barra {
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--r-mini);
  padding: var(--e-4) var(--e-3); display: grid; gap: var(--e-3); justify-items: center; align-content: end;
}
.mes-barra span { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }
/* El monto del mes es largo («US$ 3.450,00»): baja un punto para caber en la
   columna de 12 meses del escritorio. */
.mes-barra b { font-size: var(--t-menor); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mes-barra .mes-cuotas { text-transform: none; letter-spacing: 0; font-size: var(--t-pie); color: var(--texto-2); }
.mes-columna { width: 100%; height: 46px; display: flex; align-items: flex-end; }
.mes-relleno { width: 100%; background: var(--acento); border-radius: var(--r-mini); min-height: 3px; }
.mes-barra--hoy { border-color: var(--acento-borde); background: var(--acento-suave); }
.mes-barra--hoy span { color: var(--acento); }
.aviso-fila { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.aviso-fila .dato-2 { white-space: normal; overflow: visible; }
@media (min-width: 560px) {
  .aviso-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .aviso-fila .dato-2 { white-space: nowrap; overflow: hidden; }
}
.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--e-5); padding-top: var(--e-4); }
.paginacion span { font-size: var(--t-menor); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.nota-pie { font-size: var(--t-pie); color: var(--texto-3); line-height: var(--alto-lectura); }
.usuario-fila { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 768px) { .usuario-fila { grid-template-columns: minmax(0, 1fr) 200px; } }
/* Quitar el acceso es la unica accion de esta pantalla que le cierra la puerta a
   una persona: se marca en rojo, sin gritar. Y quien ya no entra se ve apagado. */
.btn--peligro { color: var(--vencido); border-color: var(--vencido); }
.usuario-baja { opacity: .62; }
.usuario-baja .dato { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (min-width: 768px) { .usuario-fila { grid-template-columns: minmax(0, 1fr) 200px auto; } }
.aviso-config { display: grid; gap: var(--e-5); }
@media (min-width: 768px) { .aviso-config { grid-template-columns: minmax(0, 1fr) 120px; align-items: center; } }
.aviso-config-texto { display: grid; gap: var(--e-1); }
.aviso-config-texto b { font-size: var(--t-fila); font-weight: var(--peso-medio); }
.aviso-config-texto span { font-size: var(--t-menor); color: var(--texto-2); }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--barra-movil-alto) + var(--e-6)); z-index: 50;
  background: var(--conteo-fondo); color: var(--conteo-texto);
  padding: var(--e-4) var(--e-6); border-radius: var(--r-chip);
  font-size: var(--t-menor); box-shadow: var(--sombra-4); max-width: calc(100vw - 32px); text-align: center;
}
.toast[hidden] { display: none; }
@media (min-width: 768px) { .toast { bottom: var(--e-7); } }
.asegurados-lista { display: grid; gap: var(--e-2); max-height: 320px; overflow-y: auto; padding-right: var(--e-2); }
.asegurado {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-mini); background: var(--ficha);
}
.asegurado span { font-size: var(--t-menor); }
/* La cedula, el RIF y la fecha se leen o se dictan: nunca se recortan. */
.asegurado .mono, .asegurado .num { flex: 0 0 auto; overflow: visible; }
/* ===========================================================================
   PIEZAS NUEVAS — todo con los tokens que ya existen. Ni un color inventado.
   ========================================================================= */

/* --- LA PASTILLA QUE NOMBRA A LA COMPAÑÍA ------------------------------- */
/* "Esperando a Oceánica de Seguros" no cabe en una línea: es la única
   pastilla del producto que puede envolver, y por eso la columna de estado de
   la tabla ancha pasó de 86 px a 152 px. */
/* Sin el tope de ancho la pastilla toma su max-content y, en una celda
   alineada a la derecha, se derrama por la izquierda encima del reloj. */
.pastilla--espera { white-space: normal; text-align: left; max-width: 100%; }
.derecha .pastilla--espera { text-align: right; }

/* --- LA HORA A LA QUE SALE EL CORREO ------------------------------------ */
/* Un aviso que sale solo no lleva botón de enviar: lleva su hora. */
.aviso-hora {
  display: flex; align-items: center; gap: var(--e-3);
  font-size: var(--t-menor); color: var(--texto-2);
  background: var(--hundido); border-radius: var(--r-boton);
  padding: var(--e-4) var(--e-5);
}
.aviso-hora svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--canal-correo); }

/* --- SELECTOR DE ROL Y MENÚ DE LA CABECERA ------------------------------ */
.cabecera-acciones { position: relative; }
.rol-boton {
  display: inline-flex; align-items: center; gap: var(--e-3);
  height: var(--alto-toque); padding: 0 var(--e-5);
  border: 1px solid var(--borde-control); border-radius: var(--r-boton);
  background: var(--ficha); box-shadow: var(--sombra-1);
  font-size: var(--t-menor); color: var(--texto); white-space: nowrap;
}
@media (min-width: 768px) and (pointer: fine) { .rol-boton, .menu-boton { height: 40px; } }
.rol-boton .rol-demo {
  font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--texto-3);
}
.rol-boton svg { width: 14px; height: 14px; color: var(--texto-3); }
.menu-boton {
  width: var(--alto-toque); height: var(--alto-toque); padding: 0;
  border: 1px solid var(--borde-control); border-radius: var(--r-boton);
  background: var(--ficha); box-shadow: var(--sombra-1);
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width: 768px) and (pointer: fine) { .menu-boton { width: 40px; } }
.menu-boton svg { width: 18px; height: 18px; }
/* En telefono el grupo de acciones queda pegado a la IZQUIERDA (el titulo se
   lleva toda la primera linea), asi que un menu anclado a la derecha de ese
   grupo se sale de la pantalla por el otro lado. Se ancla a la izquierda, y
   solo a partir de 768 px —donde las acciones ya estan a la derecha— se
   invierte. */
.menu {
  position: absolute; left: 0; right: auto; top: calc(100% + var(--e-3)); z-index: 45;
  min-width: 250px; max-width: calc(100vw - 32px);
  background: var(--ficha); border: 1px solid var(--linea); border-radius: var(--r-panel);
  box-shadow: var(--sombra-4); padding: var(--e-4); display: grid; gap: var(--e-1);
}
.menu-titulo {
  font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--texto-3); padding: var(--e-3) var(--e-4);
}
.menu-opcion {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-4);
  width: 100%; text-align: left; padding: var(--e-3) var(--e-4);
  border-radius: var(--r-boton); min-height: var(--alto-toque); font-size: var(--t-menor);
}
.menu-opcion:hover { background: var(--hundido); }
.menu-opcion b { font-weight: var(--peso-medio); }
.menu-opcion span { font-size: var(--t-pie); color: var(--texto-2); display: block; }
.menu-opcion svg { width: 16px; height: 16px; color: var(--acento); }
.menu-separador { height: 1px; background: var(--linea); margin: var(--e-2) var(--e-4); }
.menu-pie { font-size: var(--t-pie); color: var(--texto-3); padding: var(--e-3) var(--e-4); line-height: var(--alto-lectura); }
.menu .tema { margin: var(--e-2) var(--e-4) var(--e-3); }
@media (min-width: 768px) { .menu { left: auto; right: 0; } }

/* --- CINTILLO DE INDICADORES (portada del Director) --------------------- */
.cintillo {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1);
  overflow: hidden;
}
/* Cada celda es su propio enlace: hereda la tinta y avisa el destino con su
   propio hover, no el de la franja entera. */
a.cintillo-celda { color: inherit; text-decoration: none; }
a.cintillo-celda:hover { background: var(--hundido); }
/* .btn trae display:flex y ganaba sobre el atributo [hidden]: el botón "Ver
   todos los clientes" seguía en pantalla mientras se buscaba, y pulsarlo
   desarmaba la portada sin dar ninguna señal. */
.cintillo[hidden], .recientes[hidden], .btn[hidden] { display: none; }
.cintillo-celda {
  padding: var(--e-4) var(--e-2); display: grid; gap: 0; justify-items: center; text-align: center;
}
.cintillo-celda + .cintillo-celda { border-left: 1px solid var(--linea); }
.cintillo-celda b {
  font-family: var(--fuente-titulo); font-size: var(--t-sub);
  font-variant-numeric: tabular-nums; line-height: var(--alto-apretado);
}
.cintillo-celda span { font-size: var(--t-pie); color: var(--texto-2); line-height: 1.2; }
.cintillo-celda--cero b { color: var(--texto-3); }
.cintillo-celda--alerta b { color: var(--vencido); }
.cintillo-corto { display: inline; }
.cintillo-largo { display: none; }
@media (min-width: 768px) {
  .cintillo-celda { grid-auto-flow: column; align-items: baseline; gap: var(--e-3); }
  .cintillo-corto { display: none; }
  .cintillo-largo { display: inline; }
}

/* --- CONSULTADOS HACE POCO ---------------------------------------------- */
.recientes { display: flex; gap: var(--e-3); overflow-x: auto; padding-bottom: var(--e-1); scrollbar-width: thin; }
.reciente {
  flex: 0 0 auto; padding: 3px 12px; border-radius: var(--r-chip);
  border: 1px solid var(--linea); background: var(--ficha); color: var(--texto-2);
  font-size: var(--t-pie); white-space: nowrap;
}
.reciente:hover { background: var(--panel); color: var(--texto); }

/* --- FILA DE RESULTADO DEL BUSCADOR ------------------------------------- */
.resultado { display: grid; gap: var(--e-2); }
/* El nombre nunca se recorta: es el dato con el que se confirma que se tiene a
   la persona correcta al teléfono. Envuelve a dos líneas si hace falta. */
.resultado-nombre {
  font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte);
  font-size: var(--t-fila); line-height: var(--alto-apretado);
  white-space: normal; overflow: visible;
}
.resultado-linea { font-size: var(--t-menor); color: var(--texto-2); white-space: normal; overflow: visible; }
.resultado-cobro { font-size: var(--t-menor); color: var(--texto); font-variant-numeric: tabular-nums; }
.resultado-alerta { font-size: var(--t-menor); color: var(--vencido); font-weight: var(--peso-medio); }

/* --- LA TARJETA DE PÓLIZA: LA VACUNA QUE LE FALTABA ---------------------- */
/* La columna implícita se dimensionaba con max-content y la línea de detalle
   (nowrap) la estiraba hasta 371 px dentro de una caja de 294: el monto y la
   pastilla de estado se recortaban por la derecha. Misma vacuna que ya usan
   .seccion, .panel y .celda. */
.poliza { grid-template-columns: minmax(0, 1fr); }
/* Dos piezas por línea: la izquierda cede y recorta, la derecha manda su ancho
   y se pega al borde. Con flex-wrap el monto caía a un renglón propio pegado a
   la izquierda y se leía como continuación de la fecha. */
.poliza-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--e-4);
}
.poliza-linea > :last-child:not(:first-child) { justify-self: end; text-align: right; }
.poliza-linea > :only-child { grid-column: 1 / -1; }
/* La pastilla no se estira: es una pieza, no una celda de texto. */
.poliza-linea > .pastilla { justify-self: start; }
/* La línea del marbete al revés: el ramo (que no encoge) manda su ancho y el
   bloque de estados es el que cede. Antes se montaban uno encima del otro y en
   cli-049 se leía «PatrimonialesRenovada» como una sola palabra. */
.poliza-linea--marbete {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--e-4); row-gap: var(--e-3);
}
/* Ninguno de los dos encoge —son rótulos cerrados, no texto que se pueda
   recortar—: cuando no caben juntos, el bloque de estados baja de renglón. */
.poliza-linea--marbete > * { flex: 0 0 auto; max-width: 100%; }
.poliza-linea--marbete > .ficha-pastillas { margin-left: auto; justify-content: flex-end; }
/* La fecha del cobro nunca se recorta: la que cede es la palabra "cuota
   trimestral", que se puede adivinar; el 15 sep 2026 no. */
.poliza-cuando { display: grid; grid-template-columns: minmax(0, auto) auto; align-items: baseline; }
.poliza-frec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poliza-fecha { white-space: nowrap; }
a.poliza { display: grid; }

/* --- FILA COMPACTA DE PROCESO (la ficha del cliente y la de la póliza) --- */
/* La fila de ticket mide 203 px en teléfono. En la ficha la pregunta es una
   sola —¿en qué estatus está?— y la fila baja a 71 px. */
.proceso {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-4); row-gap: var(--e-2); align-items: baseline;
  min-height: var(--alto-toque);
}
/* La etiqueta del aviso es vocabulario cerrado («WhatsApp: la póliza quedó sin
   pagar») y se recortaba por 1 a 3 px en 19 filas. La fecha de al lado es
   corta y fija: el espacio se saca de la separación, no del rótulo. */
.proceso--aviso { column-gap: var(--e-2); }
.proceso-tipo {
  font-size: var(--t-fila); font-weight: var(--peso-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proceso-estado { justify-self: end; text-align: right; }
.proceso-pie {
  grid-column: 1 / -1; font-size: var(--t-menor); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plegable > summary {
  list-style: none; cursor: pointer; min-height: var(--alto-toque);
  display: flex; align-items: center; gap: var(--e-3);
  font-size: var(--t-menor); color: var(--acento);
}
.plegable > summary::-webkit-details-marker { display: none; }
/* Sin esta regla el icono hereda el tamanio de su caja y se dibuja de 208 px:
   el resumen del plegable no es un boton ni una migaja, no habia quien le
   diera medida. */
.plegable > summary svg { width: 14px; height: 14px; flex: 0 0 14px; }
.plegable[open] > summary { margin-bottom: var(--e-4); }

/* --- LA FRANJA DE DOS CIFRAS DE LA FICHA -------------------------------- */
.franja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.franja-celda {
  background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1);
  padding: var(--e-5); display: grid; gap: var(--e-1); align-content: start;
}
.franja-rotulo {
  font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3);
}
.franja-cifra {
  font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte);
  font-size: var(--t-sub); font-variant-numeric: tabular-nums; line-height: var(--alto-apretado);
}
.franja-cifra--alerta { color: var(--vencido); }
.franja-pie { font-size: var(--t-pie); color: var(--texto-2); }
.franja-pie--alerta { color: var(--vencido); }
.contacto-linea { font-size: var(--t-menor); color: var(--texto-2); overflow-wrap: anywhere; }
.contacto-linea a { color: var(--acento); }

/* --- EL HÉROE ----------------------------------------------------------- */
/* La gramática de toda página de detalle: EL número de la página en grande,
   su estado al lado, y dos hechos secundarios en la misma banda. Una celda,
   una pregunta. En teléfono la banda se apila. */
.heroe {
  background: var(--ficha); border-radius: var(--r-panel); box-shadow: var(--sombra-1);
  padding: var(--e-6); display: grid; gap: var(--e-5);
}
.heroe-celda { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
.heroe-celda + .heroe-celda { border-top: 1px solid var(--linea); padding-top: var(--e-5); }
@media (min-width: 900px) {
  .heroe { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-6); }
  .heroe-celda + .heroe-celda { border-top: 0; padding-top: 0; border-left: 1px solid var(--linea); padding-left: var(--e-6); }
}
.heroe-alto { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.heroe-rotulo {
  font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta);
  color: var(--texto-3); font-weight: var(--peso-fuerte);
}
.heroe-cifra {
  font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte);
  font-size: var(--t-cifra); letter-spacing: var(--track-cifra);
  font-variant-numeric: tabular-nums; line-height: var(--alto-apretado);
}
.heroe-cifra--alerta { color: var(--vencido); }
/* La cifra secundaria: más chica que LA cifra, más grande que una fila. */
.heroe-menor {
  font-family: var(--fuente-titulo); font-weight: var(--peso-fuerte);
  font-size: var(--t-panel); font-variant-numeric: tabular-nums; line-height: var(--alto-apretado);
}
.heroe-bajo { font-size: var(--t-menor); color: var(--texto-2); overflow-wrap: anywhere; }
a.heroe-celda { color: inherit; text-decoration: none; }
a.heroe-celda:hover .heroe-rotulo { color: var(--acento); }

/* --- LA TABLA DE REFERENCIA --------------------------------------------- */
/* Datos quietos en filas de línea fina: rótulo a la izquierda, valor a la
   derecha. Es la columna callada de la página; lo que se mueve vive en la
   otra columna. */
.ref { display: grid; }
.ref > div {
  display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr);
  gap: var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--linea);
  align-items: baseline;
}
.ref > div:last-child { border-bottom: 0; }
/* el cuerpo de una póliza en tres bloques (la póliza · quiénes · cómo se paga); a tres columnas en pantalla ancha */
.ref-grupos { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 1100px) { .ref-grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-7); } }
.ref-titulo { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); font-weight: 600; margin: 0 0 var(--e-2); padding-bottom: var(--e-2); border-bottom: 2px solid var(--linea-fuerte); }
.ref-grupo .ref > div { grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); }
/* fila apilada: el rótulo arriba y el contenido debajo, a todo el ancho (los asegurados de la póliza) */
.ref > div.ref-apilado { grid-template-columns: 1fr; gap: var(--e-2); }
.ref > div.ref-apilado dd { text-align: left; }
.asegurados-poliza { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); text-align: left; }
.asegurados-poliza li { line-height: 1.4; min-width: 0; }
.asegurados-poliza a { color: var(--acento); }
.asegurado-detalle { display: block; font-size: var(--t-pie); color: var(--texto-2); white-space: normal; overflow-wrap: anywhere; }
.ref dt { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); }
.ref dd { font-size: var(--t-menor); text-align: right; overflow-wrap: anywhere; }
.ref dd a { color: var(--acento); }

/* --- LA REJILLA DE FICHA ------------------------------------------------- */
/* Dos columnas asimétricas: lo que se mueve (avisos, pólizas, tickets) a la
   izquierda ancha; la referencia quieta a la derecha. En teléfono, una sola. */
.ficha-rejilla { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 900px) {
  .ficha-rejilla { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  /* En la ficha del cliente la referencia cede un quinto de su ancho: las
     pólizas expandibles necesitan el espacio más que el Contacto. */
  .ficha-rejilla--amplia { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
}
.ficha-col { display: grid; gap: var(--e-7); min-width: 0; }
.ficha-tope { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
/* El nombre del panel es un enlace a la ficha completa, sin disfraz de botón. */
.enlace-nombre { color: inherit; text-decoration: none; }
.enlace-nombre:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }

/* --- LA FILA DE PÓLIZA DE LA FICHA COMPLETA ------------------------------ */
/* La fila es un desplegable: al tocarla, la póliza se abre AHÍ MISMO con sus
   datos, su ciclo y sus próximos avisos — sin brincar a otra página. La
   página de la póliza sigue existiendo para renovar y para el detalle largo. */
details.poliza-item { background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1); }
.fila-poliza { list-style: none; cursor: pointer; display: grid; gap: var(--e-2) var(--e-4); align-items: center; padding: var(--e-4) var(--e-5); }
.fila-poliza::-webkit-details-marker { display: none; }
@media (min-width: 700px) {
  .fila-poliza { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto auto; }
}
.fila-poliza .celda { display: grid; gap: 2px; min-width: 0; }
.poliza-item[open] > .fila-poliza { border-bottom: 1px solid var(--linea); margin-bottom: var(--e-4); }
.poliza-item[open] > .fila-poliza .aviso-item-punta { transform: rotate(180deg); }
.poliza-item-cuerpo { padding: 0 var(--e-5) var(--e-5); display: grid; gap: var(--e-5); }

/* La fila de cobranza vencida: se abre ahí mismo con el mensaje de WhatsApp
   del impago y sus botones. Es EL aviso — no se repite en otra lista. */
details.cobro-item { background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1); }
/* Sin esta regla, el fondo del details pisaba al rosado de lo vencido: la
   especificidad del selector de arriba le gana a .losa--vencida a secas. */
details.cobro-item.losa--vencida { background: var(--vencido-fondo); }
.cobro-fila {
  list-style: none; cursor: pointer; padding: var(--e-4) var(--e-5);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--e-2) var(--e-4); align-items: baseline;
}
.cobro-fila::-webkit-details-marker { display: none; }
details.cobro-item[open] > .cobro-fila { border-bottom: 1px solid var(--linea); margin-bottom: var(--e-4); }
details.cobro-item[open] > .cobro-fila .aviso-item-punta { transform: rotate(180deg); }
/* En el teléfono nada de esta fila se trunca: ni el nombre de quien hay que
   cobrar ni el monto que debe. Las tres columnas no caben en 390 px, así que
   la fecha se va a su propia línea y el nombre se queda con el ancho. */
@media (max-width: 767px) {
  .cobro-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .cobro-fila .dato, .cobro-fila .dato-2,
  #por-cobrar .aviso-fila .dato, #por-cobrar .aviso-fila .dato-2 { white-space: normal; overflow: visible; }
  .cobro-fila .celda.derecha { grid-column: 1 / -1; text-align: left; }
  .cobro-fila .celda.derecha .dato { font-weight: var(--peso-medio); }
}

/* El ticket de la ficha, con la misma mecánica: la fila se abre ahí mismo. */
details.ticket-item { background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1); }
details.ticket-item > summary { list-style: none; cursor: pointer; padding: var(--e-4) var(--e-5); }
details.ticket-item > summary::-webkit-details-marker { display: none; }
details.ticket-item[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: var(--e-4); }
details.ticket-item[open] > summary .aviso-item-punta { transform: rotate(180deg); }

/* La alarma en texto corriente: lo vencido se dice en rojo, donde sea. */
.alarma { color: var(--vencido); font-weight: var(--peso-medio); }

/* --- LA FILA DE AVISO DE HOY --------------------------------------------- */
/* Fila fina y cerrada; al tocarla se abre el mensaje tal como va a salir,
   con sus botones. Lo pedido: leer el mensaje ANTES de enviarlo. */
details.aviso-item {
  background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1);
}
details.aviso-item.aviso--vencido { border-left: 3px solid var(--vencido); }
/* Nada de opacidad sobre el grupo: hundía tres textos por debajo de 4,5:1.
   El enviado se marca con el papel del sistema, no atenuando la tinta. */
details.aviso-item.aviso--enviado { background: var(--panel); box-shadow: none; }
.aviso-item > summary { list-style: none; cursor: pointer; padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-1); }
.aviso-item > summary::-webkit-details-marker { display: none; }
.aviso-item-alto { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.aviso-item-alto .dato { font-weight: var(--peso-medio); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-item-alto .heroe-alto { flex: 0 0 auto; flex-wrap: nowrap; }
.aviso-item-punta { transition: transform 0.15s; display: inline-flex; color: var(--texto-3); }
.aviso-item[open] > summary .aviso-item-punta { transform: rotate(180deg); }
.aviso-item-cuerpo { padding: 0 var(--e-5) var(--e-5); display: grid; gap: var(--e-4); }
.aviso-item[open] > summary { border-bottom: 1px solid var(--linea); margin-bottom: var(--e-4); }

.aviso-item-punta svg { width: 14px; height: 14px; display: block; }
/* Lo que está POR vencer se dice en ámbar: ni el rojo de lo vencido ni el
   gris de lo neutro. */
.pronto { color: var(--pronto); font-weight: var(--peso-medio); }

/* El contacto de la historia que guarda su mensaje se abre ahi mismo. */
details.contacto-item > summary { list-style: none; cursor: pointer; }
details.contacto-item > summary::-webkit-details-marker { display: none; }
details.contacto-item[open] > summary .aviso-item-punta { transform: rotate(180deg); }
.contacto-item .asegurado { gap: var(--e-3); }
/* Ficha del cliente, ajustes del 10-sep: íconos a su tamaño en las filas, cuotas y avisos compactos y a dos
   columnas, la flechita de la póliza más visible, y una sección de tickets de una sola línea cuando está vacía */
.asegurado svg, .contacto-item svg, .cuota-fila svg { width: 16px; height: 16px; flex: 0 0 16px; vertical-align: -3px; margin-right: var(--e-2); color: var(--texto-3); }
.fila-poliza .aviso-item-punta svg { width: 20px; height: 20px; }
.dos-columnas { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seccion--compacta { gap: var(--e-3); }
/* tres columnas alineadas para toda la lista (fecha · estado · acción), no por fila: las pastillas quedan en línea */
.cuotas-ciclo { display: grid; grid-template-columns: max-content max-content 1fr; column-gap: var(--e-4); }
.cuota-fila { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: var(--e-1) 0; font-size: var(--t-menor); border-bottom: 1px solid var(--linea); }
.cuota-fila:last-child { border-bottom: 0; }
/* los datos del cliente van en la cabecera de la ficha, debajo del nombre */
.contacto--cabeza { margin: var(--e-2) 0 var(--e-3); align-items: end; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); column-gap: var(--e-7); }
.contacto--cabeza .contacto-accion { align-self: end; }
/* la fila de botones de un formulario no se monta sobre el último campo */
/* un formulario separa sus bloques (opciones, rejillas, campos sueltos, cálculo, botones) con el mismo aire */
.forma { display: grid; gap: var(--e-5); }
/* selector de archivo con texto propio: el nativo del navegador sale en el idioma del navegador («Choose File») */
.archivo { position: relative; display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; min-height: var(--alto-toque); }
.archivo .archivo-real { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.archivo .archivo-boton { cursor: pointer; flex: 0 0 auto; }
.archivo .archivo-real:focus-visible + .archivo-boton { outline: 2px solid var(--foco); outline-offset: 2px; }
.archivo-nombre { font-size: var(--t-menor); color: var(--texto-2); overflow-wrap: anywhere; }
/* persona nueva escrita dentro del formulario de póliza */
.forma-sub { border: 1px dashed var(--linea-fuerte); border-radius: var(--r-fila); padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
.forma-sub-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.cuota-fila .btn--texto { padding: 0; min-height: 0; height: auto; font-size: var(--t-menor); }
.btn-fila--linea { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.btn-fila--linea .btn { flex: 0 0 auto; }
@media (min-width: 900px) { .rejilla--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Las notas del cliente: un campo llano, con la letra del sistema. */
.notas {
  width: 100%; min-height: 76px; resize: vertical;
  background: var(--ficha); border: 1px solid var(--borde-control); border-radius: var(--r-boton);
  padding: var(--e-4); font: inherit; font-size: var(--t-menor); color: inherit;
}
.notas:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

/* --- EL AÑO DE CONTACTOS ------------------------------------------------ */
/* Una fila por póliza, doce columnas de mes. Con rótulo de 48 px la celda
   queda en 22,16 px a 390 px y en 19,41 px en el panel lateral de 293. */
.anio { display: grid; grid-template-columns: minmax(0, 1fr); }
.anio-fila {
  display: grid;
  grid-template-columns: 48px repeat(12, minmax(0, 1fr));
  column-gap: 1px; align-items: center;
}
.anio-fila + .anio-fila { border-top: 1px solid var(--linea); }
.anio-total { border-top: 2px solid var(--linea-fuerte); }
.anio-rot {
  font-size: var(--t-pie); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: var(--e-2);
}
.anio-cel { min-height: 28px; display: grid; place-items: center; }
.anio-cab .anio-cel { font-size: 10px; color: var(--texto-3); }
.anio-total .anio-cel { font-size: 11px; font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.anio-total .anio-cel--cero { color: var(--texto-3); }
.anio-cel--cuota { background: var(--acento-suave); }
.anio-cel--hoy { box-shadow: inset 0 0 0 2px var(--texto-3); }
.anio-marca { display: flex; gap: 2px; }
.anio-p { width: 7px; height: 7px; }
/* Los dos colores de canal contrastan 1,08:1 ENTRE SÍ: la forma es la que
   distingue y el color solo acompaña. Círculo = correo, cuadrado = WhatsApp. */
.anio-p--correo { background: var(--canal-correo); border-radius: 50%; }
.anio-p--whatsapp { background: var(--canal-whatsapp); border-radius: 1px; }
.anio-mes-corto { display: none; }
/* En el panel lateral de ESCRITORIO (293 px de contenido) el mes de tres
   letras deja 0,66 px de aire: una letra lo devuelve a 10,97 px. El nombre
   completo queda en el title. En telefono la ficha tambien vive dentro de
   .tablero-lado, pero ahi mide 326 px y las tres letras caben, asi que la
   degradacion tiene que ir dentro de la consulta de ancho o el telefono
   acaba leyendo "E F M A M J J A S O N D". */
@media (min-width: 1240px) {
  .tablero-lado .anio-mes-largo { display: none; }
  .tablero-lado .anio-mes-corto { display: inline; }
}
.leyenda-marca { display: inline-block; width: 8px; height: 8px; }
.leyenda-marca--correo { background: var(--canal-correo); border-radius: 50%; }
.leyenda-marca--whatsapp { background: var(--canal-whatsapp); border-radius: 1px; }
/* La muestra del mes con cuota usa el MISMO token que pinta la celda, así el
   rótulo no tiene que nombrar ningún color. */
.leyenda-marca--cuota { background: var(--acento-suave); border: 1px solid var(--borde-control); border-radius: 1px; }

/* --- EL PANEL DE INDICADORES -------------------------------------------- */
.panel-rejilla { display: grid; gap: var(--e-5); }
@media (min-width: 768px) { .panel-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indicador--ancho { grid-column: 1 / -1; } }
/* la matriz compañía × período del Panel (prima contratada): desplazable a lo ancho, nunca la página */
.matriz-marco { overflow-x: auto; margin-top: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-fila); background: var(--ficha); }
.matriz { border-collapse: collapse; width: 100%; font-size: var(--t-pie); }
.matriz th, .matriz td { padding: var(--e-2) var(--e-3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--linea); }
.matriz th { font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3); font-weight: 600; }
.matriz th:first-child, .matriz td:first-child { text-align: left; position: sticky; left: 0; background: var(--ficha); }
.matriz .matriz-sub td { font-weight: 600; }
.matriz .matriz-total td { font-weight: 700; border-top: 2px solid var(--texto-3); }
.matriz tbody tr:last-child td { border-bottom: 0; }
/* la «Lectura» de un indicador: dos o tres frases que el sistema arma con reglas a partir de sus propios números */
.indicador-lectura { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 var(--r-mini) var(--r-mini) 0; }
.indicador-lectura-rotulo { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--acento); font-weight: 600; margin: 0 0 var(--e-2); }
.indicador-lectura-rotulo svg { width: 14px; height: 14px; }
.indicador-lectura ul { margin: 0; padding-left: var(--e-5); display: grid; gap: var(--e-1); font-size: var(--t-menor); line-height: var(--alto-lectura); }
.matriz td.num-mas { color: var(--vencido-macizo, #8a3a2a); }
.matriz td.num-menos { color: var(--acento); }
.indicador {
  background: var(--ficha); border-radius: var(--r-panel); box-shadow: var(--sombra-1);
  padding: var(--e-6); display: grid; gap: var(--e-4); align-content: start;
  grid-template-columns: minmax(0, 1fr);
}
.indicador-rotulo {
  font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--texto-3);
}
.indicador-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-3) var(--e-4); }
.indicador-cifra b {
  font-family: var(--fuente-titulo); font-size: var(--t-cifra);
  font-variant-numeric: tabular-nums; letter-spacing: var(--track-cifra); line-height: var(--alto-apretado);
}
.indicador-cifra span { font-size: var(--t-pie); color: var(--texto-2); }
.indicador-frase { font-size: var(--t-base); color: var(--texto-2); line-height: var(--alto-lectura); }
.indicador-desglose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .indicador-desglose { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.indicador-celda { padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-1); justify-items: center; text-align: center; }
.indicador-celda + .indicador-celda { border-left: 1px solid var(--linea); }
.indicador-desglose .indicador-celda:nth-child(odd) { border-left: 0; }
@media (min-width: 768px) {
  .indicador-desglose .indicador-celda:nth-child(odd) { border-left: 1px solid var(--linea); }
  .indicador-desglose .indicador-celda:first-child { border-left: 0; }
}
.indicador-celda b { font-size: var(--t-fila); font-variant-numeric: tabular-nums; font-weight: var(--peso-medio); }
.indicador-celda span { font-size: var(--t-pie); color: var(--texto-2); line-height: 1.2; }
.indicador-salvedad {
  font-size: var(--t-menor); color: var(--texto-2); line-height: var(--alto-lectura);
  border-top: 1px solid var(--linea); padding-top: var(--e-4);
}
.indicador-pie { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; justify-content: space-between; }
.indicador-pie .btn { flex: 1 1 100%; }
@media (min-width: 768px) { .indicador-pie .btn { flex: 0 0 auto; } }

/* --- REPORTES ----------------------------------------------------------- */
.casilla {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center;
  gap: var(--e-4); padding: var(--e-4) var(--e-5); min-height: var(--alto-toque);
  background: var(--ficha); border-radius: var(--r-fila); box-shadow: var(--sombra-1); cursor: pointer;
}
.casilla input { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; }
.casilla b { font-size: var(--t-fila); font-weight: var(--peso-medio); display: block; }
.casilla span { font-size: var(--t-menor); color: var(--texto-2); }
.casilla-conteo { font-size: var(--t-menor); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }