:root {
    /* 21 Variables Semánticas con valores por defecto (fallback) */
    --color-bg-body: #000519;
    --color-bg-surface: #1e293b;
    --color-bg-surface-dark: #0d1321;
    --color-bg-overlay: rgba(0, 0, 0, 0.85);
    --color-text-primary: #ffffff;
    --color-text-secondary: #94a3b8;
    --color-text-inverse: #0b1129;
    --color-primary: #2dd4bf;
    --color-primary-hover: #14b8a6;
    --color-accent: #fb923c;
    --color-accent-hover: #f97316;
    --color-border: #334155;
    --color-border-strong: #1e293b;
    --color-border-focus: #2dd4bf;
    --color-success: #22c55e;
    --color-error: #ef4444;
    --color-warning: #eab308;
    --color-info: #3b82f6;
    --color-image-bg: #0f172a;
    --color-select-bg: #0b1129;
    --color-select-text: #e2e8f0;
}

/* --- Placeholder Styles --- */
::placeholder {
    color: var(--color-text-secondary) !important;
    opacity: 0.7;
}

/* --- Fondo de superposición para modales --- */
.modal-overlay {
    background-color: var(--color-bg-overlay) !important;
}

/* --- Clases para compatibilidad --- */
.text-primary { color: var(--color-text-primary) !important; }
.text-white { color: #ffffff !important; }
.text-muted { color: var(--color-text-secondary) !important; }
.text-inverse { color: var(--color-text-inverse) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-error { color: var(--color-error) !important; }
.text-success { color: var(--color-success) !important; }

.bg-body { background-color: var(--color-bg-body) !important; }
.bg-surface { background-color: var(--color-bg-surface) !important; }
.bg-surface-dark { background-color: var(--color-bg-surface-dark) !important; }
.bg-primary { 
    background-color: var(--color-primary) !important; 
    color: var(--color-text-inverse) !important;
}
.bg-primary-hover { background-color: var(--color-primary-hover) !important; }
.bg-accent { 
    background-color: var(--color-accent) !important; 
    color: var(--color-text-inverse) !important;
}
.bg-accent-hover { background-color: var(--color-accent-hover) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-success { background-color: var(--color-success) !important; }

.border-divider { border-color: var(--color-border) !important; }
.border-strong { border-color: var(--color-border-strong) !important; }
.border-focus { border-color: var(--color-border-focus) !important; }

.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover) !important; }
.hover\:bg-accent-hover:hover { background-color: var(--color-accent-hover) !important; }
.hover\:bg-surface-dark:hover { background-color: var(--color-bg-surface-dark) !important; }
.hover\:bg-body:hover { background-color: var(--color-bg-body) !important; }
.focus\:border-focus:focus { border-color: var(--color-border-focus) !important; }

/* --- Sidebar Colapsable --- */
#sidebar { 
    transition: width 0.3s ease; 
    overflow: hidden;
    white-space: nowrap;
}
#sidebar.collapsed { width: 5rem; }
#sidebar.collapsed .nav-item span { display: none; }
#sidebar.collapsed .sidebar-title { display: none; }
#sidebar.collapsed .nav-item { justify-content: center; }

/* Active nav item highlight */
.nav-item.active {
    background-color: var(--color-bg-surface-dark);
    color: var(--color-text-primary) !important;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
}

/* ============================================================
   COMPATIBILIDAD ADMIN → VARIABLES SEMÁNTICAS
   Migración gradual: Fase 1 (Puente). 
   Futuras fases: Reemplazar clases antiguas por semánticas (Fases 2/3 del plan de migración).
   ============================================================ */

/* --- FONDOS (Slate → Variables) --- */
.bg-slate-950 { background-color: var(--color-bg-body) !important; }
.bg-slate-900 { background-color: var(--color-bg-surface-dark) !important; }
.bg-slate-800 { background-color: var(--color-bg-surface) !important; }
.bg-slate-850 { background-color: var(--color-bg-surface) !important; }
.bg-slate-700 { background-color: var(--color-border) !important; }

/* Fondos con opacidad */
.bg-slate-900\/40 { background-color: color-mix(in srgb, var(--color-bg-surface-dark) 40%, transparent) !important; }
.bg-slate-900\/30 { background-color: color-mix(in srgb, var(--color-bg-surface-dark) 30%, transparent) !important; }
.bg-slate-800\/80 { background-color: color-mix(in srgb, var(--color-bg-surface) 80%, transparent) !important; }
.bg-slate-800\/50 { background-color: color-mix(in srgb, var(--color-bg-surface) 50%, transparent) !important; }
.bg-surface-dark\/40 { background-color: color-mix(in srgb, var(--color-bg-surface-dark) 40%, transparent) !important; }
.bg-surface-dark\/30 { background-color: color-mix(in srgb, var(--color-bg-surface-dark) 30%, transparent) !important; }

/* --- TEXTO (Slate → Variables) --- */
.text-slate-100, .text-slate-200 { color: var(--color-text-primary) !important; }
.text-slate-300 { color: var(--color-text-secondary) !important; }
.text-slate-400 { color: var(--color-text-secondary) !important; }
.text-slate-500 { color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent) !important; }
.text-slate-600 { color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent) !important; }

/* --- TEXTO TEAL (Marca) --- */
.text-teal-300 { color: var(--color-primary) !important; }
.text-teal-400 { color: var(--color-primary) !important; }
.text-teal-500 { color: var(--color-primary) !important; }
.text-teal-600 { color: var(--color-primary-hover) !important; }

/* --- TEXTO ROSE (Error) --- */
.text-rose-100 { color: var(--color-text-primary) !important; }
.text-rose-300 { color: var(--color-error) !important; }
.text-rose-400 { color: var(--color-error) !important; }
.text-rose-500 { color: var(--color-error) !important; }
.text-rose-600 { color: var(--color-error) !important; }

/* --- TEXTO AMBER (Warning) --- */
.text-amber-400 { color: var(--color-warning) !important; }

/* --- TEXTO INDIGO (Info) --- */
.text-indigo-400 { color: var(--color-info) !important; }

/* --- FONDOS TEAL (Marca) --- */
.bg-teal-500 { background-color: var(--color-primary) !important; color: var(--color-text-inverse) !important; }
.bg-teal-600 { background-color: var(--color-primary-hover) !important; color: var(--color-text-inverse) !important; }

/* Fondos teal con opacidad */
.bg-teal-500\/10 { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; }
.bg-teal-900\/90 { background-color: color-mix(in srgb, var(--color-primary-hover) 90%, transparent) !important; }

/* --- FONDOS ROSE (Error) --- */
.bg-rose-500 { background-color: var(--color-error) !important; color: var(--color-text-inverse) !important; }
.bg-rose-600 { background-color: var(--color-error) !important; color: var(--color-text-inverse) !important; }

/* Fondos rose con opacidad */
.bg-rose-500\/10 { background-color: color-mix(in srgb, var(--color-error) 10%, transparent) !important; }
.bg-rose-500\/20 { background-color: color-mix(in srgb, var(--color-error) 20%, transparent) !important; }
.bg-rose-500\/40 { background-color: color-mix(in srgb, var(--color-error) 40%, transparent) !important; }
.bg-rose-600\/10 { background-color: color-mix(in srgb, var(--color-error) 10%, transparent) !important; }
.bg-rose-600\/20 { background-color: color-mix(in srgb, var(--color-error) 20%, transparent) !important; }
.bg-rose-900\/90 { background-color: color-mix(in srgb, var(--color-error) 90%, transparent) !important; }

/* --- FONDOS INDIGO --- */
.bg-indigo-600\/20 { background-color: color-mix(in srgb, var(--color-info) 20%, transparent) !important; }
.bg-indigo-600\/40 { background-color: color-mix(in srgb, var(--color-info) 40%, transparent) !important; }

/* --- BORDES (Slate → Variables) --- */
.border-slate-800 { border-color: var(--color-border) !important; }
.border-slate-700 { border-color: var(--color-border-strong) !important; }
.border-slate-600 { border-color: var(--color-border) !important; }

/* Bordes con opacidad */
.border-slate-800\/80 { border-color: color-mix(in srgb, var(--color-border) 80%, transparent) !important; }
.border-slate-800\/50 { border-color: color-mix(in srgb, var(--color-border) 50%, transparent) !important; }

/* Bordes teal */
.border-teal-500 { border-color: var(--color-primary) !important; }
.border-teal-500\/50 { border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important; }
.border-teal-500\/20 { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important; }

/* Bordes rose */
.border-rose-500 { border-color: var(--color-error) !important; }
.border-rose-500\/50 { border-color: color-mix(in srgb, var(--color-error) 50%, transparent) !important; }
.border-rose-500\/20 { border-color: color-mix(in srgb, var(--color-error) 20%, transparent) !important; }
.border-rose-600\/50 { border-color: color-mix(in srgb, var(--color-error) 50%, transparent) !important; }

/* Bordes indigo */
.border-indigo-600\/30 { border-color: color-mix(in srgb, var(--color-info) 30%, transparent) !important; }

/* --- HOVER STATES --- */
.hover\:bg-slate-800:hover { background-color: var(--color-bg-surface) !important; }
.hover\:bg-slate-700:hover { background-color: var(--color-border) !important; }
.hover\:bg-teal-500:hover { background-color: var(--color-primary) !important; }
.hover\:bg-rose-500\/20:hover { background-color: color-mix(in srgb, var(--color-error) 20%, transparent) !important; }
.hover\:bg-rose-500\/40:hover { background-color: color-mix(in srgb, var(--color-error) 40%, transparent) !important; }
.hover\:bg-rose-600:hover { background-color: var(--color-error) !important; }
.hover\:bg-indigo-600\/40:hover { background-color: color-mix(in srgb, var(--color-info) 40%, transparent) !important; }
.hover\:text-slate-300:hover { color: var(--color-text-secondary) !important; }
.hover\:text-slate-100:hover { color: var(--color-text-primary) !important; }
.hover\:text-rose-400:hover { color: var(--color-error) !important; }
.hover\:border-slate-600:hover { border-color: var(--color-border) !important; }

/* --- FOCUS STATES --- */
.focus\:border-teal-500:focus { border-color: var(--color-border-focus) !important; }
.focus\:border-slate-600:focus { border-color: var(--color-border-focus) !important; }
.focus\:ring-teal-500:focus { --tw-ring-color: var(--color-border-focus) !important; }
.focus\:ring-1:focus { --tw-ring-opacity: 1 !important; }

/* --- PLACEHOLDERS --- */
.placeholder-slate-600::placeholder { color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent) !important; }

/* --- ACCENT COLOR (para admin) --- */
.accent-primary { accent-color: var(--color-primary) !important; }