/* ==========================================================================
   SIVAR DESIGN: SISTEMA DE DISEÑO · TOKENS (versión 3, vigente desde el 26/10/2026)
   Paleta: Azul Sivar + Naranja intenso, con Marfil como fondo y Onyx como
   oscuro. Tipografía Geist y Geist Mono. La versión 2 (Sol, Esmeralda y Mint)
   está archivada en _archivo/ en la raíz del proyecto.

   Dos capas:
   1. Primitivos  (--azul-500, --naranja-500, --marfil…)  la paleta en bruto.
   2. Por función (--color-text, --color-brand…)          lo que usan los componentes.
   ========================================================================== */

@font-face{font-family:"Geist";src:url("../tipografia-web/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../tipografia-web/Geist-Italic-Variable.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../tipografia-web/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root {
  /* ---------- 1. Colores primitivos ---------- */

  /* Marca */
  --azul-500: #1d61f2;        /* Azul Sivar */
  --naranja-500: #ff8a00;     /* Naranja intenso */
  --marfil: #fffcf5;          /* Marfil: fondo principal (no es Naranja 50) */
  --onyx: #090c1d;            /* Onyx */

  /* De apoyo (derivados de las dos familias) */
  --azul-100: #dde7fd;        /* Bruma azul */
  --azul-900: #0a2255;        /* Azul profundo */
  --naranja-100: #ffedd9;     /* Naranja suave */
  --ultramar: #1444a9;        /* Ultramar: la palabra DESIGN en el logo; solo dentro del logo, no es color de interfaz */

  /* Escala Azul 50–900 (100, 500 y 900 son los colores definidos; el resto se interpola en OKLCH) */
  --azul-50: #f0f5fe;
  --azul-200: #bcd3ff;
  --azul-300: #7dabff;
  --azul-400: #4988ff;
  --azul-600: #1049c8;
  --azul-700: #0b389c;        /* texto sobre Bruma azul (8.2:1) */
  --azul-800: #0c2d75;

  /* Escala Naranja 50–900 */
  --naranja-50: #fff9f0;
  --naranja-200: #ffdbb1;
  --naranja-300: #ffbd74;
  --naranja-400: #ffa23e;     /* hover del botón principal */
  --naranja-600: #e46d00;
  --naranja-700: #b95717;
  --naranja-800: #8d4217;     /* el naranja como texto sobre claro (7.0:1 sobre Marfil) */
  --naranja-900: #602d0f;

  /* Neutros */
  --blanco: #ffffff;
  --tinta: #202020;       /* Ink Black: texto y titulares */
  --carbon: #2a2a2a;      /* bordes fuertes, divisores */
  --pizarra: #646464;     /* texto secundario */
  --ceniza: #838383;      /* texto terciario, desactivado */
  --niebla: #b3b3b3;      /* texto sobre fondo oscuro, marcadores */
  --nube: #d4d4d4;        /* líneas finas, campos */
  --hueso: #e8e8e8;       /* borde por defecto */
  --humo: #f8f9fa;        /* tarjetas */
  --yeso: #e9ebf0;        /* bandas de sección */
  --mercurio: #eeeeee;    /* fondos de etiquetas neutras */

  /* Degradado permitido (único) */
  --dark-fade: linear-gradient(#111111 24%, #000000);

  /* ---------- 2. Colores por función ---------- */
  --color-bg: var(--marfil);
  --color-bg-card: var(--blanco);
  --color-bg-band: var(--yeso);
  --color-bg-dark: var(--onyx);
  --color-bg-panel: var(--dark-fade);

  --color-text: var(--tinta);
  --color-heading: var(--tinta);
  --color-heading-display: var(--onyx);    /* 48 px o más */
  --color-text-soft: var(--pizarra);
  --color-text-muted: var(--ceniza);
  --on-dark-text: var(--niebla);
  --on-dark-heading: var(--blanco);

  --color-border: var(--hueso);
  --color-border-hairline: var(--nube);
  --color-divider: var(--carbon);

  --color-action: var(--naranja-500);      /* botón principal: relleno */
  --color-action-hover: var(--naranja-400);
  --color-action-text: var(--onyx);        /* nunca blanco sobre Naranja 500 */

  --color-brand: var(--azul-500);          /* identidad: marca, enlaces, foco */
  --color-link: var(--azul-500);
  --color-focus: var(--azul-500);
  /* Texto destacado: solo cambia el color de la palabra, sin bloque ni fondo.
     Sobre claro: Azul Sivar (principal) o Naranja 800. Sobre oscuro: Naranja 500 (principal) o Naranja 300. */
  --color-highlight: var(--azul-500);
  --color-highlight-alt: var(--naranja-800);
  --color-highlight-on-dark: var(--naranja-500);
  --color-highlight-alt-on-dark: var(--naranja-300);
  /* Estados */
  --color-success-bg: var(--azul-100);     /* «Listo»: Azul 100 + texto Azul 700 + ✓ */
  --color-success-text: var(--azul-700);
  --color-progress-bg: var(--azul-500);    /* «En curso»: Azul 500 + texto blanco */
  --color-progress-text: var(--blanco);
  --color-pending-bg: var(--naranja-100);  /* «Pendiente»: Naranja 100 + texto Naranja 800 */
  --color-pending-text: var(--naranja-800);

  /* ---------- 3. Tipografía: Geist, y Geist Mono solo en antetítulos y rótulos ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* Tamaños de texto (fijos) */
  --text-11: 0.6875rem;   /* antetítulos en Geist Mono */
  --text-12: 0.75rem;     /* estados, letra pequeña */
  --text-body-sm: 0.875rem;   /* 14: botones, menú, notas */
  --text-body: 1rem;          /* 16: texto corrido */
  --text-subheading: 1.25rem; /* 20 */

  /* Títulos (fluidos: celular 390 px → escritorio 1440 px) */
  --text-heading-sm: clamp(1.625rem, 0.76vw + 1.44rem, 2.125rem);   /* 26 → 34 */
  --text-heading: clamp(2rem, 1.52vw + 1.63rem, 3rem);              /* 32 → 48 */
  --text-heading-lg: clamp(2.25rem, 2.29vw + 1.69rem, 3.75rem);     /* 36 → 60 */
  --text-display: clamp(2.75rem, 3.43vw + 1.91rem, 5rem);           /* 44 → 80 */

  --leading-body: 1.6;
  --leading-subheading: 1.5;
  --leading-heading-sm: 1.2;
  --leading-heading: 1.25;
  --leading-heading-lg: 1.1;
  --leading-display: 1.05;

  --tracking-body: 0;          /* 25/10/2026: antes -0.01em; el texto se veía apretado */
  --tracking-subheading: -0.015em;
  --tracking-heading-sm: -0.025em;
  --tracking-heading: -0.035em;
  --tracking-heading-lg: -0.03em;   /* titular de portada, peso 560 */
  --tracking-display: -0.04em;
  --tracking-caps: 0.08em;     /* solo en mayúsculas pequeñas */
  --tracking-mono-caps: 0.16em; /* antetítulos en Geist Mono, mayúsculas */

  /* ---------- 4. Espacio (base 4 px, denso) ---------- */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-100: 100px;

  --page-max-width: 1440px;                         /* contenedor, márgenes incluidos */
  --page-margin: clamp(16px, 4vw, 48px);            /* margen exterior: 16 → 48 px */
  --page-content-width: 1344px;                     /* contenido: 1440 − 2 × 48 */
  --text-measure: 72ch;                             /* ancho máximo de un párrafo */
  --section-gap: 80px;
  --card-padding: 28px;
  --element-gap: 12px;

  /* ---------- 5. Radios ---------- */
  --radius-tags: 100px;
  --radius-badges: 9999px;
  --radius-buttons: 9999px;
  --radius-inputs: 9px;
  --radius-cards: 12px;
  --radius-images: 16px;
  --radius-large-cards: 20px;

  /* ---------- 6. Sombras (la elevación se logra con bordes y fondos) ---------- */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-subtle-2: rgba(18, 43, 165, 0.04) 0px 1px 1px -0.5px, rgba(18, 43, 165, 0.04) 0px 3px 3px -1.5px, rgba(18, 43, 165, 0.04) 0px 6px 6px -3px, rgba(18, 43, 165, 0.04) 0px 12px 12px -6px;
  --shadow-sm: rgba(13, 21, 48, 0.04) 0px 4px 4px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.17) -34px -13px 37px 0px, rgba(0, 0, 0, 0.2) -9px -3px 20px 0px;
  --shadow-md: rgba(0, 0, 0, 0.43) -8px 10px 13px 0px, rgba(0, 0, 0, 0.49) -2px 2px 7px 0px;
  --shadow-inset-dark: rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px -0.5px 0px 0px inset;

  /* ---------- 7. Movimiento ---------- */
  --ease-settle: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-hover: 0.15s;
  --duration-state: 0.25s;
  --duration-settle: 0.45s;
}