/* Tokens de diseno del portal AquaChemIQ: archivo unico para las plantillas Flask y la SPA (diseno v2, 14-10-2026).
   Las paginas no definen colores propios: enlazan este archivo (/static/css/tokens.css) y usan var(--...).
   Conserva la identidad de la pagina publicada (Manrope y Source Sans 3, turquesa, esquinas redondeadas, sombras
   suaves, franja degradada) y corrige lo que midio la auditoria (auditoria-diseno, anexo C): turquesa #167A8A
   (5,0:1 con blanco; el anterior #1B8A9C daba 4,06:1), borde de campo #7D909B (3,3:1), foco solido de 2 px y una
   paleta estable para los graficos. Las fuentes las sirve el propio portal: nada se carga de Google Fonts ni de un CDN. */

/* Fuentes servidas por el portal (licencia OFL en /static/fonts/OFL-Manrope.txt y OFL-SourceSans3.txt).
   Subconjunto latin: los simbolos que no traen (→ ≤ Δ ✓) salen de la fuente del sistema. */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* marca (tema agua) */
  --agua: #0b3552;
  --agua2: #12436a;
  --agua3: #2b5b7e;
  --corriente: #167a8a; /* acciones y enlaces: 5,0:1 con blanco y 4,7:1 sobre el fondo */
  --corriente-h: #126a78; /* hover de las acciones */
  --espuma: #63c7d2;
  --espuma2: #a9d3dc;
  --espuma3: #d7edf2;
  --grad: linear-gradient(90deg, #36b4e5 0%, var(--corriente) 55%, #2e9e5b 100%); /* franja y barra de titulo */

  /* superficies, lineas y texto */
  --fondo: #f3f8fa;
  --panel: #ffffff;
  --panel2: #e3f2f5;
  --panel3: #fbfdfe;
  --line: #d5e6eb; /* divisores; no sirve como borde de un campo */
  --line2: #c4d9e0;
  --campo: #7d909b; /* borde de campos: 3,3:1 (WCAG 1.4.11) */
  --ink: #1d2a33; /* 15,4:1 sobre blanco */
  --muted: #4f6672; /* 6,0:1 sobre blanco */
  --foco: #0b6fa4; /* contorno de foco visible */

  /* estados */
  --cumple: #2e7d5b;
  --cumplebg: #e4f4ec;
  --cumpleink: #1f5e43;
  --cumpleline: #bfe3cf;
  --alerta: #b8741a;
  --alertabg: #fff3dc;
  --alertaink: #6b4407;
  --alertaline: #eed9a6;
  --detener: #b4382b;
  --detenerbg: #f9e1de;
  --detenerink: #7a241b;
  --detenerline: #f0b9b2;
  --infobg: #e3f2f5;
  --infoink: #0b3552;
  --turb: #7a4e2b;
  /* nombres que usan las plantillas basadas en base.html */
  --ok: var(--cumple);
  --okbg: var(--cumplebg);
  --err: var(--detener);
  --errbg: var(--detenerbg);

  /* graficos: paleta categorica estable. Azul y naranja son el par que mejor se distingue con daltonismo:
     se reservan para lo que mas se compara (invierno/verano, planta A/B, anionico/no ionico). El rojo no es
     una serie: queda para alertas. */
  --serie-1: #0b6fa4; /* azul: invierno, seleccion A, anionico, etapa 2 */
  --serie-2: #c26a00; /* naranja: verano, seleccion B, no ionico, etapa 1 */
  --serie-3: #12805c; /* verde: seleccion C */
  --serie-4: #a23d84; /* morado: seleccion D, cationico */
  --serie-hist: #848f97; /* ensayos historicos (hasta 2025): 3,3:1 */
  --serie-2026: #1d2a33; /* ensayos 2026 (validacion) */
  --banda: #2e7d5b; /* banda oficial de la tabla 2026 */

  /* tipografia: la misma de la pagina publicada, servida en local */
  --fd: 'Manrope', 'Segoe UI', Roboto, system-ui, sans-serif;
  --ft: 'Source Sans 3', 'Segoe UI', Roboto, system-ui, sans-serif;
  --fm: var(--ft); /* cifras: misma fuente, con numeros tabulares (ver body) */
  --fs-body: 16px;
  --fs-label: 13px;
  --fs-hint: 13px;
  --fs-small: 12.5px;
  --fs-h2: 17px;
  --fs-h1: 24px;
  --fs-dose: 36px;
  --fs-dose-hero: 60px;

  /* espaciado, radios y sombras */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --r: 12px; /* tarjetas */
  --rs: 8px; /* campos, botones, chips */
  --rp: 999px; /* pastillas */
  --shadow-1: 0 1px 2px rgba(11, 53, 82, 0.06);
  --shadow-2: 0 8px 24px rgba(11, 53, 82, 0.12);
  --alto-campo: 44px; /* campos y botones */

  /* ancho y margen lateral de todas las paginas (Flask y SPA): el titulo no salta al cambiar de pagina */
  --ancho-pagina: 1360px;
  --margen-pagina: 24px;
}

@media (max-width: 600px) {
  :root {
    --margen-pagina: 16px;
  }
}

/* Reglas comunes minimas */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

body {
  font-variant-numeric: tabular-nums;
}

td.num,
th.num {
  text-align: right;
}

td.num,
.cifra {
  font-variant-numeric: tabular-nums;
}

/* Campos y botones con la tipografia de la pagina (sin esto el navegador usa Arial) */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Señal de carga al pasar a otra pagina del portal (Comparar y Laboratorio tardan unos 2 s en el servidor y antes
   no se veia nada): barra delgada arriba y cursor de espera. La activa el script de la barra (Flask) o AppShell (SPA). */
body.ptap-cargando {
  cursor: progress;
}

body.ptap-cargando::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  background: var(--espuma);
  transform-origin: left;
  animation: ptap-carga 3s ease-out forwards;
}

@keyframes ptap-carga {
  from {
    transform: scaleX(0.05);
  }
  to {
    transform: scaleX(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ptap-cargando::before {
    animation: none;
    transform: scaleX(0.6);
  }
}

/* Texto solo para lectores de pantalla (encabezados de columnas de acciones, avisos de estado). top/left en 0: sin
   ellos, dentro de una tabla con desplazamiento lateral el texto queda en su sitio original, fuera del contenedor, y
   ensancha la pagina (en celular /prueba media 1.153 px y se veia alejada). */
.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hoja de consigna para imprimir (Calculadora): sin barra, menus ni boton flotante; solo el contenido */
@media print {
  .nav,
  .ptap-nav,
  .subnav,
  .ptap-subnav,
  .saltar,
  .ptap-saltar,
  .aqw-btn,
  .aqw-panel {
    display: none !important;
  }

  body {
    background: #fff;
  }
}