/*
 * SAO Vox: tokens de diseño, marca v3 (2026-10-16).
 * Los comparten la landing (sitio/), el panel de superadmin, el portal y las páginas del softphone,
 * el chat y el video.
 * Neutros cálidos con tinta como color primario y un solo acento naranja (#F2601F). El acento vive en
 * el logo y en la serie destacada de un gráfico; nunca en botones, foco ni estados.
 *
 * Tipografía: Archivo variable para todo (interfaz, títulos y display) y JetBrains Mono solo para
 * claves, URIs SIP, ids y código. El logotipo es Archivo 700 convertida a trazos.
 *
 * Uso: <link rel="stylesheet" href="marca/tokens.css">. Las fuentes se cargan con rutas relativas
 * (fuentes/...), así que esta hoja y la carpeta fuentes/ viajan juntas.
 *
 * Tema: sigue prefers-color-scheme. Para forzarlo, html[data-theme="light"] o html[data-theme="dark"].
 * Prefijo --sv- para no chocar con variables de otras interfaces.
 *
 * Contraste (WCAG 2.x AA), calculado con luminancia relativa sobre estos mismos valores y verificado
 * por servicio/test/marca-tokens.test.ts:
 *   - Texto >= 4.5:1: text-1/2/3 sobre bg, surface-1 y surface-2; accent-text sobre bg; success,
 *     warning y danger sobre bg, surface-1 y su fondo suave (info y call también); on-primary sobre
 *     primary; on-signal sobre signal.
 *   - No textual >= 3:1: focus, border-input y primary sobre bg y surface-1.
 *   - El acento #F2601F es un relleno de marca y no lleva texto; para texto en acento se usa accent-text.
 *
 * Reglas de uso (detalle en docs/marca/README.md):
 *   - El contenido no lleva sombra: se separa con borde o con cambio de superficie. Solo lo que flota
 *     (menús, diálogos, panel lateral) usa shadow-pop. shadow-xs a lg valen "sin sombra" y se conservan
 *     por compatibilidad; son una sombra nula y no "none" para poder ir en una lista de box-shadow.
 *   - Radios: controles md (8), paneles y diálogos lg/panel (12), chips e insignias full.
 *   - Movimiento solo en cambios de estado, con las duraciones y curvas de aquí; con
 *     prefers-reduced-motion las duraciones valen 0.
 */

@font-face {
  font-family: "Archivo";
  src: url("fuentes/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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";
  src: url("fuentes/jetbrains-mono-variable-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* Paleta base y forma (no cambian con el tema) */
:root {
  /* OBSOLETO (marca v2): índigo, cinta y señal turquesa. Ya no son la marca. Se conservan solo porque
     la vitrina vieja (referencia.css) y la landing (sitio/estilos.css) aún los leen; salen con la
     fase de landing. No usarlos en código nuevo. */
  --sv-indigo-50: #F1F2FD;
  --sv-indigo-100: #E3E7FB;
  --sv-indigo-200: #C9D0F6;
  --sv-indigo-300: #A5AFEE;
  --sv-indigo-400: #7F8BE2;
  --sv-indigo-500: #5E6AD2;
  --sv-indigo-600: #4C58BE;
  --sv-indigo-700: #3F4AA3;
  --sv-indigo-800: #343D82;
  --sv-indigo-900: #2A3066;
  --sv-indigo-950: #1D2257;
  --sv-cinta-oscura: #435A92;
  --sv-cinta-clara: #E3E7FB;
  --sv-indigo-simbolo-oscuro: #6F7BDD;
  --sv-signal-50: #E6FBF7;
  --sv-signal-100: #C3F4EB;
  --sv-signal-200: #8DE9DA;
  --sv-signal-300: #55DCC8;
  --sv-signal-400: #2FD6C0;
  --sv-signal-500: #19C6B0;
  --sv-signal-600: #0E9F8E;
  --sv-signal-700: #0A7B6F;
  --sv-signal-800: #0A5E56;
  --sv-signal-900: #0A4A44;
  /* Grises cálidos de la v3 (la escala fría de la v2 ya no existe) */
  --sv-gris-50: #FAF9F7;
  --sv-gris-100: #F3F2EF;
  --sv-gris-200: #E6E4E0;
  --sv-gris-300: #D3D0CA;
  --sv-gris-400: #ABA8A2;
  --sv-gris-500: #8F8C86;
  --sv-gris-600: #75726D;
  --sv-gris-700: #5F5D58;
  --sv-gris-800: #3A3936;
  --sv-gris-900: #1C1B1A;
  --sv-gris-950: #121211;
  /* Tinta: el fondo de las bandas oscuras (seguridad, cierre, piezas de producto), igual en los dos temas */
  --sv-tinta: #121211;
  --sv-tinta-2: #191918;
  --sv-tinta-3: #222120;
  --sv-blanco: #FFFFFF;

  /* Radios: 4 (detalles), 8 (botones y campos), 12 (paneles y diálogos) y píldora (chips e insignias) */
  --sv-radius-xs: 0.25rem;
  --sv-radius-sm: 0.5rem;
  --sv-radius-md: 0.5rem;
  --sv-radius-lg: 0.75rem;
  --sv-radius-card: 0.75rem;
  --sv-radius-xl: 0.75rem;
  --sv-radius-panel: 0.75rem;
  --sv-radius-2xl: 0.75rem;
  --sv-radius-full: 9999px;
  --sv-space-0: 0;
  --sv-space-1: 0.25rem;
  --sv-space-2: 0.5rem;
  --sv-space-3: 0.75rem;
  --sv-space-4: 1rem;
  --sv-space-5: 1.25rem;
  --sv-space-6: 1.5rem;
  --sv-space-8: 2rem;
  --sv-space-10: 2.5rem;
  --sv-space-12: 3rem;
  --sv-space-16: 4rem;
  --sv-space-20: 5rem;
  --sv-space-24: 6rem;
  --sv-space-32: 8rem;
  --sv-font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sv-font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Escala del producto: solo 12, 13, 14 (base), 16, 20, 24 y 32 px. Los nombres viejos se pliegan a ella */
  --sv-text-2xs: 0.75rem;
  --sv-text-xs: 0.8125rem;
  --sv-text-sm: 0.875rem;
  --sv-text-base: 1rem;
  --sv-text-md: 1rem;
  --sv-text-lg: 1.25rem;
  --sv-text-xl: 1.25rem;
  --sv-text-2xl: 1.5rem;
  --sv-text-3xl: 1.5rem;
  --sv-text-4xl: 2rem;
  --sv-text-5xl: 2rem;
  /* Escala de la landing (display con clamp hasta 72 px); fuera de la escala del producto */
  --sv-text-display: clamp(2.25rem, 1.35rem + 3.8vw, 3.75rem);
  --sv-text-hero: clamp(2.5rem, 1.25rem + 4.6vw, 4.5rem);
  --sv-text-h2: clamp(1.875rem, 1.25rem + 2.4vw, 2.875rem);
  --sv-weight-regular: 400;
  --sv-weight-medium: 500;
  --sv-weight-semibold: 600;
  --sv-weight-bold: 700;
  --sv-weight-extrabold: 800;
  /* Interlineado: títulos 1,15 (tight), tablas 1,4 (snug), cuerpo 1,5 (normal y relaxed) */
  --sv-leading-none: 1;
  --sv-leading-tight: 1.15;
  --sv-leading-snug: 1.4;
  --sv-leading-normal: 1.5;
  --sv-leading-relaxed: 1.5;
  --sv-tracking-hero: -0.035em;
  --sv-tracking-display: -0.035em;
  --sv-tracking-tight: -0.015em;
  --sv-tracking-normal: 0;
  /* Movimiento del producto: 150 y 200 ms con salida exponencial. instant, slower y reveal son de la landing */
  --sv-dur-instant: 80ms;
  --sv-dur-fast: 150ms;
  --sv-dur-base: 200ms;
  --sv-dur-slow: 200ms;
  --sv-dur-slower: 600ms;
  --sv-dur-reveal: 760ms;
  --sv-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sv-ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --sv-container: 76rem;
  --sv-container-narrow: 48rem;
  --sv-measure: 68ch;
  --sv-header-h: 4rem;
  --sv-z-header: 50;
  --sv-z-overlay: 100;
  --sv-z-drawer: 150;
  --sv-z-toast: 200;
}

/* Tema claro (por defecto). También sirve como ámbito: <div data-theme="light"> dentro de una página oscura */
:root,
[data-theme="light"] {
  color-scheme: light;
  --sv-bg: #FFFFFF;
  --sv-band: #F3F2EF;
  --sv-surface-1: #FAF9F7;
  --sv-surface-2: #F3F2EF;
  --sv-surface-3: #ECEAE6;
  --sv-surface-raised: #FFFFFF;
  --sv-overlay: rgba(28, 27, 26, 0.5);
  --sv-border: #E6E4E0;
  --sv-border-strong: #D3D0CA;
  --sv-border-input: #8F8C86;
  --sv-hairline: rgba(28, 27, 26, 0.07);
  --sv-text-1: #1C1B1A;
  --sv-text-2: #5F5D58;
  --sv-text-3: #716E69;
  --sv-text-inverse: #FFFFFF;
  --sv-text-brand: var(--sv-text-1);
  --sv-text-signal: var(--sv-signal);
  --sv-link: var(--sv-text-1);
  --sv-link-hover: var(--sv-text-2);
  --sv-primary: #1C1B1A;
  --sv-primary-hover: #34322F;
  --sv-primary-active: #4A4844;
  --sv-primary-soft: #F3F2EF;
  --sv-on-primary: #FFFFFF;
  --sv-accent: #F2601F;
  --sv-accent-text: #B5451A;
  --sv-signal: #12805C;
  --sv-signal-hover: #0E6B4D;
  --sv-signal-active: #0A5A41;
  --sv-signal-soft: #EEF8F3;
  --sv-on-signal: #FFFFFF;
  --sv-focus: #1C1B1A;
  --sv-focus-ring: 0 0 0 2px var(--sv-bg), 0 0 0 4px var(--sv-focus);
  --sv-selection: rgba(28, 27, 26, 0.16);
  --sv-scrollbar: #D3D0CA;
  --sv-success: #12805C;
  --sv-success-fill: #16A06F;
  --sv-success-bg: #EEF8F3;
  --sv-success-border: #A9D8C3;
  --sv-warning: #A15C07;
  --sv-warning-fill: #E8A317;
  --sv-warning-bg: #FCF3DC;
  --sv-warning-border: #E9CF8E;
  --sv-danger: #C62828;
  --sv-danger-bg: #FCEBEA;
  --sv-danger-border: #EDB4B1;
  --sv-info: var(--sv-text-2);
  --sv-info-bg: var(--sv-surface-2);
  --sv-info-border: var(--sv-border-strong);
  --sv-call: var(--sv-signal);
  --sv-call-bg: var(--sv-signal-soft);
  --sv-call-border: var(--sv-success-border);
  --sv-call-fill: var(--sv-success-fill);
  --sv-shadow-xs: 0 0 0 0 transparent;
  --sv-shadow-sm: 0 0 0 0 transparent;
  --sv-shadow-md: 0 0 0 0 transparent;
  --sv-shadow-lg: 0 0 0 0 transparent;
  --sv-shadow-pop: 0 8px 24px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .08);
}

/* Tema oscuro según el sistema, salvo que la página fuerce el claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sv-bg: #121211;
    --sv-band: #222120;
    --sv-surface-1: #191918;
    --sv-surface-2: #222120;
    --sv-surface-3: #2A2927;
    --sv-surface-raised: #1E1D1C;
    --sv-overlay: rgba(0, 0, 0, 0.62);
    --sv-border: #2C2B29;
    --sv-border-strong: #3A3936;
    --sv-border-input: #75726D;
    --sv-hairline: rgba(255, 255, 255, 0.06);
    --sv-text-1: #F2F1EE;
    --sv-text-2: #B4B1AB;
    --sv-text-3: #8F8C86;
    --sv-text-inverse: #121211;
    --sv-text-brand: var(--sv-text-1);
    --sv-text-signal: var(--sv-signal);
    --sv-link: var(--sv-text-1);
    --sv-link-hover: var(--sv-text-2);
    --sv-primary: #F2F1EE;
    --sv-primary-hover: #FFFFFF;
    --sv-primary-active: #D9D7D2;
    --sv-primary-soft: #222120;
    --sv-on-primary: #121211;
    --sv-accent: #FF7A3D;
    --sv-accent-text: #FF9A66;
    --sv-signal: #3DCB8F;
    --sv-signal-hover: #5AD9A5;
    --sv-signal-active: #2FB57C;
    --sv-signal-soft: #12281F;
    --sv-on-signal: #0B1F17;
    --sv-focus: #FFFFFF;
    --sv-focus-ring: 0 0 0 2px var(--sv-bg), 0 0 0 4px var(--sv-focus);
    --sv-selection: rgba(242, 241, 238, 0.28);
    --sv-scrollbar: #3A3936;
    --sv-success: #3DCB8F;
    --sv-success-fill: #3DCB8F;
    --sv-success-bg: #12281F;
    --sv-success-border: #1F5C43;
    --sv-warning: #F2B84B;
    --sv-warning-fill: #F2B84B;
    --sv-warning-bg: #2B2208;
    --sv-warning-border: #6B5313;
    --sv-danger: #F0706A;
    --sv-danger-bg: #341615;
    --sv-danger-border: #7A2F2D;
    --sv-info: var(--sv-text-2);
    --sv-info-bg: var(--sv-surface-2);
    --sv-info-border: var(--sv-border-strong);
    --sv-call: var(--sv-signal);
    --sv-call-bg: var(--sv-signal-soft);
    --sv-call-border: var(--sv-success-border);
    --sv-call-fill: var(--sv-success-fill);
    --sv-shadow-xs: 0 0 0 0 transparent;
    --sv-shadow-sm: 0 0 0 0 transparent;
    --sv-shadow-md: 0 0 0 0 transparent;
    --sv-shadow-lg: 0 0 0 0 transparent;
    --sv-shadow-pop: 0 8px 24px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .35);
  }
}

/* Tema oscuro forzado; también como ámbito: <div data-theme="dark"> */
[data-theme="dark"] {
  color-scheme: dark;
  --sv-bg: #121211;
  --sv-band: #222120;
  --sv-surface-1: #191918;
  --sv-surface-2: #222120;
  --sv-surface-3: #2A2927;
  --sv-surface-raised: #1E1D1C;
  --sv-overlay: rgba(0, 0, 0, 0.62);
  --sv-border: #2C2B29;
  --sv-border-strong: #3A3936;
  --sv-border-input: #75726D;
  --sv-hairline: rgba(255, 255, 255, 0.06);
  --sv-text-1: #F2F1EE;
  --sv-text-2: #B4B1AB;
  --sv-text-3: #8F8C86;
  --sv-text-inverse: #121211;
  --sv-text-brand: var(--sv-text-1);
  --sv-text-signal: var(--sv-signal);
  --sv-link: var(--sv-text-1);
  --sv-link-hover: var(--sv-text-2);
  --sv-primary: #F2F1EE;
  --sv-primary-hover: #FFFFFF;
  --sv-primary-active: #D9D7D2;
  --sv-primary-soft: #222120;
  --sv-on-primary: #121211;
  --sv-accent: #FF7A3D;
  --sv-accent-text: #FF9A66;
  --sv-signal: #3DCB8F;
  --sv-signal-hover: #5AD9A5;
  --sv-signal-active: #2FB57C;
  --sv-signal-soft: #12281F;
  --sv-on-signal: #0B1F17;
  --sv-focus: #FFFFFF;
  --sv-focus-ring: 0 0 0 2px var(--sv-bg), 0 0 0 4px var(--sv-focus);
  --sv-selection: rgba(242, 241, 238, 0.28);
  --sv-scrollbar: #3A3936;
  --sv-success: #3DCB8F;
  --sv-success-fill: #3DCB8F;
  --sv-success-bg: #12281F;
  --sv-success-border: #1F5C43;
  --sv-warning: #F2B84B;
  --sv-warning-fill: #F2B84B;
  --sv-warning-bg: #2B2208;
  --sv-warning-border: #6B5313;
  --sv-danger: #F0706A;
  --sv-danger-bg: #341615;
  --sv-danger-border: #7A2F2D;
  --sv-info: var(--sv-text-2);
  --sv-info-bg: var(--sv-surface-2);
  --sv-info-border: var(--sv-border-strong);
  --sv-call: var(--sv-signal);
  --sv-call-bg: var(--sv-signal-soft);
  --sv-call-border: var(--sv-success-border);
  --sv-call-fill: var(--sv-success-fill);
  --sv-shadow-xs: 0 0 0 0 transparent;
  --sv-shadow-sm: 0 0 0 0 transparent;
  --sv-shadow-md: 0 0 0 0 transparent;
  --sv-shadow-lg: 0 0 0 0 transparent;
  --sv-shadow-pop: 0 8px 24px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .35);
}

/* Selección de texto, casillas y cursor en tinta, nunca en el acento. [data-theme] vuelve a resolver
   los colores dentro de un ámbito de tema forzado */
:root,
[data-theme] {
  accent-color: var(--sv-primary);
  caret-color: var(--sv-text-1);
}
::selection {
  background: var(--sv-selection);
  color: var(--sv-text-1);
}

/* Movimiento reducido: sin transiciones ni animaciones */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sv-dur-instant: 0ms;
    --sv-dur-fast: 0ms;
    --sv-dur-base: 0ms;
    --sv-dur-slow: 0ms;
    --sv-dur-slower: 0ms;
    --sv-dur-reveal: 0ms;
  }
}