@charset "utf-8";
/* ============================================================================
   QBuild - Capa de tokens

   Generada desde la paleta real del proyecto: cada token conserva el valor
   exacto que tenia el CSS, por lo que la migracion no cambia ni un pixel.
   Este archivo es la UNICA fuente de verdad de color, tipografia, radios y
   sombras. styles.css no debe contener colores literales.

   Paleta:  --c-<familia>-l<luminosidad>[-a<alfa>]
            l00 = negro, l100 = blanco, a<alfa> = hex de 8 digitos

   Para cambiar el aspecto de toda la app NO se edita styles.css: se sobrescriben
   los roles de la CAPA SEMANTICA (al final del archivo) desde un tema en
   css/themes/. Los temas se cargan despues de styles.css.
   ========================================================================== */

:root {
  /* --- Blancos --- */
  --c-white-l100: #fff;  /* x28 */
  --c-white-l99: #fbfdfe;  /* x7 */
  --c-white-l99-2: #fafcfd;
  --c-white-l98: #f8fbfd;  /* x3 */
  --c-white-l98-4: #fdfcf8;
  --c-white-l98-5: #f7fdfb;  /* x2 */
  --c-white-l98-6: #f8fbfc;
  --c-white-l98-2: #f7fbfc;  /* x2 */
  --c-white-l98-3: #f6fbfb;
  --c-white-l97: #f4f7fb;
  --c-white-l97-2: #f4fbfa;

  /* --- Tintas (texto fuerte y cabecera) --- */
  --c-ink-l19-a12: #19354a12;
  --c-ink-l19-a18: #17364a18;
  --c-ink-l19-a08: #18334808;
  --c-ink-l18: #153c48;
  --c-ink-l18-a0a: #1b34400a;
  --c-ink-l17: #132e43;
  --c-ink-l16: #172b3a;
  --c-ink-l15-a18: #102f3b18;
  --c-ink-l15-a30: #102f3b30;

  /* --- Pizarra (grises con tinte frio) --- */
  --c-slate-l98: #fffaf3;
  --c-slate-l97-3: #f3fbfa;
  --c-slate-l97-4: #fff8ee;
  --c-slate-l97: #fff7ed;
  --c-slate-l97-2: #f2f7fa;  /* x2 */
  --c-slate-l96-4: #f0faf9;  /* x2 */
  --c-slate-l96-2: #eff9fa;
  --c-slate-l96-3: #eef5fb;
  --c-slate-l96: #f0f6f8;
  --c-slate-l95-4: #eef8f7;  /* x2 */
  --c-slate-l95-3: #eef7f7;
  --c-slate-l95-5: #fbeeea;  /* x2 */
  --c-slate-l95-6: #eef4f7;  /* x3 */
  --c-slate-l95: #edf2f5;  /* x2 */
  --c-slate-l95-2: #eaf7f8;
  --c-slate-l94: #eaf7f2;
  --c-slate-l94-2: #eaf2f7;
  --c-slate-l94-5: #fbe9e6;
  --c-slate-l94-3: #eaf4f5;
  --c-slate-l94-4: #e9f2f5;
  --c-slate-l93: #e8eef3;
  --c-slate-l93-2: #e6f5ec;
  --c-slate-l93-4: #e9eef2;
  --c-slate-l93-3: #e6f4f2;
  --c-slate-l92-4: #e3f4ef;
  --c-slate-l92-2: #e2f3f1;
  --c-slate-l92-3: #e2f2f2;
  --c-slate-l92: #e0f2f3;
  --c-slate-l91-4: #e3ecef;
  --c-slate-l91-5: #e3ebef;
  --c-slate-l91-3: #dff1ee;
  --c-slate-l91-2: #e1e8ee;  /* x2 */
  --c-slate-l91: #dceff2;
  --c-slate-l89: #dce5ec;
  --c-slate-l88: #d7e1e8;
  --c-slate-l88-2: #d8e4e7;
  --c-slate-l87: #d4dfe7;
  --c-slate-l85: #cfe0e4;
  --c-slate-l84: #cfd8df;
  --c-slate-l83: #c9d7dd;  /* x2 */

  /* --- Grises neutros --- */
  --c-gray-l97: #f4f8f9;  /* x4 */
  --c-gray-l97-2: #f4f8f8;  /* x2 */
  --c-gray-l96-2: #f2f6f9;
  --c-gray-l96: #f2f6f7;  /* x2 */
  --c-gray-l96-3: #f1f5f6;
  --c-gray-l95: #eff4f5;
  --c-gray-l95-2: #eef3f5;  /* x2 */
  --c-gray-l94: #edf1f2;

  /* --- Verde azulado (acento principal) --- */
  --c-teal-l87: #cfe6ea;
  --c-teal-l83: #c7dde0;
  --c-teal-l82: #c1d7df;
  --c-teal-l82-2: #bfe1e1;
  --c-teal-l72: #9ccbd1;  /* x2 */
  --c-teal-l71: #9ad0cd;  /* x4 */
  --c-teal-l66: #8ac7bd;  /* x2 */
  --c-teal-l63: #7fb7c0;  /* x2 */
  --c-teal-l60: #70b9c2;
  --c-teal-l55: #7d9299;  /* x2 */
  --c-teal-l46: #39a4af;
  --c-teal-l46-a20: #39a4af20;
  --c-teal-l46-a30: #39a4af30;
  --c-teal-l40: #536c78;
  --c-teal-l35: #3f6574;  /* x2 */
  --c-teal-l34: #258a80;  /* x2 */
  --c-teal-l29: #087f8c;
  --c-teal-l29-a1f: #087f8c1f;
  --c-teal-l29-a25: #087f8c25;
  --c-teal-l25-2: #086d79;  /* x4 */
  --c-teal-l25: #066d78;
  --c-teal-l25-3: #086b76;
  --c-teal-l22: #174b5b;
  --c-teal-l21: #006d66;

  /* --- Azules --- */
  --c-blue-l77: #b8c6cf;
  --c-blue-l60: #8a9aa6;
  --c-blue-l54-2: #7b8d9a;
  --c-blue-l54: #4d7cc7;
  --c-blue-l49: #6b7f8d;
  --c-blue-l47: #647789;
  --c-blue-l45: #617586;
  --c-blue-l41: #52707f;
  --c-blue-l40: #526879;  /* x7 */
  --c-blue-l38-2: #4f6572;  /* x4 */
  --c-blue-l38: #4b6475;

  /* --- Verdes (semaforo favorable) --- */
  --c-green-l43: #3f9e63;
  --c-green-l33: #2c7a4b;  /* x6 */

  /* --- Ambar y naranja (avisos) --- */
  --c-amber-l94: #fdf3e3;
  --c-amber-l93: #fff2dc;
  --c-amber-l93-2: #fff1dc;
  --c-amber-l86-2: #fbe0bd;
  --c-amber-l86: #ecdfc8;
  --c-amber-l85: #f0d9bf;
  --c-amber-l83: #e3c9c2;
  --c-amber-l74: #f4be83;
  --c-amber-l69: #d8b98a;
  --c-amber-l60: #e8894a;
  --c-amber-l59: #e88945;  /* x3 */
  --c-amber-l55: #d28a45;  /* x2 */
  --c-amber-l51: #c4553f;  /* x5 */
  --c-amber-l43: #9a6b3f;
  --c-amber-l41: #a33c2c;
  --c-amber-l39: #9a3f2d;
  --c-amber-l38: #a56a1a;
  --c-amber-l37: #b45309;
  --c-amber-l35: #8f3325;
  --c-amber-l34: #9a5a13;

  /* ==================================================================== */
  /* CAPA SEMANTICA: es lo que sobrescribe un tema.                       */
  /* Si un rol no esta aqui, ningun tema podra cambiarlo.                  */
  /* ==================================================================== */

  /* --- Superficies --- */
  --bg: var(--c-white-l97);  /* fondo de pagina */
  --surface: var(--c-white-l100);  /* tarjetas y paneles */
  --surface-nav: var(--c-white-l100);  /* barra de pestanas */
  --surface-soft: var(--c-white-l99);  /* filas y bloques suaves */
  --surface-sunken: var(--c-slate-l95-6);  /* zonas hundidas */

  /* --- Texto --- */
  --ink: var(--c-ink-l16);  /* texto principal */
  --muted: var(--c-blue-l47);  /* texto secundario */
  --text-2: var(--c-blue-l40);  /* pestanas */
  --text-3: var(--c-blue-l38-2);
  --text-label: var(--c-blue-l45);  /* etiquetas de campo */
  --text-inverse: var(--c-white-l100);  /* sobre fondo oscuro */

  /* --- Bordes --- */
  --line: var(--c-slate-l89);  /* borde general */
  --line-card: var(--c-slate-l91-2);  /* borde de tarjeta */
  --line-control: var(--c-slate-l88);  /* borde de boton */
  --line-input: var(--c-slate-l87);  /* borde de campo */

  /* --- Acento y foco --- */
  --teal: var(--c-teal-l29);  /* acento principal */
  --teal-dark: var(--c-teal-l25);  /* acento en hover */
  --teal-strong: var(--c-teal-l25-2);  /* pestana activa */
  --teal-focus: var(--c-teal-l46);  /* anillo de foco */
  --teal-hover: var(--c-teal-l60);  /* borde en hover */
  --teal-tint: var(--c-slate-l91);  /* fondo de pestana activa */
  --teal-wash: var(--c-slate-l96-2);  /* fondo de hover */

  /* --- Semaforo --- */
  --orange: var(--c-amber-l59);  /* aviso */
  --red: var(--c-amber-l51);  /* desfavorable */
  --green: var(--c-green-l43);  /* favorable */

  /* --- Cabecera --- */
  --header-from: var(--c-ink-l17);  /* degradado: inicio */
  --header-to: var(--c-teal-l22);  /* degradado: fin */
  --header-text: var(--c-teal-l82);  /* subtitulo de cabecera */

  /* Cabecera: degradado a partir de dos tokens de paleta */
  --header-bg: linear-gradient(120deg, var(--header-from), var(--header-to));

  /* --- Radios --- */
  --r-2: 2px;
  --r-3: 3px;
  --r-6: 6px;
  --r-7: 7px;
  --r-8: 8px;
  --r-9: 9px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --r-pill: 999px;
  --radius: 16px;  /* alias historico: radio de tarjeta */

  /* --- Sombras --- */
  --shadow: 0 8px 28px rgba(25, 48, 72, .055);
  --shadow-soft: 0 1px 2px rgba(24, 51, 72, .03);

  /* --- Tipografia --- */
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-body);
  --w-normal: 400;
  --w-medium: 550;
  --w-bold: 700;
}