/* ============================================================================
   Salud en familia — sistema visual
   ----------------------------------------------------------------------------
   Este archivo es el contrato visual. Los frentes de interfaz construyen SOBRE
   estos tokens y componentes; ninguno define colores, tamaños ni sombras por su
   cuenta. Cinco pantallas con su propio CSS son cinco productos distintos.

   Paleta de series validada con el verificador de contraste y daltonismo:
     claro  #2a78d6 #eb6834 #1baf7a  sobre #ffffff
     oscuro #3987e5 #d95926 #199e70  sobre #191918
   El aqua queda por debajo de 3:1 en claro: obligación de etiquetas directas
   y vista de tabla en toda gráfica que lo use. Se aceptó a cambio de una
   separación para daltonismo bastante mejor (ΔE 9.2 frente a 7.6).

   Tono: esto lo usa alguien que tuvo un infarto y está pendiente de su cuerpo.
   La interfaz tiene que ser tranquila. El color de alarma se gana su lugar;
   no se reparte como decoración.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  /* superficies — grises cálidos, no azulados: cansan menos a lo largo del día */
  --lienzo:        #f6f6f4;
  --superficie:    #ffffff;
  --superficie-2:  #fbfbf9;
  --superficie-3:  #f1f1ee;

  /* tinta */
  --tinta:         #16161a;
  --tinta-2:       #55544f;
  --tinta-3:       #6b6961;   /* 5.5:1 sobre superficie · AA para texto */

  /* líneas */
  --linea:         #e7e6e1;
  --linea-fuerte:  #d3d2cb;
  --borde:         rgba(22, 22, 26, .09);

  /* acento — lo sobrescribe el paciente activo */
  --acento:        #2a78d6;
  --acento-suave:  rgba(42, 120, 214, .10);
  --acento-tinta:  #1c5cab;

  /* series de datos */
  --serie-1:       #2a78d6;
  --serie-2:       #eb6834;
  --serie-3:       #1baf7a;
  --banda:         rgba(42, 120, 214, .07);

  /* estado — siempre acompañado de icono y etiqueta, nunca color solo */
  --ok:            #0ca30c;
  --ok-suave:      rgba(12, 163, 12, .10);
  --ok-tinta:      #056b05;
  --aviso:         #fab219;
  --aviso-suave:   rgba(250, 178, 25, .14);
  --aviso-tinta:   #7a5300;
  --serio:         #ec835a;
  --serio-suave:   rgba(236, 131, 90, .14);
  --serio-tinta:   #8f4520;
  --grave:         #d03b3b;
  --grave-suave:   rgba(208, 59, 59, .10);
  --grave-tinta:   #a02020;

  /* tipografía */
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", sans-serif;
  --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* escala tipográfica — razón 1.2, redondeada a valores legibles */
  --t-xs:   11.5px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   21px;
  --t-xl:   27px;
  --t-2xl:  34px;
  --t-3xl:  44px;

  /* ritmo de espaciado — base 4, sin valores intermedios inventados */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 20px;  --e-6: 24px;  --e-8: 32px;  --e-10: 40px;
  --e-12: 48px; --e-16: 64px;

  /* radios */
  --r-sm: 7px;  --r-md: 11px;  --r-lg: 15px;  --r-xl: 22px;  --r-full: 999px;

  /* profundidad — sombras que sugieren elevación, no que la anuncian */
  --sombra-1: 0 1px 2px rgba(22,22,26,.05), 0 1px 3px rgba(22,22,26,.04);
  --sombra-2: 0 2px 4px rgba(22,22,26,.05), 0 6px 16px rgba(22,22,26,.06);
  --sombra-3: 0 8px 24px rgba(22,22,26,.10), 0 2px 6px rgba(22,22,26,.06);

  /* movimiento — corto y con salida suave; el movimiento informa, no adorna */
  --mov-rapido: 120ms cubic-bezier(.2,.8,.3,1);
  --mov:        180ms cubic-bezier(.2,.8,.3,1);
  --mov-lento:  280ms cubic-bezier(.2,.8,.3,1);

  --ancho-max: 1400px;
  --toque-min: 44px;   /* mínimo táctil: se captura con el pulgar */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --lienzo:       #0c0c0b;
    --superficie:   #191918;
    --superficie-2: #201f1e;
    --superficie-3: #282726;
    --tinta:        #f5f5f2;
    --tinta-2:      #c2c1b8;
    --tinta-3:      #a09e94;
    --linea:        #2c2b29;
    --linea-fuerte: #3a3937;
    --borde:        rgba(255, 255, 255, .10);
    --acento:       #3987e5;
    --acento-suave: rgba(57, 135, 229, .16);
    --acento-tinta: #8fbcf0;
    --serie-1:      #3987e5;
    --serie-2:      #d95926;
    --serie-3:      #199e70;
    --banda:        rgba(57, 135, 229, .12);
    --ok-tinta:     #4ec24e;
    --aviso-tinta:  #f5c357;
    --serio-tinta:  #f0a077;
    --grave-tinta:  #f08080;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 6px rgba(0,0,0,.45);
    --sombra-3: 0 10px 30px rgba(0,0,0,.55);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --lienzo:       #0c0c0b;
  --superficie:   #191918;
  --superficie-2: #201f1e;
  --superficie-3: #282726;
  --tinta:        #f5f5f2;
  --tinta-2:      #c2c1b8;
  --tinta-3:      #a09e94;
  --linea:        #2c2b29;
  --linea-fuerte: #3a3937;
  --borde:        rgba(255, 255, 255, .10);
  --acento:       #3987e5;
  --acento-suave: rgba(57, 135, 229, .16);
  --acento-tinta: #8fbcf0;
  --serie-1:      #3987e5;
  --serie-2:      #d95926;
  --serie-3:      #199e70;
  --banda:        rgba(57, 135, 229, .12);
  --ok-tinta:     #4ec24e;
  --aviso-tinta:  #f5c357;
  --serio-tinta:  #f0a077;
  --grave-tinta:  #f08080;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 6px rgba(0,0,0,.45);
  --sombra-3: 0 10px 30px rgba(0,0,0,.55);
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.011em; line-height: 1.25; }
h1 { font-size: var(--t-xl); letter-spacing: -.018em; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); }
p  { margin: 0; }

a { color: var(--acento-tinta); text-decoration-thickness: 1px; text-underline-offset: 2px; }

::selection { background: var(--acento-suave); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* --------------------------------------------------------------- utilidades */

.apilar > * + * { margin-top: var(--e-4); }
.apilar-sm > * + * { margin-top: var(--e-2); }
.fila { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.fila-sep { display: flex; align-items: center; justify-content: space-between;
            gap: var(--e-3); flex-wrap: wrap; }
/* Los hijos flexibles también necesitan poder encogerse por debajo de su
   contenido, o un texto largo empuja la fila entera. */
.fila > *, .fila-sep > * { min-width: 0; }
.crece { flex: 1 1 auto; min-width: 0; }
.envoltura { max-width: var(--ancho-max); margin: 0 auto; padding: var(--e-6) var(--e-5) var(--e-16); }
@media (max-width: 640px) { .envoltura { padding: var(--e-4) var(--e-3) var(--e-12); } }

/* Tarjetas apiladas una tras otra. Sin esto quedan pegadas: .tarjeta no
   lleva margen propio a propósito —dentro de una rejilla el gap ya separa—,
   así que apilarlas sueltas necesita su contenedor. */
/* minmax(0,1fr) y no 1fr: el min-width por defecto de un elemento de rejilla
   es "auto", así que UN hijo con contenido ancho —una tabla, una fila que no
   parte— estira la rejilla entera por encima del contenedor. Con 375 px de
   pantalla, todas las tarjetas medían 454. */
.pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }

.rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* La fila de indicadores no siempre trae cuatro tarjetas: sin glicemia son
   tres, con peso son cinco. Con un número fijo de columnas, la que sobra se
   queda sola en una fila medio vacía. auto-fit reparte las que haya. */
.rejilla-auto { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
@media (max-width: 1100px) { .rejilla-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
                             .rejilla-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* minmax(0,1fr) y no 1fr, igual que arriba: el min-width por defecto de un
   hijo de rejilla es "auto", y un <input type="date"> tiene un ancho mínimo
   propio bastante generoso en iOS. Con 1fr, ese input estiraba la columna y
   se salía de la tarjeta. */
@media (max-width: 620px)  { .rejilla-2, .rejilla-3, .rejilla-4,
                             .rejilla-auto { grid-template-columns: minmax(0, 1fr); } }

.texto-2  { color: var(--tinta-2); }
.texto-3  { color: var(--tinta-3); }
.texto-sm { font-size: var(--t-sm); }
.texto-xs { font-size: var(--t-xs); }
.numero   { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  padding: var(--e-5);
}
/* Las tarjetas de indicador respiran un poco más: la cifra es grande y
   pegada al borde se lee apretada. */
.tarjeta.indicador { padding: var(--e-5) var(--e-5) var(--e-6); }
.tarjeta-plana { box-shadow: none; }
.tarjeta-cabecera { display: flex; align-items: baseline; justify-content: space-between;
                    gap: var(--e-3); margin-bottom: var(--e-1); }
.tarjeta-titulo { font-size: var(--t-sm); font-weight: 650; letter-spacing: 0; }
.tarjeta-nota   { font-size: var(--t-sm); color: var(--tinta-3); margin-bottom: var(--e-4); }

/* Acento lateral para tarjetas que piden atención sin gritar. */
.tarjeta-acento { border-left: 3px solid var(--acento); }
.tarjeta-grave  { border-left: 3px solid var(--grave); }

/* ------------------------------------------------------------- indicadores */

/* La cifra grande de un dato clínico. */
.indicador .rotulo { font-size: var(--t-xs); color: var(--tinta-3); margin-bottom: var(--e-1); }
.indicador .cifra {
  font-size: var(--t-2xl);
  font-weight: 630;
  letter-spacing: -.028em;
  line-height: 1.02;
  /* proporcional, no tabular: a este tamaño el tabular se ve suelto */
}
.indicador .cifra .unidad {
  font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2);
  letter-spacing: 0; margin-left: 2px;
}
/* La etiqueta de estado va SIEMPRE en su propio renglón y la nota debajo.
   Compartiendo línea, unas tarjetas la acomodaban al lado y otras la partían:
   cuatro tarjetas del mismo alto pero con el contenido a distinta altura, que
   es exactamente lo que se ve como "desparejo". */
.indicador .pie { margin-top: var(--e-3); display: flex; flex-direction: column;
                  align-items: flex-start; gap: var(--e-2); }
.indicador .pie > span:not(.marca) { font-size: var(--t-xs); color: var(--tinta-3);
                  line-height: 1.35; }

/* --------------------------------------------------------------- etiquetas */

.marca {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6;
  padding: 1px 8px; border-radius: var(--r-full);
  border: 1px solid transparent;
}
.marca-ok    { color: var(--ok-tinta);    background: var(--ok-suave); }
.marca-aviso { color: var(--aviso-tinta); background: var(--aviso-suave); }
.marca-serio { color: var(--serio-tinta); background: var(--serio-suave); }
.marca-grave { color: var(--grave-tinta); background: var(--grave-suave); }
.marca-neutra{ color: var(--tinta-2);     background: var(--superficie-3); }
.marca-acento{ color: var(--acento-tinta);background: var(--acento-suave); }

/* El punto de estado nunca va solo: siempre lleva texto al lado. */
.punto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punto-ok { background: var(--ok); } .punto-aviso { background: var(--aviso); }
.punto-serio { background: var(--serio); } .punto-grave { background: var(--grave); }
.punto-neutro { background: var(--tinta-3); }

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

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  min-height: var(--toque-min);
  padding: 0 var(--e-4);
  border-radius: var(--r-md);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--mov-rapido), border-color var(--mov-rapido),
              transform var(--mov-rapido), box-shadow var(--mov-rapido);
}
.boton:hover  { background: var(--superficie-2); border-color: var(--linea-fuerte); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.boton-primario {
  background: var(--acento); border-color: transparent; color: #fff;
  box-shadow: var(--sombra-1);
}
.boton-primario:hover { background: var(--acento); filter: brightness(1.07); }

.boton-grave { background: var(--grave); border-color: transparent; color: #fff; }
.boton-fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.boton-fantasma:hover { background: var(--superficie-3); color: var(--tinta); }
.boton-sm { min-height: 34px; font-size: var(--t-xs); padding: 0 var(--e-3); }
.boton-bloque { width: 100%; }

/* En pantalla táctil ningún control baja del mínimo, ni el "pequeño". */
@media (pointer: coarse) {
  .boton-sm { min-height: var(--toque-min); padding: 0 var(--e-4); }
}

/* Grupo segmentado: rangos de tiempo, filtros. */
.segmentado { display: inline-flex; background: var(--superficie-3);
              border-radius: var(--r-md); padding: 3px; gap: 2px; }
/* En pantalla táctil los segmentos crecen al mínimo de 44 px. */
.segmentado button {
  font: inherit; font-size: var(--t-sm); font-weight: 550;
  min-height: 38px; padding: 7px 14px; border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--tinta-2); cursor: pointer;
  transition: background var(--mov-rapido), color var(--mov-rapido);
}
.segmentado button:hover { color: var(--tinta); }
.segmentado button[aria-pressed="true"] {
  background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-1); font-weight: 640;
}
/* Después de la regla base, no antes: misma especificidad, gana la última. */
@media (pointer: coarse) {
  .segmentado button { min-height: var(--toque-min); }
}

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

.campo { display: block; }
.campo > .etiqueta {
  display: block; font-size: var(--t-sm); font-weight: 600;
  color: var(--tinta-2); margin-bottom: var(--e-2);
}
.campo > .ayuda { display: block; font-size: var(--t-xs); color: var(--tinta-3); margin-top: var(--e-2); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea {
  width: 100%; min-width: 0; max-width: 100%;
  font: inherit; font-size: var(--t-base);
  min-height: var(--toque-min);
  padding: 10px var(--e-3);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

/* Campo numérico de captura: grande, para el pulgar y para leerse de reojo. */
.campo-cifra input {
  font-size: var(--t-lg);
  font-weight: 620;
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-height: 56px;
  letter-spacing: -.01em;
}

.interruptor { display: inline-flex; align-items: center; gap: var(--e-3);
               cursor: pointer; min-height: var(--toque-min); }
.interruptor input { width: 20px; height: 20px; accent-color: var(--acento); margin: 0; }

/* ----------------------------------------------------------------- tablas */

/* Una tabla ancha scrollea DENTRO de su caja. La página nunca se mueve en
   horizontal: eso rompe la lectura en móvil y hace perder la columna. */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--e-1)); }
.tabla-scroll > .tabla { min-width: 420px; }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm);
         font-variant-numeric: tabular-nums; }
.tabla th {
  text-align: left; font-size: var(--t-xs); font-weight: 600;
  color: var(--tinta-3); padding: var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap;
}
.tabla td { padding: 10px var(--e-3); border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .n { text-align: right; }
.tabla tbody tr { transition: background var(--mov-rapido); }
.tabla tbody tr:hover { background: var(--superficie-2); }

/* ------------------------------------------------------------ cronología */

.crono { list-style: none; margin: 0; padding: 0; }
.crono > li {
  position: relative; padding: 0 0 var(--e-5) var(--e-5);
  border-left: 2px solid var(--linea);
  margin-left: var(--e-1);
}
.crono > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.crono > li::before {
  content: ""; position: absolute; left: -6px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--acento); border: 2px solid var(--superficie);
}
.crono > li.hito::before { background: var(--grave); width: 12px; height: 12px; left: -7px; }
/* Ojo: solo el <b> hijo directo va en bloque. Sin el ">", cada negrita del
   texto se convierte en su propia línea. */
.crono > li > b { display: block; font-size: var(--t-sm); font-weight: 650; }
.crono > li > span { display: block; font-size: var(--t-sm); color: var(--tinta-2); margin-top: 3px; }
.crono > li > span b { font-weight: 650; color: var(--tinta); }

/* ------------------------------------------------------------ estados */

.vacio { text-align: center; padding: var(--e-12) var(--e-5); color: var(--tinta-3); }
.vacio .icono { font-size: var(--t-2xl); opacity: .5; margin-bottom: var(--e-3); }
.vacio h3 { color: var(--tinta-2); margin-bottom: var(--e-2); }

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-3) 25%,
              var(--superficie-2) 37%, var(--superficie-3) 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes brillo { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Confirmación de guardado: aparece, se lee, se va. */
.aviso-flotante {
  position: fixed; left: 50%; bottom: var(--e-6);
  transform: translateX(-50%) translateY(0);
  background: var(--tinta); color: var(--lienzo);
  font-size: var(--t-sm); font-weight: 600;
  padding: var(--e-3) var(--e-5); border-radius: var(--r-full);
  box-shadow: var(--sombra-3); z-index: 60;
  animation: subir var(--mov-lento) both;
}
@keyframes subir {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --------------------------------------------------------------- gráficas */

.grafica { position: relative; }
.grafica svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e-4);
           font-size: var(--t-sm); color: var(--tinta-2); margin-bottom: var(--e-3); }
.leyenda i { display: inline-block; width: 16px; height: 3px; border-radius: 2px;
             vertical-align: middle; margin-right: 6px; }

.globo {
  position: absolute; pointer-events: none; opacity: 0;
  transition: opacity var(--mov-rapido);
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: var(--e-2) var(--e-3);
  font-size: var(--t-sm); box-shadow: var(--sombra-3);
  white-space: nowrap; z-index: 20; line-height: 1.4;
}

/* ------------------------------------------------------------- impresión */

@media print {
  :root { --lienzo: #fff; --superficie: #fff; --borde: #ddd; --linea: #e4e4e4; }
  .no-imprimir { display: none !important; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
  body { font-size: 11.5px; }
}