/* Identidad del panel de seguros. Compartida por TODAS las pantallas y cargada antes del
   <style> de cada una: si una pantalla define lo mismo, gana la pantalla -pero desde el 19/9
   eso es la excepcion, no la regla-.

   POR QUE ESTE ARCHIVO CRECIO (auditoria del 19/9, Christian: "uniformidad de criterio", "que no
   sea un Frankenstein"). Hasta ese dia cada HTML repetia lo suyo y ya habia divergido:
     - 11 archivos con su propio :root (index tenia 19 colores, todos.html 6).
     - TRES versiones distintas de la barra de abajo entre 6 archivos.
     - DOS componentes de fila para lo mismo: .fila-caso (Hoy, Todos) y .fila (Asegurados).
     - 10 radios de esquina, 7 z-index sueltos, px y rem mezclados, y un 12px bajo el piso de 14.
   Los VALORES de los colores nunca se contradijeron: se verifico que cada token tuviera el mismo
   valor en los 11 archivos. Por eso unificar fue seguro.

   REGLA: lo que se repite en dos pantallas vive aca. Al tocar una pantalla, no copiar: usar esto.  */

:root{
  /* Color. Un solo valor por token, para todo el panel. */
  --midnight:#1b3f8f; --midnight-dark:#15326f; --midnight-darker:#0f2552;
  --bg:#fff; --ink:#0f2336; --ink-soft:#536478; --line:#dde4ec;
  --teal-bg:#eef2fa;
  --red-bg:#FDF0F0; --red-border:#F9D5D5; --red-text:#A82B2B; --red-dot:#C93B3B;
  --amber-bg:#FEF8EA; --amber-border:#F9EBC5; --amber-line:#EBCB8B; --amber-text:#8A5812; --amber-dot:#F1C21B;
  --green-bg:#EEF7F2; --green-border:#CEEBDC; --green-text:#186443; --green-dot:#258D60;
  /* Alias viejos: algunas pantallas los usan con otro nombre. No agregar mas. */
  --teal:#eef2fa; --soft:#536478; --amber:#8A5812; --hecho:#186443;

  /* Esquinas: CINCO valores, no diez. 8 etiqueta, 12 campo y boton, 14 tarjeta y fila,
     20 formas grandes (boton flotante, hoja de abajo), 99 pastilla. */
  --r-chico:8px; --r-campo:12px; --r-tarjeta:14px; --r-grande:20px; --r-pastilla:99px;

  /* Capas con nombre, en vez de numeros inventados en cada archivo. */
  --z-contenido:1; --z-barra:20; --z-velo:30; --z-hoja:40;
}

/* IDENTIDAD "LA LIBRETA" (23/9, preview docs/superpowers/previews/2026-09-23-identidad-libreta.html).
   Azul de birome propio en vez del sky-700 de Tailwind; Instrument Sans; el codigo como sello.

   ESCALA DE TEXTO (bajo un escalon el 23/9, Christian: "esta todo enorme"): cinco niveles y tres marcas.
     1 Titulo ..... 26/700 tinta   uno por pantalla (Hoy, Asegurados, el nombre en su ficha)
     2 Grupo ...... 18/700 tinta   lo que agrupa (cada poliza, Alerta, la pregunta de Resolucion)
     3 Contenido .. 16/500 tinta   lo que se lee o se elige. El NOMBRE de una persona en una lista y
                                   la PREGUNTA de un formulario, 16/600
     4 Apoyo ...... 14/400 gris    lo que explica al 3 (rotulo del dato, fecha, ramo, ayuda)
     5 Accion ..... 16/600         lo que se toca y no es un renglon (Volver, Guardar, chips)
     Marcas: sello del codigo 14/600 mono; senal 14/600 (estado del semaforo, letra del indice,
     numero de pestania, pestania activa de la barra); cifra 40/700 (numeros grandes de Resultados).
   Negrita (700) solo en 1 y 2. Nada baja de 14px: ni la barra de abajo (Christian 18/8).

   AIRE: ritmo de 8/16/24/32. 20 arriba y abajo de cada renglon de lista.
   AZUL CLARO (--teal-bg, #eef2fa): segundo tono del MISMO azul, SOLO para superficies: la banda del
   encabezado de las pantallas principales, el sello, las pestanias. Nunca texto ni botones: esos van
   en --midnight. Otros colores (uva, magenta, violeta) se probaron el 14/9 y chocan con el semaforo.

   ICONOS: Phosphor Regular (phosphoricons.com, MIT), tal cual viene: su trazo es parejo en todos.
   20px al lado de un texto; 24px en un boton que es solo icono; 28 el +. El color sale de
   `color` (el icono se pinta con fill:currentColor), no de `stroke`. WhatsApp es la unica excepcion. */

button, input, select, textarea{font:inherit;color:inherit;}
/* El texto de ejemplo de un campo, gris en toda la app (Christian 23/9): si va en tinta se lee
   como algo ya escrito. --ink-soft da 6:1 sobre blanco. */
input::placeholder, textarea::placeholder{color:var(--ink-soft);opacity:1;font-weight:400;}
/* Phosphor se dibuja con relleno: las reglas viejas de cada pantalla le ponen stroke y fill:none. */
svg.ph{fill:currentColor !important;stroke:none !important;}
body{font-variant-numeric:tabular-nums;}

/* El codigo del asegurado ("P9K") es la firma visual: un SELLO en IBM Plex Mono, con contorno azul.
   Nunca por debajo de 14px: dentro de un texto de 16px quedaria en 12,8px. */
.codigo{display:inline-block;margin-left:.4em;padding:1px 6px 1px 7px;border-radius:4px;background:var(--teal-bg);
  border:1.5px solid var(--midnight);color:var(--midnight);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600;font-size:14px;letter-spacing:.14em;
  line-height:1.25;vertical-align:middle;white-space:nowrap;}
/* Para lectores de pantalla: se lee, no se ve. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- Titulo de pantalla: 30px en TODAS (nivel 1 de la escala) ----------------------------- */
.app h1{font-size:26px;font-weight:700;letter-spacing:-.02em;}

/* Esconder: la usa el JS en todas las pantallas (.classList.add('oculto')) y estaba definida
   suelta en cada HTML. Una pantalla nueva que se olvidaba de copiarla mostraba el "Cargando..."
   para siempre: paso con cobro.html el 19/9. */
.oculto{display:none !important;}

/* ---- Volver atras: uno solo. .topbar__volver es el de siempre; .volver es su alias ---------- */
.topbar__volver, .volver{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;
  color:var(--midnight);font-size:16px;font-weight:600;padding:10px 4px;min-height:44px;cursor:pointer;text-decoration:none;}
.topbar__volver svg, .volver svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---- Barra de abajo: UNA sola (habia tres versiones) --------------------------------------- */
.nav-inferior{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:420px;
  background:rgba(255,255,255,.95);border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));z-index:var(--z-barra);}
.nav-inferior__item{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--ink-soft);font-size:14px;font-weight:400;padding:4px;min-height:44px;min-width:44px;
  cursor:pointer;text-decoration:none;}
.nav-inferior__item svg{width:24px;height:24px;}
.nav-inferior__item.activo{color:var(--midnight);font-weight:600;} /* texto del color del icono: tinta contra gris no se distinguia (Christian 23/9) */
.nav-inferior__item:focus-visible{outline:2px solid var(--midnight);outline-offset:2px;border-radius:var(--r-chico);}
.nav-inferior__ico{display:flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:15px;}
.nav-inferior__item.activo .nav-inferior__ico{background:var(--teal-bg);color:var(--midnight);}

/* ---- La fila de una lista: UNA sola. Dos renglones, el de abajo ubica (patron del 18/9) -----
   .fila-caso y .fila-cobro (Hoy, Todos) comparten forma con .fila (Asegurados, ficha). */
.fila, .fila-caso, .fila-cobro{position:relative;min-height:64px;}
/* Sin caja (identidad "la libreta", variante C del 23/9): entre uno y otro, una linea muy clara que
   se desvanece en las puntas. El renglon se intuye, no se lee como hoja rayada. Nada arriba del
   primero ni debajo del ultimo; en Asegurados la letra del indice ya corta el grupo. */
.fila + .fila::before, .fila-caso + .fila-caso::before, .fila-cobro + .fila-cobro::before{content:"";position:absolute;
  left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(to right, rgba(214,223,241,0), #d6dff1 18%, #d6dff1 82%, rgba(214,223,241,0));}
.fila{display:flex;align-items:center;gap:12px;padding:20px 0;text-decoration:none;color:inherit;}
.fila:active{background:#f7fafc;}
.fila__txt{flex:1;min-width:0;}
.fila__nom{font-size:16px;font-weight:600;line-height:1.25;}
.fila__sub{font-size:14px;font-weight:400;color:var(--ink-soft);margin-top:3px;display:flex;align-items:center;gap:6px;}
.fila__punto{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fila__punto--rojo{background:var(--red-dot);}
.fila__punto--amarillo{background:var(--amber-dot);}
.fila__punto--verde{background:var(--green-dot);}
.fila__chev{width:20px;height:20px;stroke:#9fb0c2;stroke-width:2;fill:none;flex-shrink:0;color:#9fb0c2;}

/* ---- Buscador: el de Asegurados es el modelo (Contactos) ----------------------------------- */
.buscador{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-tarjeta);padding:0 14px;}
.buscador svg{width:20px;height:20px;stroke:var(--ink-soft);stroke-width:2;fill:none;flex-shrink:0;color:var(--ink-soft);}
.buscador input{border:none;outline:none;background:transparent;font-size:16px;font-weight:500;font-family:inherit;
  color:var(--ink);width:100%;min-height:48px;}
.buscador input::placeholder{color:var(--ink-soft);}
.buscador:focus-within{outline:2px solid var(--midnight);outline-offset:2px;}

/* ---- Boton + flotante: Asegurados y la pestania Siniestro de Hoy ---------------------------
   Va SIEMPRE en el mismo lugar, abajo a la derecha, arriba de la barra. Cada pantalla carga LO
   SUYO y sin pantalla intermedia (Christian 19/9): en Asegurados, un asegurado; en Siniestro, un
   siniestro. Estaba solo en asegurados.html; al usarlo dos pantallas, vive aca. */
.fab{position:fixed;bottom:90px;left:50%;margin-left:calc(210px - 76px);width:60px;height:60px;
  border-radius:20px;border:none;background:var(--midnight);display:flex;align-items:center;
  justify-content:center;box-shadow:0 6px 16px rgba(27,63,143,.35);cursor:pointer;z-index:15;
  text-decoration:none;}
.fab svg{width:28px;height:28px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;color:#fff;}
.fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
@media (max-width:420px){ .fab{left:auto;right:16px;margin-left:0;} }

/* Las dos lineas del siniestro son DOS FRASES HERMANADAS (Christian 19/9): mismo tamanio y
   mismo peso que .fila-caso__etapa, 16px normales. Lo unico que las separa es el color -verde el
   "hecho" de siempre, tinta lo que sigue-, que es la unica diferencia real entre las dos. Con
   14px seminegrita contra 16 normales parecian de distinta jerarquia, y no lo son. */
/* El alfiler de un siniestro fijado arriba en Hoy (23/9). */
.fila-caso__alfiler{display:inline-flex;align-self:center;margin-left:6px;color:var(--midnight);vertical-align:middle;}
.fila-caso__alfiler svg{width:20px;height:20px;}
.fila-caso__cumplida{font-size:14px;font-weight:400;line-height:1.3;color:var(--green-text);}
/* "Hecho:" y "Sigue:" con peso de senal (Christian 23/9): son la llave para leer la linea. */
.fila-caso__rot{font-weight:600;}

/* ---- Puntos de etapa del siniestro: Hoy y Todos ---------------------------------------------
   Ocho puntos, uno por etapa. Verde el que ya paso; gris el que falta; el que esta EN CURSO va
   en blanco con anillo verde. Vivian solo en index.html y por eso en todos.html no se veian:
   los <span> quedaban sin tamanio. 8px con 5 de aire (Christian 19/9: "un poquito mas grande, no
   mucho"); el de en curso mide 12 porque con 8 el anillo de 2 deja el centro en 4 y se lee como
   un gris sucio -medido en el preview 2026-09-19-punto-actual.html-. */
.fila-caso__puntos{display:flex;align-items:center;gap:5px;flex-shrink:0;height:12px;}
.fila-caso__punto{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;}
.fila-caso__punto--hecho{background:var(--green-dot);}
.fila-caso__punto--actual{width:12px;height:12px;background:#fff;box-shadow:inset 0 0 0 2px var(--green-dot);}

/* ---- Velo y hoja de abajo: mismas capas en todas las pantallas ------------------------------ */
.velo{position:fixed;inset:0;background:rgba(15,35,54,.34);z-index:var(--z-velo);}
.hoja{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:420px;background:#fff;
  border-radius:22px 22px 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 28px rgba(15,35,54,.2);z-index:var(--z-hoja);}

/* ---- Vacio: dice que hacer, no solo que no hay nada (ui-ux-pro-max, Empty States) ----------- */
.ayuda-privada{font-size:14px;line-height:1.4;color:var(--ink-soft);margin:6px 0 0 2px;}
/* "Quedan 8 letras" (contarLetras en app.js): a la derecha de la ayuda, mismo gris; al tope pasa
   a tinta y peso, sin rojo -llegar al maximo no es un error-. Si no entran los dos en un renglon
   (320px), el contador baja al suyo en vez de partir la ayuda y dejar "apellido." sola. */
.ayuda-privada--con-cuenta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;}
.ayuda-privada--con-cuenta[hidden]{display:none;}
.quedan{margin-left:auto;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;}
.quedan--tope{color:var(--ink);font-weight:600;}
.vacio{text-align:center;padding:48px 24px;color:var(--ink-soft);}
.vacio svg{width:32px;height:32px;stroke:#9fb0c2;stroke-width:2;fill:none;margin-bottom:10px;color:#9fb0c2;}
.vacio p{font-size:16px;font-weight:500;margin:0;line-height:1.45;}
/* Ninguna palabra sola en el ultimo renglon (Christian 23/9: "No tenes alertas. Toca el + para
   agendar" y abajo "una", y asi en varios lados). Los textos cortos y centrados reparten los
   renglones parejos; los parrafos solo evitan la palabra huerfana. Si el navegador no lo sabe
   hacer, corta como antes: no rompe nada. */
p, li, dd, label, small, button{text-wrap:pretty;}
h1, h2, h3, .vacio p{text-wrap:balance;}
.estado-carga{text-align:center;color:var(--ink-soft);font-size:16px;font-weight:500;padding:40px 20px;}
.estado-error{text-align:center;color:var(--red-text);font-size:16px;font-weight:500;padding:40px 20px;}

/* ---- Tarjeta de Cobro: la comparten index.html y vencen.html (20/9) -------------------------- */
/* Tarjeta de Cobro: toda la tarjeta es un enlace a cobro.html, su libreta. */
.fila-cobro{display:flex;align-items:center;gap:12px;padding:20px 0;} /* 20 como .fila-caso__enlace: las dos listas de Hoy con el mismo aire */
/* Es un <a> desde el 19/9 (antes <button>): sin text-decoration se trae el subrayado del
   navegador. display:block para que ocupe la tarjeta entera. */
.fila-cobro__cuerpo{display:block;flex:1;min-width:0;text-align:left;background:none;border:none;font-family:inherit;padding:0;cursor:pointer;color:inherit;min-height:44px;text-decoration:none;}
.fila-cobro__cuerpo:focus-visible{outline:2px solid var(--midnight);outline-offset:2px;border-radius:12px;}
/* El punto de color y su texto van SIEMPRE arriba a la derecha, al lado del nombre, igual que
   en la tarjeta de Renovacion (Christian 19/9: "debe aparecer siempre a la derecha el punto rojo
   e info"). Antes en Cobro colgaban abajo de todo y las dos tarjetas de la misma lista se leian
   distinto. Si el nombre es largo, el estado baja solo al renglon de abajo. */
.fila-cobro__arriba{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-width:0;}
.fila-cobro__nombre{display:flex;align-items:baseline;margin:0;font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);}
.fila-cobro__detalle{font-size:14px;font-weight:400;color:var(--ink-soft);margin:2px 0 0;}
.fila-cobro__estado{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:14px;font-weight:600;line-height:1.2;}
.fila-cobro__estado::before{content:"";width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.fila-cobro--rojo .fila-cobro__estado{color:var(--red-text);}
.fila-cobro--rojo .fila-cobro__estado::before{background:var(--red-dot);}
.fila-cobro--amarillo .fila-cobro__estado{color:var(--ink);}
.fila-cobro--amarillo .fila-cobro__estado::before{background:var(--amber-dot);box-shadow:inset 0 0 0 1px rgba(15,35,54,.18);}
.fila-cobro__extra{display:block;font-size:14px;font-weight:400;color:var(--ink-soft);margin-top:3px;}
.fila-cobro__extra--obs{font-style:italic;overflow-wrap:anywhere;}

/* ---- Engranaje de Cuenta: la entrada desde las pantallas principales (22/9) ------------------ */
/* Cuenta salio de la barra de abajo el 20/9 y quedo solo en index.html. Desde el 22/9 tambien
   esta en asegurados.html, pagos.html y resultados.html -las otras tres pantallas con barra de
   abajo- para que Cuenta quede a un toque desde cualquiera. Una sola copia aca: antes vivia
   solo en el <style> de index.html y es el bug conocido de "se arregla una pantalla y las demas
   no" (ver fila-cobro arriba). Cada pantalla arma su propia fila para ubicarlo -el layout del
   encabezado no se repite igual en las cuatro-. */
.topbar__cuenta{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;}
.topbar__cuenta svg{width:24px;height:24px;}
.topbar__cuenta:focus-visible{outline:2px solid var(--midnight);outline-offset:2px;}
/* Margen lateral unico de las cuatro pantallas de la barra de abajo (23/9). El engranaje de
   Cuenta -y con el, el titulo y la lista- caia a 14, 16 o 20px del borde segun la pantalla, asi
   que al cambiar de pestania todo se corria de lugar. Aca, una sola vez, encabezado y contenido.
   Los 14px de <=375 vienen de Hoy, que los necesita para que las tres pestanias entren a 320px.
   Las pantallas NO vuelven a poner padding lateral propio en estos contenedores. */
.margen-app{padding-left:20px;padding-right:20px;}
/* La banda: el segundo tono del azul detras del encabezado de las pantallas principales. */
.banda{background:var(--teal-bg);}
/* De borde a borde aunque viva adentro de un contenedor con .margen-app. */
.banda-sangrado{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
@media (max-width:375px){ .margen-app{padding-left:14px;padding-right:14px;}
  .banda-sangrado{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;} }

/* ---- Alertas (spec 2026-09-23-alertas-design.md): alertas.html, alerta-nueva.html y la ficha ---- */
.grupo-alertas{font-size:18px;font-weight:700;margin:24px 0 0;}
.fila-alerta{width:100%;border:none;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.fila-alerta:focus-visible{outline:2px solid var(--midnight);outline-offset:2px;border-radius:8px;}
.fila-alerta__arriba{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fila-alerta__cuando{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap;}
.fila-alerta__cuando--rojo{color:var(--red-text);}
.fila-alerta__cuando--amarillo{color:var(--ink);}
.fila-alerta__cuando--rojo::before, .fila-alerta__cuando--amarillo::before{content:"";width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.fila-alerta__cuando--rojo::before{background:var(--red-dot);}
.fila-alerta__cuando--amarillo::before{background:var(--amber-dot);box-shadow:inset 0 0 0 1px rgba(15,35,54,.18);}
.fila-alerta__nota{display:block;font-size:14px;color:var(--ink-soft);margin-top:4px;overflow-wrap:anywhere;}
/* La pregunta de un formulario: nivel Contenido 16/600 (no Grupo). */
.pregunta{display:block;font-size:16px;font-weight:600;color:var(--ink);margin:22px 0 8px;}
.campo-alerta{width:100%;min-height:48px;border:1.5px solid #c3ccd7;border-radius:var(--r-campo);background:#fff;
  font-family:inherit;font-size:16px;font-weight:500;color:var(--ink);padding:0 14px;}
.campo-alerta:focus-visible{outline:2px solid var(--midnight);outline-offset:2px;}
.rot-alerta{display:block;font-size:14px;color:var(--ink-soft);margin:12px 0 6px;}
.chips-fecha{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.chip-alerta{min-height:44px;border:1.5px solid var(--line);border-radius:var(--r-campo);background:#fff;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;}
.chip-alerta[aria-pressed="true"]{background:var(--midnight);border-color:var(--midnight);color:#fff;}
.chip-alerta:focus-visible{outline:2px solid var(--midnight);outline-offset:2px;}
.fecha-ayuda{font-size:14px;color:var(--ink-soft);margin:10px 0 0;}
.boton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:14px;
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;}
.boton svg{width:20px;height:20px;}
.boton--principal{background:var(--midnight);color:#fff;border:none;}
.boton--principal[aria-busy="true"]{opacity:.7;}
.boton--secundario{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.boton--texto{background:none;border:none;color:var(--midnight);}
.boton:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.aviso-alerta{font-size:14px;font-weight:600;color:var(--red-text);margin:10px 0 0;min-height:19px;}
.hoja-alerta h2{font-size:18px;font-weight:700;margin:0 0 8px;}
.hoja-alerta__nota{font-size:16px;font-weight:500;margin:0 0 4px;overflow-wrap:anywhere;}
.hoja-alerta__cuando{font-size:14px;color:var(--ink-soft);margin:0 0 16px;}
.hoja-alerta__acciones{display:grid;gap:10px;}
#hoja-alerta-fecha .boton{margin-top:16px;}