/* Ciencia para Todos — generado desde tokens.json */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eaecf0;
  --line: #d8dce2;
  --line-strong: #858d99;
  --ink: #12161c;
  --ink-muted: #4a5260;
  --ink-subtle: #5f6875;
  --azul: #1f4e79;
  --azul-strong: #173c5e;
  --azul-soft: #e3ebf3;
  --on-azul: #ffffff;
  --ocre: #c08a2e;
  --ocre-ink: #7a5310;
  --ocre-soft: #f5ecdc;
  --on-ocre: #12161c;
  --ocre-claro: #e3b766;
  --vino: #8e2a3f;
  --vino-soft: #f5e4e8;
  --on-vino: #ffffff;
  --grafito: #1b2129;
  --grafito-soft: #e6e9ee;
  --on-grafito: #ffffff;
  --success: #2d6a4f;
  --success-soft: #e2efe8;
  --warning: #875800;
  --warning-soft: var(--ocre-soft);
  --danger: #a8323e;
  --danger-soft: #f7e4e6;
  --on-danger: #ffffff;
  --info: #2b5d8a;
  --info-soft: #e4ecf4;
  --focus: #2f6fb0;
  --credit: var(--ocre);
  --credit-ink: var(--ocre-ink);
  --role-admin: #5b4b8a;
  --role-inv: var(--azul);
  --role-usr: #8a5a2b;
  --role-plat: #5a6573;
  --disc-salud: #ec4899;
  --disc-ambiente: #16a34a;
  --disc-tecnologia: #2563eb;
  --disc-sociales: #ef4444;
  --disc-exactas: #6366f1;
  --disc-humanidades: #b45309;
  --disc-agro: #22c55e;
  --disc-espacio: #5340f5;
  --on-disc: #ffffff;
  --scrim: rgba(10, 13, 18, 0.56);
  --veil: rgba(12, 16, 22, 0.68);
  --veil-strong: rgba(12, 16, 22, 0.86);
  --shadow-sm: 0 1px 2px rgba(18, 22, 28, 0.08);
  --shadow-md: 0 6px 16px rgba(18, 22, 28, 0.10), 0 1px 3px rgba(18, 22, 28, 0.06);
  --shadow-lg: 0 24px 48px rgba(18, 22, 28, 0.18);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2f6fb0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --touch-target: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --container-max: 1240px;
  --grid-columns: 12;
  --grid-columns-tablet: 8;
  --grid-columns-mobile: 4;
  --grid-gutter: 24px;
  --grid-gutter-mobile: 16px;
  --grid-margin: 32px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --sidebar-width: 264px;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  /* Marca. Valores exactos de la referencia aprobada
   * (docs/ui/referencia/landing-objetivo.png y su HTML). */
  --ink: #0c1c40;
  --ink-muted: #56637d;
  --ink-subtle: #75829b;
  --line: #e2e8f2;
  --marca-violeta: #5340f5;
  --marca-azul: #248aef;
  --marca-menta: #35c6a6;
  --marca: #5340f5;
  --marca-fuerte: #4438ce;
  --marca-suave: #f2efff;
  --on-marca: #ffffff;
  --marca-grad: linear-gradient(110deg, #5240f5, #393def);
  --marca-grad-texto: linear-gradient(100deg, #258de9, #7435ef);
  --surface-suave: #f7faff;

  /* El sistema de diseno se pinta con los mismos colores que la portada: sus
   * 46 componentes leen estos nombres, asi que remapearlos aqui arrastra las
   * 33 pantallas sin tocar ni un componente.
   *   azul   -> el violeta de la marca, que es el color de accion
   *   ocre   -> la menta, que es con lo que se cuentan los creditos
   *   grafito-> la tinta marina, para los paneles oscuros */
  --bg: #f4f6fa;
  --surface-sunken: #eef1f7;
  --line-strong: #9aa6bd;
  --azul: #5340f5;
  --azul-strong: #4438ce;
  --azul-soft: #f2efff;
  --on-azul: #ffffff;
  --ocre: #22a98c;
  --ocre-ink: #12715c;
  --ocre-soft: #e4f7f1;
  --on-ocre: #ffffff;
  --ocre-claro: #7fd9c3;
  /* `--warning-soft` colgaba de `--ocre-soft`, que acaba de volverse menta:
   * sin esto toda alerta de advertencia sale verde de exito con icono ambar. */
  --warning: #9a6200;
  --warning-soft: #fdf3e0;
  --grafito: #0c1c40;
  --grafito-soft: #e9eef8;
  --on-grafito: #ffffff;
  --vino: #b03a52;
  --vino-soft: #fbe9ee;
  --info: #248aef;
  --info-soft: #e6f2fe;
  --focus: #5340f5;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #5340f5;
  --role-admin: #7435ef;
  --role-usr: #12715c;
  --role-plat: #56637d;
  --shadow-sm: 0 1px 2px rgba(22, 42, 91, .06);
  --shadow-md: 0 10px 28px rgba(22, 42, 91, .08), 0 1px 3px rgba(22, 42, 91, .05);
  --shadow-lg: 0 24px 60px rgba(22, 42, 91, .14);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --sombra-marca: 0 16px 50px rgba(22, 42, 91, .07);

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-sans: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Escala tipografica — tercera mayor (1.25) desde 16px, redondeada.
   * Doce pasos cubren los 19 tamanos sueltos que habia cableados a pelo.
   * `--leading-*` y `--tracking-*` van aparte: el interlineado se encoge
   * conforme crece el cuerpo, y solo los titulos grandes llevan tracking
   * negativo. */
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --text-4xl: 49px;
  --text-5xl: 61px;
  --text-6xl: 76px;

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Medida: el texto corrido no pasa de 68 caracteres. */
  --measure: 68ch;
  --measure-narrow: 48ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216;
    --surface: #161a20;
    --surface-raised: #1d222a;
    --surface-sunken: #0b0d11;
    --line: #2a3039;
    --line-strong: #6b7481;
    --ink: #e8eaee;
    --ink-muted: #a3abb7;
    --ink-subtle: #8c95a1;
    --azul: #7fa8d6;
    --azul-strong: #a5c3e6;
    --azul-soft: #1a2b3d;
    --on-azul: #0b1520;
    --ocre: #d4a24c;
    --ocre-ink: #e0b765;
    --ocre-soft: #2e2416;
    --on-ocre: #12161c;
    --ocre-claro: #e3b766;
    --vino: #e597a6;
    --vino-soft: #3a1820;
    --on-vino: #2a0a12;
    --grafito: #232a35;
    --grafito-soft: #222833;
    --on-grafito: #ffffff;
    --success: #7cc4a0;
    --success-soft: #14271d;
    --warning: #e0b765;
    --warning-soft: var(--ocre-soft);
    --danger: #ef8a93;
    --danger-soft: #3a191c;
    --on-danger: #2a0709;
    --info: #8fb5dc;
    --info-soft: #182838;
    --focus: #8fb5dc;
    --marca-azul: #7ea3fb;
    --marca-violeta: #a98bf7;
    --marca: #a5b4fc;
    --marca-fuerte: #c7d2fe;
    --marca-suave: #1b1f33;
    --on-marca: #10131f;
    --credit: var(--ocre);
    --credit-ink: var(--ocre-ink);
    --role-admin: #b3a6e0;
    --role-inv: var(--azul);
    --role-usr: #d9aa7a;
    --role-plat: #a3adb9;
    --disc-salud: #e597a6;
    --disc-ambiente: #8fc49c;
    --disc-tecnologia: #8db6de;
    --disc-sociales: #bba3d9;
    --disc-exactas: #e0a970;
    --disc-humanidades: #cfae9a;
    --disc-agro: #b8c47a;
    --disc-espacio: #a4aedf;
    --on-disc: #0f1216;
    --scrim: rgba(0, 0, 0, 0.66);
    --veil: rgba(12, 16, 22, 0.68);
    --veil-strong: rgba(12, 16, 22, 0.86);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.7);
    --focus-ring: 0 0 0 2px #161a20, 0 0 0 4px #8fb5dc;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1216;
  --surface: #161a20;
  --surface-raised: #1d222a;
  --surface-sunken: #0b0d11;
  --line: #2a3039;
  --line-strong: #6b7481;
  --ink: #e8eaee;
  --ink-muted: #a3abb7;
  --ink-subtle: #8c95a1;
  --azul: #7fa8d6;
  --azul-strong: #a5c3e6;
  --azul-soft: #1a2b3d;
  --on-azul: #0b1520;
  --ocre: #d4a24c;
  --ocre-ink: #e0b765;
  --ocre-soft: #2e2416;
  --on-ocre: #12161c;
  --ocre-claro: #e3b766;
  --vino: #e597a6;
  --vino-soft: #3a1820;
  --on-vino: #2a0a12;
  --grafito: #232a35;
  --grafito-soft: #222833;
  --on-grafito: #ffffff;
  --success: #7cc4a0;
  --success-soft: #14271d;
  --warning: #e0b765;
  --warning-soft: var(--ocre-soft);
  --danger: #ef8a93;
  --danger-soft: #3a191c;
  --on-danger: #2a0709;
  --info: #8fb5dc;
  --info-soft: #182838;
  --focus: #8fb5dc;
  --credit: var(--ocre);
  --credit-ink: var(--ocre-ink);
  --role-admin: #b3a6e0;
  --role-inv: var(--azul);
  --role-usr: #d9aa7a;
  --role-plat: #a3adb9;
  --disc-salud: #e597a6;
  --disc-ambiente: #8fc49c;
  --disc-tecnologia: #8db6de;
  --disc-sociales: #bba3d9;
  --disc-exactas: #e0a970;
  --disc-humanidades: #cfae9a;
  --disc-agro: #b8c47a;
  --disc-espacio: #a4aedf;
  --on-disc: #0f1216;
  --scrim: rgba(0, 0, 0, 0.66);
  --veil: rgba(12, 16, 22, 0.68);
  --veil-strong: rgba(12, 16, 22, 0.86);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.7);
  --focus-ring: 0 0 0 2px #161a20, 0 0 0 4px #8fb5dc;
  color-scheme: dark;
}