/* ============================================================
   JUMA - theme.css
   Fuente única de design tokens del rediseño UI/UX.
   ORDEN DE CARGA (en los layouts): Bootstrap -> theme.css -> resto.
   Modo oscuro ÚNICO: no existe modo claro ni toggle de tema.
   Regla: todo color/espaciado/animación nuevo usa estos tokens,
   nunca valores sueltos.
   ============================================================ */

:root {
    /* ===== Marca (NO cambiar el rojo base) ===== */
    --brand:          #8C1C13;   /* rojo Juma */
    --brand-hover:    #5e120c;
    --brand-accent:   #B8333A;   /* rojo más claro para glows/hover/active */
    --brand-soft:     #ff8b85;   /* rojo claro para detalles/texto sobre oscuro */
    --brand-glow:     rgba(184, 51, 58, 0.45);

    /* ===== Secundario (verde olivo: contraste complementario con el rojo) ===== */
    --secondary:        #3F5E23;   /* verde olivo base (propuesta del usuario) */
    --secondary-hover:  #324B1B;   /* más oscuro para estados :hover/active sólidos */
    --secondary-accent: #5E8A33;   /* más brillante para bordes/hover/glow */
    --secondary-soft:   #AEDC7A;   /* verde claro legible para texto/íconos sobre oscuro */
    --secondary-glow:   rgba(94, 138, 51, 0.42);

    /* ===== Fondos oscuros (cálidos para armonizar con el rojo) ===== */
    --bg-900: #100E12;   /* fondo base de la app */
    --bg-800: #17141A;   /* superficies elevadas */
    --bg-700: #1F1B23;

    /* ===== Glass ===== */
    --glass-bg:        rgba(255,255,255,0.05);
    --glass-bg-strong: rgba(255,255,255,0.08);
    --glass-border:    rgba(255,255,255,0.10);
    --glass-blur:      16px;
    --glass-inner:     inset 0 1px 0 rgba(255,255,255,0.06);

    /* ===== Texto (calibrado para legibilidad sobre glass) ===== */
    --text:       #ECEAF0;
    --text-muted: #A6A1B0;
    --text-faint: #6F6A78;

    /* ===== Estados (legibles sobre oscuro) ===== */
    --ok:   #34D399;
    --warn: #FBBF24;
    --err:  #F87171;
    --info: #60A5FA;

    /* ===== Neumorfismo (sombras duales sobre fondo oscuro) ===== */
    --neu-dark:  rgba(0,0,0,0.55);
    --neu-light: rgba(255,255,255,0.04);

    /* ===== Forma y profundidad ===== */
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;
    --shadow-card: 0 8px 30px rgba(0,0,0,0.35);

    /* ===== Layout: medidas del sidebar y topbar ===== */
    --sidebar-collapsed: 76px;   /* ancho colapsado (solo íconos) en desktop */
    --sidebar-w:         264px;  /* ancho expandido (hover / fijado) */
    --topbar-h:          60px;   /* alto de la barra superior */

    /* ===== Tipografía ===== */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ===== Motion ===== */
    --ease:     cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;
    --dur:      240ms;
    --dur-slow: 480ms;

    /* ============================================================
       RE-MAPEO DE TOKENS ANTIGUOS
       Hojas heredadas (Panel.css, Vistas.css, etc.) aún consumen
       estos nombres. Apuntarlos a los nuevos tokens evita romper
       estilos durante la transición por fases.
       NOTA: si una hoja heredada redefine estos nombres en su propio
       :root y se carga DESPUÉS de theme.css, ganará la suya hasta que
       se limpie en su fase correspondiente.
       ============================================================ */
    --color-primario:       var(--brand);
    --color-primario-hover: var(--brand-hover);
    --color-fondo:          var(--bg-900);
    --color-texto:          var(--text);
    --color-texto-suave:    var(--text-muted);
    --color-card:           var(--bg-800);
    --color-borde:          var(--glass-border);
}

/* ============================================================
   ACCESIBILIDAD: prefers-reduced-motion
   Desactiva animaciones no esenciales, 3D y spotlight. Las fases
   posteriores definen sus animaciones; esta regla base las anula.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}