/* NO EDITAR: generado desde s4-plataforma/ui (S4 UI) · versión 689b137 */
/*
 * S4 UI · tokens.css
 * Fuente única de colores, tipografía, radios, espaciado, sombras, vidrio y movimiento de toda la
 * plataforma S4 (S4 Projects, S4 CRM, S4 Time & Expense, portal, cuadros de mando).
 * Nadie define colores ni tipografías por su cuenta: se importa este fichero.
 *
 * ── Origen: Manual de Imagen Corporativa de S4 Security (noviembre 2023) ───────────────────
 * Resumen con página de cada regla en marca/MANUAL.md. Los valores de color son los HEX del manual:
 *   Principal 1  #0088DD  (p. 16)   escala: #E6F3FC · #99CFF1 · #4DACE7 · #0088DD · #005F9B · #00446F
 *   Principal 2  #001F54  (p. 16)   escala: #E6E9EE · #99A5BB · #4D6287 · #001F54 · #00163B · #00102A
 *   Secundarios  #E6E6E6 · #B0BDC1 gris plateado · #A68559 mostaza Dijon (p. 17)
 * El manual solo da HEX (RGB y CMYK están en blanco y no hay Pantone). Los pasos intermedios que el manual
 * no trae (brand-100/300/500/1000, neutral-200/600 y la rampa del tema noche) son interpolaciones lineales
 * entre dos pasos vecinos del propio manual.
 *
 * ── Vocabulario ─────────────────────────────────────────────────────────────────────────────
 * Se conservan los nombres de variables de Plane (brand-100…1200, brand-default, neutral-100…1200,
 * neutral-black/white, bg-accent-primary, txt-accent-primary, txt-accent-secondary, txt-link-primary):
 * el portal y la paleta de S4 Projects dependen de ellos. En cada tema el número sube del fondo al
 * texto (neutral-100 = el más cercano al lienzo, neutral-1200 = el más cercano al texto).
 *
 * AA: #0088DD es el color de marca en isotipo, iconos, foco y bordes (≥3:1 sobre blanco), pero con texto
 * blanco encima (3,8:1) no llega a 4,5:1. Para botones y enlaces con texto se usa el paso «Dark» del
 * mismo tono: brand-800 #005F9B (6,8:1 con blanco).
 *
 * ── Temas: Día / Noche / Automático (se elige en el menú de usuario de <s4-barra>; ver tema.js) ──
 *   Día        (por defecto) data-theme="light"  → el claro de :root
 *   Noche      data-theme="dark"                 → bloque «noche» de abajo
 *   Automático sin atributo                      → claro, y noche si el sistema lo pide (prefers-color-scheme)
 * Los dos bloques de noche son idénticos (lo comprueba pruebas/contraste.test.mjs): si cambias uno, cambia el otro.
 */

/* ── Tipografía (autoalojada, licencia OFL en fuentes/) ─────────────────────────────────────
 * Michroma  títulos y encabezados (manual p. 12)
 * Inter     texto y títulos de segundo nivel, la misma que usa S4 Projects (decisión de Javi, 2026-10-30: «como
 *           projects»). El manual pide «Muller» (Fontfabric), sin licencia de uso web; Inter Variable es OFL.
 * JetBrains Mono  código y datos (manual p. 30 la nombra para la web)
 */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fuentes/michroma-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fuentes/michroma-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fuentes/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fuentes/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fuentes/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("./fuentes/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════ Tema día (por defecto) ═════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Escala de marca: Principal 1 del manual (p. 16) y su paso hacia el Principal 2 */
  --brand-100: #f2f9fe;
  --brand-200: #e6f3fc;
  --brand-300: #c0e1f7;
  --brand-400: #99cff1;
  --brand-500: #73beec;
  --brand-600: #4dace7;
  --brand-700: #0088dd;
  --brand-800: #005f9b;
  --brand-900: #00446f;
  --brand-1000: #003262;
  --brand-1100: #001f54;
  --brand-1200: #00163b;
  --brand-default: #0088dd;

  /* Neutros: grises plateados del manual (p. 17) arriba, escala del Principal 2 (p. 16) para el texto */
  --neutral-white: #ffffff;
  --neutral-100: #f7f8f9;
  --neutral-200: #eef1f3;
  --neutral-300: #dfe5e6;
  --neutral-400: #c8d1d4;
  --neutral-500: #b0bdc1;
  --neutral-600: #959fa4;
  --neutral-700: #7b8487;
  --neutral-800: #4d6287;
  --neutral-900: #26406b;
  --neutral-1000: #001f54;
  --neutral-1100: #00163b;
  --neutral-1200: #00102a;
  --neutral-black: #00102a;

  /* Mostaza Dijon (p. 17): acento cálido, solo en pequeñas dosis */
  --accent-warm: #a68559;
  --accent-warm-dark: #745d3e;
  --accent-warm-light: #dbcebd;
  --accent-warm-lightest: #f6f3ee;

  /* Roles de acento con texto: paso AA en lugar de --brand-default */
  --bg-accent-primary: var(--brand-800);
  --txt-accent-primary: var(--brand-800);
  --txt-accent-secondary: var(--brand-900);
  --txt-link-primary: var(--brand-800);

  /* Roles de superficie y texto */
  --bg-canvas: var(--neutral-white); /* «blanco papel»: el logo va sobre blanco */
  --bg-surface-1: var(--neutral-white);
  --bg-surface-2: var(--neutral-200);
  --bg-raised: var(--neutral-white);
  --bg-hover: var(--neutral-300);
  --bg-seleccion: color-mix(in srgb, var(--txt-primary) 9%, transparent); /* fila activa del armazón (como S4 Projects) */
  --bg-pressed: var(--neutral-400);
  --bg-accent-primary-hover: var(--brand-900);
  --bg-accent-subtle: var(--brand-200);
  --txt-primary: var(--neutral-1000);
  --txt-secondary: var(--neutral-900);
  --txt-tertiary: var(--neutral-800);
  --txt-on-accent: var(--neutral-white);
  --txt-link-hover: var(--brand-1000);
  --txt-disabled: var(--neutral-700);
  --border-subtle: var(--neutral-300);
  --border-default: var(--neutral-400);
  --border-strong: var(--neutral-700);
  --border-accent: var(--brand-default);
  --focus-ring: var(--brand-default);

  /* Estados: fondo suave, texto (AA sobre su fondo), borde y punto de color. El aviso usa la mostaza del manual. */
  --success-bg: #e6f4ec;
  --success-txt: #0f6636;
  --success-border: #b7dfc7;
  --success-solid: #1f9d55;
  --warning-bg: var(--accent-warm-lightest);
  --warning-txt: var(--accent-warm-dark);
  --warning-border: var(--accent-warm-light);
  --warning-solid: var(--accent-warm);
  --danger-bg: #fdecea;
  --danger-txt: #a8231b;
  --danger-border: #f2b8b3;
  --danger-solid: #d93a2f;
  --info-bg: var(--brand-200);
  --info-txt: var(--brand-900);
  --info-border: var(--brand-300);
  --info-solid: var(--brand-default);

  /* Marco gris de la plataforma y barra común <s4-barra> (armazón de S4 Projects, Javi, 2026-10-31): la barra es del
     color del marco, sin filete (solo con el atributo sin-marco), con el isotipo en el azul del manual */
  --bg-marco: #e7ebed;
  --bg-barra: var(--bg-marco);
  --bg-barra-solido: var(--bg-marco);
  --bg-barra-hover: rgba(0, 136, 221, 0.09);
  --txt-barra: var(--txt-primary);
  --txt-barra-secundario: var(--txt-tertiary);
  --borde-barra: rgba(0, 31, 84, 0.1);
  --isotipo-barra: var(--brand-default);

  /* Sombras en capas, teñidas del azul corporativo (nunca negro puro) */
  --shadow-sm: 0 1px 2px rgba(0, 31, 84, 0.06), 0 1px 1px rgba(0, 31, 84, 0.04);
  --shadow-md: 0 1px 2px rgba(0, 31, 84, 0.05), 0 4px 10px rgba(0, 31, 84, 0.07), 0 8px 20px rgba(0, 95, 155, 0.06);
  --shadow-lg: 0 2px 4px rgba(0, 31, 84, 0.06), 0 12px 28px rgba(0, 31, 84, 0.12), 0 24px 48px rgba(0, 95, 155, 0.1);
  --overlay: rgba(0, 16, 42, 0.45);

  /* Vidrio esmerilado sutil: fondo semitransparente + desenfoque, borde de 1 px, brillo interior */
  --glass-bg: rgba(255, 255, 255, 0.64);
  --glass-bg-hover: rgba(255, 255, 255, 0.8);
  --glass-borde: rgba(0, 31, 84, 0.09);
  --glass-brillo: rgba(255, 255, 255, 0.95);
  --glass-brillo-puntero: rgba(0, 136, 221, 0.1);
  --glass-sombra:
    0 1px 1px rgba(0, 31, 84, 0.04), 0 2px 4px rgba(0, 31, 84, 0.04), 0 8px 16px rgba(0, 31, 84, 0.05),
    0 16px 32px rgba(0, 95, 155, 0.06);
  --glass-sombra-hover:
    0 1px 1px rgba(0, 31, 84, 0.04), 0 4px 8px rgba(0, 31, 84, 0.06), 0 14px 28px rgba(0, 31, 84, 0.09),
    0 28px 56px rgba(0, 136, 221, 0.14);

  /* Fondo de página: manchas muy suaves de la marca (el vidrio solo se nota si hay algo detrás) */
  --fondo-brillo-1: rgba(0, 136, 221, 0);
  --fondo-brillo-2: rgba(0, 136, 221, 0);
  --fondo-brillo-3: rgba(0, 136, 221, 0);
  --fondo-hex-opacidad: 0.5; /* suavizado a petición de Javi (2026-10-30) */
  --txt-espera: #745d3e;
  --borde-espera: #a68559;

  /* El logo RTLab es blanco: en día se invierte (ver base.css .s4-logo-rtlab) */
  --logo-rtlab-filter: invert(1);
}

/* ═══════════════════════════ Tema noche ═════════════════════════════════════════════════ */
/* Bloque 1 de 2: Automático (sin elección) y el sistema pide oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --neutral-black: #00102a;
    --neutral-100: #00163b;
    --neutral-200: #001f54;
    --neutral-300: #0f2c5e;
    --neutral-400: #1f3a68;
    --neutral-500: #2e4773;
    --neutral-600: #3e557d;
    --neutral-700: #4d6287;
    --neutral-800: #7383a1;
    --neutral-900: #99a5bb;
    --neutral-1000: #c0c7d4;
    --neutral-1100: #e6e9ee;
    --neutral-1200: #f7f8f9;
    --neutral-white: #ffffff;
    --brand-100: #00163b;
    --brand-200: #001f54;
    --brand-300: #002a5c;
    --brand-400: #003864;
    --brand-500: #00446f;
    --brand-600: #005f9b;
    --brand-700: #0088dd;
    --brand-800: #4dace7;
    --brand-900: #99cff1;
    --brand-1000: #c0e1f7;
    --brand-1100: #e6f3fc;
    --brand-1200: #f2f9fe;
    --brand-default: #4dace7;

    --accent-warm: #c1aa8b;
    --accent-warm-dark: #53432d;
    --accent-warm-light: #dbcebd;
    --accent-warm-lightest: #2a2012;

    --bg-accent-primary: var(--brand-600);
    --txt-accent-primary: var(--brand-default);
    --txt-accent-secondary: var(--brand-900);
    --txt-link-primary: var(--brand-default);

    --bg-canvas: var(--neutral-black);
    --bg-surface-1: var(--neutral-100);
    --bg-surface-2: var(--neutral-200);
    --bg-raised: var(--neutral-200);
    --bg-hover: var(--neutral-300);
    --bg-seleccion: color-mix(in srgb, var(--txt-primary) 9%, transparent);
    --bg-pressed: var(--neutral-400);
    --bg-accent-primary-hover: var(--brand-500);
    --bg-accent-subtle: var(--brand-200);
    --txt-primary: var(--neutral-1100);
    --txt-secondary: var(--neutral-1000);
    --txt-tertiary: var(--neutral-900);
    --txt-on-accent: var(--neutral-white);
    --txt-link-hover: var(--brand-900);
    --txt-disabled: var(--neutral-700);
    --border-subtle: var(--neutral-300);
    --border-default: var(--neutral-400);
    --border-strong: var(--neutral-800);
    --border-accent: var(--brand-default);
    --focus-ring: var(--brand-default);

    --success-bg: #0e2a1d;
    --success-txt: #7ddba5;
    --success-border: #1f5a3d;
    --success-solid: #3fbf7a;
    --warning-bg: var(--accent-warm-lightest);
    --warning-txt: var(--accent-warm-light);
    --warning-border: var(--accent-warm-dark);
    --warning-solid: var(--accent-warm);
    --danger-bg: #381517;
    --danger-txt: #ff9a92;
    --danger-border: #6b2a2c;
    --danger-solid: #ff6b60;
    --info-bg: var(--brand-200);
    --info-txt: var(--brand-900);
    --info-border: var(--brand-400);
    --info-solid: var(--brand-default);

    --bg-marco: var(--neutral-black);
    --bg-barra: var(--bg-marco);
    --bg-barra-solido: var(--bg-marco);
    --bg-barra-hover: rgba(77, 172, 231, 0.14);
    --txt-barra: var(--txt-primary);
    --txt-barra-secundario: var(--txt-tertiary);
    --borde-barra: rgba(255, 255, 255, 0.1);
    --isotipo-barra: #ffffff; /* Noche: isotipo en blanco (Javi, 2026-10-30) */

    --shadow-sm: 0 1px 2px rgba(0, 8, 24, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 8, 24, 0.5), 0 1px 3px rgba(0, 8, 24, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 8, 24, 0.6), 0 2px 6px rgba(0, 8, 24, 0.45);
    --overlay: rgba(0, 8, 24, 0.65);

    --glass-bg: rgba(0, 31, 84, 0.5);
    --glass-bg-hover: rgba(0, 31, 84, 0.68);
    --glass-borde: rgba(255, 255, 255, 0.1);
    --glass-brillo: rgba(255, 255, 255, 0.12);
    --glass-brillo-puntero: rgba(77, 172, 231, 0.16);
    --glass-sombra: 0 1px 1px rgba(0, 8, 24, 0.4), 0 8px 16px rgba(0, 8, 24, 0.35), 0 16px 32px rgba(0, 8, 24, 0.3);
    --glass-sombra-hover: 0 4px 8px rgba(0, 8, 24, 0.45), 0 14px 28px rgba(0, 8, 24, 0.4), 0 28px 56px rgba(0, 136, 221, 0.22);

    --fondo-brillo-1: rgba(0, 136, 221, 0);
    --fondo-brillo-2: rgba(0, 136, 221, 0);
    --fondo-brillo-3: rgba(0, 136, 221, 0);
    --fondo-hex-opacidad: 0.5;
    --txt-espera: #dbcebd;
    --borde-espera: #a68559;

    --logo-rtlab-filter: none;
  }
}

/* Bloque 2 de 2: Noche elegida (idéntico al anterior) */
:root[data-theme="dark"] {
  color-scheme: dark;

  --neutral-black: #00102a;
  --neutral-100: #00163b;
  --neutral-200: #001f54;
  --neutral-300: #0f2c5e;
  --neutral-400: #1f3a68;
  --neutral-500: #2e4773;
  --neutral-600: #3e557d;
  --neutral-700: #4d6287;
  --neutral-800: #7383a1;
  --neutral-900: #99a5bb;
  --neutral-1000: #c0c7d4;
  --neutral-1100: #e6e9ee;
  --neutral-1200: #f7f8f9;
  --neutral-white: #ffffff;
  --brand-100: #00163b;
  --brand-200: #001f54;
  --brand-300: #002a5c;
  --brand-400: #003864;
  --brand-500: #00446f;
  --brand-600: #005f9b;
  --brand-700: #0088dd;
  --brand-800: #4dace7;
  --brand-900: #99cff1;
  --brand-1000: #c0e1f7;
  --brand-1100: #e6f3fc;
  --brand-1200: #f2f9fe;
  --brand-default: #4dace7;

  --accent-warm: #c1aa8b;
  --accent-warm-dark: #53432d;
  --accent-warm-light: #dbcebd;
  --accent-warm-lightest: #2a2012;

  --bg-accent-primary: var(--brand-600);
  --txt-accent-primary: var(--brand-default);
  --txt-accent-secondary: var(--brand-900);
  --txt-link-primary: var(--brand-default);

  --bg-canvas: var(--neutral-black);
  --bg-surface-1: var(--neutral-100);
  --bg-surface-2: var(--neutral-200);
  --bg-raised: var(--neutral-200);
  --bg-hover: var(--neutral-300);
  --bg-seleccion: color-mix(in srgb, var(--txt-primary) 9%, transparent);
  --bg-pressed: var(--neutral-400);
  --bg-accent-primary-hover: var(--brand-500);
  --bg-accent-subtle: var(--brand-200);
  --txt-primary: var(--neutral-1100);
  --txt-secondary: var(--neutral-1000);
  --txt-tertiary: var(--neutral-900);
  --txt-on-accent: var(--neutral-white);
  --txt-link-hover: var(--brand-900);
  --txt-disabled: var(--neutral-700);
  --border-subtle: var(--neutral-300);
  --border-default: var(--neutral-400);
  --border-strong: var(--neutral-800);
  --border-accent: var(--brand-default);
  --focus-ring: var(--brand-default);

  --success-bg: #0e2a1d;
  --success-txt: #7ddba5;
  --success-border: #1f5a3d;
  --success-solid: #3fbf7a;
  --warning-bg: var(--accent-warm-lightest);
  --warning-txt: var(--accent-warm-light);
  --warning-border: var(--accent-warm-dark);
  --warning-solid: var(--accent-warm);
  --danger-bg: #381517;
  --danger-txt: #ff9a92;
  --danger-border: #6b2a2c;
  --danger-solid: #ff6b60;
  --info-bg: var(--brand-200);
  --info-txt: var(--brand-900);
  --info-border: var(--brand-400);
  --info-solid: var(--brand-default);

  --bg-marco: var(--neutral-black);
  --bg-barra: var(--bg-marco);
  --bg-barra-solido: var(--bg-marco);
  --bg-barra-hover: rgba(77, 172, 231, 0.14);
  --txt-barra: var(--txt-primary);
  --txt-barra-secundario: var(--txt-tertiary);
  --borde-barra: rgba(255, 255, 255, 0.1);
  --isotipo-barra: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 8, 24, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 8, 24, 0.5), 0 1px 3px rgba(0, 8, 24, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 8, 24, 0.6), 0 2px 6px rgba(0, 8, 24, 0.45);
  --overlay: rgba(0, 8, 24, 0.65);

  --glass-bg: rgba(0, 31, 84, 0.5);
  --glass-bg-hover: rgba(0, 31, 84, 0.68);
  --glass-borde: rgba(255, 255, 255, 0.1);
  --glass-brillo: rgba(255, 255, 255, 0.12);
  --glass-brillo-puntero: rgba(77, 172, 231, 0.16);
  --glass-sombra: 0 1px 1px rgba(0, 8, 24, 0.4), 0 8px 16px rgba(0, 8, 24, 0.35), 0 16px 32px rgba(0, 8, 24, 0.3);
  --glass-sombra-hover: 0 4px 8px rgba(0, 8, 24, 0.45), 0 14px 28px rgba(0, 8, 24, 0.4), 0 28px 56px rgba(0, 136, 221, 0.22);

  --fondo-brillo-1: rgba(0, 136, 221, 0);
  --fondo-brillo-2: rgba(0, 136, 221, 0);
  --fondo-brillo-3: rgba(0, 136, 221, 0);
  --fondo-hex-opacidad: 0.5;
  --txt-espera: #dbcebd;
  --borde-espera: #a68559;

  --logo-rtlab-filter: none;
}

/* ═══════════════════════ Lo que no cambia con el tema ═══════════════════════════════════ */
:root {
  /* Tipografía */
  --font-display: "Michroma", "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter Variable", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15px;
  --text-md: 16.5px;
  --text-lg: 19px;
  --text-xl: 23px;
  --text-2xl: 29px;
  --text-3xl: 40px;
  --text-display-1: 26px; /* Michroma es muy ancha: títulos de página */
  --text-display-2: 17px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-base: 1.5;
  --tracking-tight: -0.011em;
  --tracking-display: 0.01em;
  --tracking-caps: 0.06em;

  /* Espaciado (rejilla de 4 px) */
  --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;

  /* Radios: el manual admite recuadros de esquinas redondeadas en iconos (p. 19) */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Tamaños de control (≥44 px en táctil lo resuelve base.css) */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;
  --barra-alto: 40px; /* como S4 Projects (Javi, 2026-10-31; antes 38 px) */
  --barra-alto-movil: 48px; /* táctil: 44 px de control + 2 de margen */
  --ancho-lectura: 40rem;
  --ancho-contenido: 72rem;

  /* Movimiento: ≤300 ms, salida rápida */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Vidrio: desenfoque y saturación son iguales en todos los temas */
  --glass-blur: 14px;
  --glass-saturacion: 140%;

  /* Elevación 3D de las tarjetas interactivas: ≤3° y 4 px */
  --inclinacion-max: 2.5deg;
  --elevacion: 2px;
  --perspectiva: 900px;

  --z-barra: 100;
  --z-panel: 110;
}

/* Quien pide menos movimiento, no lo recibe: los cambios siguen ocurriendo, pero al instante */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
    --inclinacion-max: 0deg;
    --elevacion: 0px;
  }
}