/* ========================================
   LX Base - Variables de Tema
   Soporta tema claro y oscuro

   ESCALA DE RADIUS (qué token usar para qué):
   --radius-sm   (6px)   → controles pequeños: badges, iconos, botones chicos
   --radius-md   (10px)  → cards, inputs, botones, dropdowns
   --radius-lg   (14px)  → modales, paneles, contenedores grandes
   --radius-full (999px) → pills, avatares, indicadores circulares
   (border-radius: 50% se conserva para círculos perfectos)

   ESCALA DE MOVIMIENTO:
   --duration-fast (150ms) → micro-interacciones (hover, focus)
   --duration-base (200ms) → transiciones estándar de componentes
   --duration-slow (300ms) → paneles, banners, elementos grandes
   --ease-out → easing estándar (mismo que las View Transitions)
   ======================================== */

/* Tema claro (por defecto) */
:root {
    /* Colores base */
    --bg-primary: #F8F9FC;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --card-bg: #ffffff;
    
    /* Header y sidebar — oscuro de marca sobre fondo claro */
    --header-bg: #0A0A0A;
    --header-text: #FAFAFA;
    --header-border: rgba(255, 255, 255, 0.08);
    --header-shadow: 0 1px 2px rgba(10, 10, 10, 0.12), 0 4px 16px rgba(10, 10, 10, 0.10);
    --sidebar-header-bg: #0A0A0A;
    --sidebar-content-bg: #111111;

    /* Nav del sidebar (fondo oscuro en ambos temas) */
    --nav-active: #f3fafe;
    --nav-active-bg: rgba(243, 250, 254, 0.10);
    --nav-hover-bg: rgba(255, 255, 255, 0.06);

    /* Texto */
    --text-primary: #1A1D23;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;

    /* Bordes y sombras */
    --border: #E2E8F0;
    --border-light: #CBD5E1;
    --border-table: #E2E8F0;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-hover: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-card: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Acento — negro sobre fondos claros; azul hielo (#f3fafe) como tint */
    --accent: #0A0A0A;
    --accent-light: #f3fafe;
    --accent-dark: #000000;

    /* DEPRECADO: nombre legado del rebrand (ya no es verde) — usar --accent. Solo alias de compatibilidad. */
    --theme-green: var(--accent);
    --theme-green-light: var(--accent-light);
    --theme-green-dark: var(--accent-dark);
    --theme-secondary: #64748B;
    --theme-light: #f8f9fa;
    --theme-border: #E2E8F0;
    --theme-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --theme-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --theme-shadow-hover: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
    --theme-shadow-card: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* Semantica de color (Bootstrap-friendly) */
    --color-primary: #0d6efd;
    --color-primary-contrast: #ffffff;
    --color-success: #198754;
    --color-success-contrast: #ffffff;
    --color-danger: #dc3545;
    --color-danger-contrast: #ffffff;
    --color-warning: #f59f00;
    --color-warning-contrast: #1f2328;
    --color-info: #0dcaf0;
    --color-info-contrast: #062631;

    /* Neutrales para botones "claros" en dark/light */
    --color-neutral-surface: #f8f9fa;
    --color-neutral-border: #dee2e6;
    --color-neutral-text: #212529;

    /* Escala de spacing 4/8 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Radius (ver escala documentada en cabecera) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* Movimiento */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-out: cubic-bezier(.4,0,.2,1);

    /* Mapeo Bootstrap → tokens (los componentes BS heredan sin overrides) */
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);

    /* Tipografia base */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
}

/* Tema oscuro */
[data-theme="dark"] {
    --bg-primary: #131316;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #272727;
    --card-bg: #2d2d2d;
    
    /* Header y sidebar — elevados sobre --bg-primary (#131316) para distinguirse */
    --header-bg: #1B1B1F;
    --header-text: #E0E0E0;
    --header-border: var(--border);
    --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --sidebar-header-bg: #1B1B1F;
    --sidebar-content-bg: #18181C;

    --text-primary: #E0E0E0;
    --text-secondary: #94A3B8;
    --text-muted: #94A3B8;
    
    --border: #383838;
    --border-light: #4a4a4a;
    --border-table: #3a3a3a;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-card: 0 8px 25px rgba(0,0,0,0.5);
    
    --accent: #f3fafe;
    --accent-light: rgba(243, 250, 254, 0.12);
    --accent-dark: #c8e3f5;

    --theme-green: var(--accent);
    --theme-green-light: var(--accent-light);
    --theme-green-dark: var(--accent-dark);
    --theme-secondary: #94A3B8;
    --theme-light: #272727;
    --theme-border: #383838;
    --theme-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --theme-shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
    --theme-shadow-card: 0 8px 25px rgba(0,0,0,0.5);

    /* Semantica de color dark (mejor contraste) */
    --color-primary: #3b82f6;
    --color-primary-contrast: #f7fbff;
    --color-success: #10b981;
    --color-success-contrast: #f0fdf8;
    --color-danger: #ef4444;
    --color-danger-contrast: #fff5f5;
    --color-warning: #f59e0b;
    --color-warning-contrast: #1f1300;
    --color-info: #38bdf8;
    --color-info-contrast: #041a2a;

    --color-neutral-surface: #272727;
    --color-neutral-border: #4a4a4a;
    --color-neutral-text: #f3f4f6;
}

/* ========================================
   Tipografía global - Override de Nunito Sans
   Inter se carga desde Google Fonts en _Layout
   ======================================== */
body,
.jq-toast-single,
.jq-toast-single h2,
.tooltip {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Selector de tema en header */
.theme-toggle {
    background: transparent;
    border: none;
    color: var(--header-text);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: opacity var(--duration-base) var(--ease-out);
}
.theme-toggle:hover {
    opacity: 0.85;
}
.theme-toggle i {
    font-size: 1.1rem;
}