/* ===========================================================================
   SOCRACI DESIGN SYSTEM — TOKENS (portados del handoff design_handoff_socraci_mobile)
   Fuente de verdad: los componentes referencian los ALIASES semánticos, nunca
   la escala cruda. El modo oscuro (html.dark, lo pone theme/js/utils.js)
   remapea SOLO los aliases — la escala no cambia.
   Fuentes web (Sora/Hanken Grotesk/JetBrains Mono): se cargan por <link> en
   _header_meta.html (no @import aquí: UNA concatena los CSS y un @import que
   no quede de primero se ignora).
   =========================================================================== */

:root {
    /* --- Brand red (poder ciudadano · acción) --- */
    --red-50: #fff0f0;
    --red-100: #ffdcdc;
    --red-200: #ffb4b4;
    --red-300: #ff7a7a;
    --red-400: #ff3b3b;
    --red-500: #ee0000; /* brand signature (del logo) */
    --red-600: #c60000;
    --red-700: #9e0202;
    --red-800: #760606;

    /* --- Ink / neutros fríos (institucional · confianza) --- */
    --ink-950: #0b1622;
    --ink-900: #0e1b2a;
    --ink-800: #16273b;
    --ink-700: #26374d;
    --ink-600: #3d5169;
    --ink-500: #5b7089;
    --ink-400: #8496ad;
    --ink-300: #afbece;
    --ink-200: #d4deea;
    --ink-100: #e7eef6;
    --ink-50: #f5faff; /* fondo app (= meta theme-color del sitio) */
    --white: #ffffff;

    /* --- Azul cívico (transparencia · enlaces · seguimiento) --- */
    --blue-50: #eaf1fe;
    --blue-100: #d3e1fd;
    --blue-500: #2563eb;
    --blue-600: #1d4fd8;
    --blue-700: #1a43b8;

    /* --- Semánticos --- */
    --green-50: #e4f5ee;
    --green-500: #16a06b;
    --green-600: #12805e;
    --amber-50: #fbf1da;
    --amber-500: #e0a008;
    --amber-600: #b7791f;
    --crimson-50: #fce8e8;
    --crimson-500: #c81e1e;
    --crimson-600: #a41414;

    /* --- ALIASES semánticos: superficies --- */
    --color-bg: var(--ink-50);
    --surface-card: var(--white);
    --surface-sunken: var(--ink-100);
    --surface-raised: var(--white);
    --surface-inverse: var(--ink-900);
    --surface-brand-soft: var(--red-50);

    /* Texto */
    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-600);
    --text-tertiary: var(--ink-500);
    --text-disabled: var(--ink-400);
    --text-on-brand: var(--white);
    --text-on-inverse: var(--ink-50);
    --text-link: var(--blue-600);

    /* Marca */
    --brand: var(--red-500);
    --brand-hover: var(--red-600);
    --brand-active: var(--red-700);
    --brand-soft: var(--red-50);
    --on-brand: var(--white);

    /* Bordes y divisores */
    --border: var(--ink-200);
    --border-strong: var(--ink-300);
    --border-brand: var(--red-500);
    --divider: var(--ink-100);

    /* Interacción / focus */
    --focus-ring: var(--red-400);

    /* Estados */
    --success: var(--green-600);
    --success-bg: var(--green-50);
    --warning: var(--amber-600);
    --warning-bg: var(--amber-50);
    --danger: var(--crimson-500);
    --danger-bg: var(--crimson-50);
    --info: var(--blue-600);
    --info-bg: var(--blue-50);

    /* --- Tipografía --- */
    --font-display: 'Sora', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra: 800;

    --fs-display: 3.25rem;
    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fs-h4: 1.25rem;
    --fs-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
    --fs-2xs: 0.6875rem;

    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --ls-tighter: -0.02em;
    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-wide: 0.02em;
    --ls-caps: 0.08em;

    /* --- Espaciado (grid 4px) --- */
    --space-0: 0;
    --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;
    --space-24: 96px;

    --width-mobile: 430px;
    --width-content: 720px;
    --width-wide: 1120px;
    --tap-min: 48px;

    /* --- Radios --- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* --- Sombras (tinte ink frío) --- */
    --shadow-xs: 0 1px 2px rgba(14, 27, 42, 0.06);
    --shadow-sm: 0 1px 3px rgba(14, 27, 42, 0.08), 0 1px 2px rgba(14, 27, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(14, 27, 42, 0.08), 0 1px 3px rgba(14, 27, 42, 0.05);
    --shadow-lg: 0 12px 28px rgba(14, 27, 42, 0.12), 0 2px 6px rgba(14, 27, 42, 0.06);
    --shadow-xl: 0 24px 56px rgba(14, 27, 42, 0.16);
    --shadow-brand: 0 6px 18px rgba(238, 0, 0, 0.28);

    --ring-width: 3px;
    --ring: 0 0 0 var(--ring-width) rgba(255, 59, 59, 0.45);

    /* --- Motion (sin rebote) --- */
    --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* --- Z-index --- */
    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;
}

/* ===========================================================================
   MODO OSCURO — remapeo de aliases (el handoff define solo claro; estos
   equivalentes conservan el mismo contraste relativo sobre fondo ink).
   =========================================================================== */
html.dark {
    --color-bg: var(--ink-950);
    --surface-card: var(--ink-800);
    --surface-sunken: var(--ink-900);
    --surface-raised: var(--ink-800);
    --surface-inverse: var(--ink-50);
    --surface-brand-soft: #3a1414;

    --text-primary: var(--ink-50);
    --text-secondary: var(--ink-300);
    --text-tertiary: var(--ink-400);
    --text-disabled: var(--ink-500);
    --text-on-inverse: var(--ink-900);
    --text-link: #8ab0ff;

    /* El rojo de marca satura sobre ink oscuro: hover ACLARA en vez de oscurecer. */
    --brand-hover: var(--red-400);
    --brand-active: var(--red-300);
    --brand-soft: #3a1414;

    --border: var(--ink-700);
    --border-strong: var(--ink-600);
    --divider: var(--ink-800);

    --success: #58c48d;
    --success-bg: #0d2818;
    --warning: #e0a008;
    --warning-bg: #2e2410;
    --danger: #ff7a7a;
    --danger-bg: #3a1414;
    --info: #8ab0ff;
    --info-bg: #14233d;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.55);
}

/* ===========================================================================
   PROPAGACIÓN GLOBAL — el sitio entero adopta los tokens.
   Se toca lo transversal (fondo, tipografía, enlaces, botones, tarjetas,
   focus, motion); los ajustes por vista viven en general.css.
   =========================================================================== */
body {
    background-color: var(--color-bg);
    font-family: var(--font-sans);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}
html.dark body {
    background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6,
.bx-db-title {
    font-family: var(--font-display);
    letter-spacing: var(--ls-tight);
}

/* Enlaces: azul cívico (el rojo queda reservado a la ACCIÓN primaria).
   REGLA DE BOTONES: un <a> que actúa como botón NUNCA recibe el azul de enlace —
   se excluye todo lo que declare *btn*/*button* en su class (bx-btn, sc-sp-btn,
   sr-*-btn, …); su color lo pone su propio componente. Sin esta exclusión, esta
   regla (más específica) pintaba de azul el texto blanco de CTAs de módulos. */
.bx-content-main a:not(.bx-btn):not(.bx-menu-link):not([class*='btn']):not([class*='button']),
.sr-loc-hint-locality a,
.sc-hub-bc-link {
    color: var(--text-link);
}

/* Botón primario = rojo de marca (un solo rojo por pantalla). */
.bx-btn.bx-btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.bx-btn.bx-btn-primary:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--on-brand);
}
.bx-btn.bx-btn-primary:active {
    background-color: var(--brand-active);
    border-color: var(--brand-active);
}

/* Botones secundarios: radio y borde del sistema. */
.bx-btn {
    border-radius: var(--radius-md);
}

/* CTAs de sc_campaigns (.sc-sp-btn, colores inline heredados): se normalizan al sistema —
   radio/altura de tokens y el MORADO (fuera de sistema) pasa al rojo de marca. Los estados
   semánticos se conservan (naranja "cambiar" → warning; blanco/rojo "retirar" se queda).
   !important porque el color original viene en style= inline. */
.sc-sp-btn {
    border-radius: var(--radius-md) !important;
    min-height: 2.75rem;
}
.sc-sp-btn[style*='6c3483'],
.sc-sp-btn[style*='8e44ad'] {
    background: var(--brand) !important;
    color: var(--on-brand) !important;
}
.sc-sp-btn[style*='6c3483']:hover,
.sc-sp-btn[style*='8e44ad']:hover {
    background: var(--brand-hover) !important;
}
.sc-sp-btn[style*='e67e22'] {
    background: var(--warning) !important;
    color: #fff !important;
}

/* Botones de Movimientos (.sc-mv-btn primario morado / .sc-mv-btn-sec secundario morado):
   primario → rojo de marca; secundario → neutro del sistema. !important porque el módulo
   inyecta su <style> inline en el body (gana por orden al CSS del head). */
.sc-mv-btn {
    background: var(--brand) !important;
    color: var(--on-brand) !important;
    border-radius: var(--radius-md) !important;
}
.sc-mv-btn:hover {
    background: var(--brand-hover) !important;
    opacity: 1 !important;
}
.sc-mv-btn-sec {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
    background: var(--surface-card) !important;
    border-radius: var(--radius-md) !important;
}
.sc-mv-btn-sec:hover {
    background: var(--surface-sunken) !important;
    color: var(--text-primary) !important;
}

/* Focus visible: anillo rojo suave (accesibilidad). */
.bx-btn:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Tarjetas / bloques: superficie, borde y radio del sistema. */
.bx-db-container {
    background-color: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
html.dark .bx-db-container {
    background-color: var(--surface-card);
    border-color: var(--border);
}

/* Cifras alineables en toda la UI (contadores, stats). */
.bx-base-pofile-unit-meta,
.sys-action-counter {
    font-variant-numeric: tabular-nums;
}

/* Eyebrow utilitario del sistema (labels en mayúsculas). */
.socraci-eyebrow {
    font-family: var(--font-sans);
    font-weight: var(--fw-extra);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--brand);
}

/* Motion: respetar prefers-reduced-motion en todo el sitio. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}