/* S392 — LAS DOS LETRAS DE LA APLICACIÓN. Inter para los textos, las tablas
   y los números corrientes: está hecha para pantallas y se lee bien chica y en
   el celular. Plus Jakarta Sans para los títulos y los números destacados. Se cargan
   acá, y no en cada pantalla, porque este archivo lo cargan todas. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');

/* ============================================================================
 *  tema.css — Los colores de la aplicación, en claro y en oscuro (S362)
 *
 *  CÓMO FUNCIONA
 *
 *  Toda la aplicación pinta con variables (--surface-2, --text-muted, …), no
 *  con colores escritos a mano. Este archivo dice cuánto vale cada una en el
 *  tema oscuro; en claro valen lo que dicen app.css y las páginas que tienen
 *  su propia paleta. El guion compartido pone data-tema="oscuro" en <html>
 *  cuando corresponde —por elección de la persona o porque el dispositivo
 *  está en oscuro— y estas reglas pasan a mandar.
 *
 *  POR QUÉ UN ARCHIVO APARTE Y NO DENTRO DE app.css. Las pantallas de ingreso,
 *  de contraseña nueva y de página no encontrada no cargan app.css, y
 *  también tienen que verse en oscuro. Un solo archivo con la paleta, que
 *  cargan todas, es la única forma de que no haya dos versiones de un color.
 *
 *  LO QUE NO SE TOCA. Los colores con significado propio y tono medio —el
 *  azul de la marca, el rojo de lo urgente, las series de los gráficos— se
 *  leen bien sobre los dos fondos y quedan iguales. Lo que cambia es lo que
 *  depende del fondo: superficies, textos, bordes y los fondos pálidos de
 *  los avisos, que en oscuro pasan a ser un tinte translúcido del mismo color.
 * ========================================================================== */

/* Colores que antes estaban escritos a mano en las páginas y ahora tienen
   nombre. En claro valen exactamente lo que valían. */
:root {
  --surface-3: #e8e6e0;
  --surface-4: #d3d1c7;
  --surface-flotante: rgba(255,255,255,0.95);
  --grilla: #e8e6e0;

  /* La «tinta» con la que se hacen los bordes y sombreados translúcidos:
     rgba(var(--tinta), 0.10). Casi negra sobre claro, blanca sobre oscuro. */
  --tinta: 11,11,11;
  /* El fondo al pasar el mouse sobre una pieza sin fondo propio: oscurece
     lo que haya debajo, sea la página o un panel. */
  --hover-tinte: rgba(var(--tinta), 0.06);
  /* S406 — El fondo al pasar el mouse sobre una pieza con fondo propio
     (botones, filas de un recuadro, opciones de un menú). Es lleno y no
     translúcido para que sirva también en la primera columna fija de las
     tablas, que tapa lo que pasa por debajo. */
  --hover-fondo: #efede8;

  /* S406 — LOS COLORES CON SIGNIFICADO PROPIO, CON NOMBRE. Estaban escritos
     a mano en app.css. Valen lo mismo en los dos temas (ver «Lo que no se
     toca», arriba). Cada uno trae también su versión en números, para las
     transparencias: rgba(var(--azul-marca-rgb), 0.10). */
  --azul-marca: #5096FE;  --azul-marca-rgb: 80,150,254;
  --azul-marca-hover: #3d76ce;   /* el botón azul al pasar el mouse */
  --azul-agua: #2a78d6;  --azul-agua-rgb: 42,120,214;   /* los valores de agua: reserva, riego */
  --rojo-nivel: #e24b4a;     --rojo-nivel-rgb: 226,75,74;
  --naranja-nivel: #e87e1a;  --naranja-nivel-rgb: 232,126,26;
  --amarillo-nivel: #c8a800; --amarillo-nivel-rgb: 200,168,0;
  --naranja-aviso: #e87600;  --naranja-aviso-rgb: 232,118,0;   /* avisos y marcas de atención */
  --rojo-peligro: #c8312b;   --rojo-peligro-rgb: 200,49,43;    /* bordes y fondos de lo peligroso */

  --bg-danger: #fdeaea;   --text-danger: #8b1a1a;   --text-rojo: #c8312b;
  --bg-amarillo: #fef8e1; --text-amarillo: #8a7400;
  --bg-naranja: #fef0e4;  --text-naranja: #b75900;
  --bg-verdeagua: #e8f7f0; --text-verdeagua: #0f6e56;
  --bg-violeta: #f1ecfc;  --text-violeta: #5b3fb5;
}

html[data-tema="oscuro"] {
  /* Los controles propios del navegador —listas desplegables, casillas,
     barras de desplazamiento— también se dibujan en oscuro. */
  color-scheme: dark;

  --surface-0: #14161a;
  --surface-1: #1b1e22;
  --surface-2: #22262b;
  --surface-3: #2c3137;
  --surface-4: #3a4047;
  --surface-flotante: rgba(34,38,43,0.95);
  --grilla: #343a41;

  --text-primary: #ebeae6;
  --text-secondary: #bdbbb5;
  --text-muted: #8f8d87;

  --tinta: 255,255,255;
  --hover-fondo: #2f3439;
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-stronger: rgba(255,255,255,0.30);

  --bg-accent: rgba(80,150,254,0.16);   --text-accent: #8cbcff;
  --bg-success: rgba(124,184,114,0.16); --text-success: #9fd08a;
  --bg-warning: rgba(232,160,40,0.16);  --text-warning: #f0b464;
  --bg-danger: rgba(226,75,74,0.18);    --text-danger: #f5a3a0;  --text-rojo: #f07c75;
  --bg-amarillo: rgba(237,200,0,0.14);  --text-amarillo: #e3c64f;
  --bg-naranja: rgba(232,126,26,0.16);  --text-naranja: #f3a55a;
  --bg-verdeagua: rgba(27,175,122,0.16); --text-verdeagua: #62d3ad;
  --bg-violeta: rgba(123,92,214,0.20);  --text-violeta: #b8a3f0;

  /* Los tres del «medido» de Balance hídrico, que esa página declara aparte. */
  --medido-bg: rgba(123,92,214,0.20);
  --medido-texto: #b8a3f0;
}


/* ============================================================
   LOS TAMAÑOS DE LETRA, EN UN SOLO LUGAR (S368, ampliado en S392)
   Las letras de hasta 15 px de las pantallas usan estas variables en
   lugar del número suelto (font-size: var(--fs-13)). El nombre de cada
   variable es el tamaño de la escala chica en la computadora.
   Hay tres escalas, y cada persona elige la suya (Preferencias o el menú
   de Configuración): CHICA, la de fábrica; MEDIANA y GRANDE. El guion
   compartido pone data-letra en <html> con la elegida, igual que hace
   con el tema. Los títulos (16 px o más) no cambian con la escala.
   En celulares y tablets cada escala es un poco mayor: a la distancia a
   la que se mira un teléfono, 10 u 11 px se leen con esfuerzo.
   Para cambiar un tamaño de toda la aplicación alcanza con tocar acá.
   Va en este archivo y no en app.css porque es el único que cargan
   todas las pantallas, también el ingreso y la página de error.
   ============================================================ */
:root {
  --fs-9: 9px;  --fs-9-5: 9.5px;
  --fs-10: 10px; --fs-10-5: 10.5px;
  --fs-11: 11px; --fs-11-5: 11.5px;
  --fs-12: 12px; --fs-12-5: 12.5px;
  --fs-13: 13px; --fs-13-5: 13.5px;
  --fs-14: 14px; --fs-15: 15px;
}
html[data-letra="mediana"] {
  --fs-9: 10.5px;  --fs-9-5: 10.5px;
  --fs-10: 11px; --fs-10-5: 11.5px;
  --fs-11: 12px; --fs-11-5: 12.5px;
  --fs-12: 13px; --fs-12-5: 13.5px;
  --fs-13: 14px; --fs-13-5: 14.5px;
  --fs-14: 15px; --fs-15: 15.5px;
}
html[data-letra="grande"] {
  --fs-9: 12px;  --fs-9-5: 12px;
  --fs-10: 12.5px; --fs-10-5: 13px;
  --fs-11: 13.5px; --fs-11-5: 14px;
  --fs-12: 14.5px; --fs-12-5: 15px;
  --fs-13: 15.5px; --fs-13-5: 15.5px;
  --fs-14: 16px; --fs-15: 16px;
}
@media (max-width: 768px) {
  :root {
    --fs-9: 12px;  --fs-9-5: 12px;
    --fs-10: 12.5px; --fs-10-5: 13px;
    --fs-11: 13px; --fs-11-5: 13.5px;
    --fs-12: 14px;
  }
  html[data-letra="mediana"] {
    --fs-9: 12.5px;  --fs-9-5: 12.5px;
    --fs-10: 13px; --fs-10-5: 13px;
    --fs-11: 13.5px; --fs-11-5: 13.5px;
    --fs-12: 14px; --fs-12-5: 14.5px;
    --fs-13: 14.5px; --fs-13-5: 15px;
    --fs-14: 15.5px; --fs-15: 16px;
  }
  html[data-letra="grande"] {
    --fs-9: 13.5px;  --fs-9-5: 13.5px;
    --fs-10: 14px; --fs-10-5: 14px;
    --fs-11: 14.5px; --fs-11-5: 15px;
    --fs-12: 15.5px; --fs-12-5: 16px;
    --fs-13: 16px; --fs-13-5: 16px;
    --fs-14: 16.5px; --fs-15: 16.5px;
  }
}


/* ── S368 — El enlace del pie de página, en las pantallas sin app.css ─────
   «Irricontrol», al lado del año, lleva a la página de la empresa. En las
   pantallas que cargan app.css usa su pieza 5, el enlace dentro de un texto
   (clase «enlace»). El ingreso, la contraseña nueva y la página de error no
   cargan app.css, y su pie va sobre la foto oscura: la misma pieza, con el
   azul de la marca, que ahí se lee. */
.enlace-pie { color: var(--azul-marca); font-weight: 500; text-decoration: none; }
.enlace-pie:hover { text-decoration: underline; }

/* ── S392 — La letra, aplicada ─────────────────────────────────────────────
   Cada pantalla pinta con --font-sans; acá se le da su valor para todas (la
   regla empieza con «html» para mandar sobre la paleta propia de cada una).
   Hay dos variables: una para los textos (Inter) y otra para los títulos y
   los números destacados (Plus Jakarta Sans). Para cambiar la letra de toda la
   aplicación, o sólo la de los títulos, alcanza con tocar acá. */
:root {
  --font-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-titulos: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
html:root { --font-sans: var(--font-texto); }
html body, html button, html input, html select, html textarea { font-family: var(--font-texto); }
/* Títulos de página, de sección y de ventana, y los números destacados. */
html :is(h1, h2, h3, h4, .page-title, .section-title, .config-section-title, .card-title, .ver-titulo,
         .greeting-name, .bh-op-nombre, .app-modal-titulo, .balance-info-title, .nota-ed-titulo,
         .num-val, .metric-val, .hist-stat-val, .meteo-card-val, .stat-card-value,
         .cb-resumen-value, .hh-resumen-value, .pc-resumen-value) { font-family: var(--font-titulos); }
/* Los números de las tablas, alineados en columnas parejas. */
html table { font-variant-numeric: tabular-nums; }

/* ── S392 — El logo según el tema ──────────────────────────────────────────
   Donde va el logo hay dos imágenes iguales en tamaño: la azul (logo-claro)
   y la blanca (logo-oscuro). Se muestra la que corresponde al tema. */
html:not([data-tema="oscuro"]) .logo-oscuro { display: none; }
html[data-tema="oscuro"] .logo-claro { display: none; }

/* ── S395 — El logo «Proyecto ANII», en el pie de todas las páginas ─────────
   Debajo del renglón de derechos, chico y tenue, como una firma. Lo dibuja
   esta regla, sin tocar el contenido de cada página: alcanza a cualquier pie
   (el de las pantallas de la aplicación, el del ingreso, el de la página no
   encontrada y el de la verificación de reportes). Está acá, y no en app.css,
   porque éste es el único archivo de estilos que cargan todas. anii.png es
   blanca sobre transparente: hace de molde (máscara) y se pinta con el color
   del texto del pie, así que se adapta sola al tema y al fondo. Antes iba
   sólo en Inicio. */
:is(.page-footer, .site-footer, .ver-pie, footer.footer)::after {
  content: ""; display: block; width: 62px; height: 32px; margin: 10px auto 0; opacity: 0.75;
  background-color: currentColor;
  -webkit-mask: url('anii.png') center / contain no-repeat; mask: url('anii.png') center / contain no-repeat;
}