/* --- Variables de Identidad (Fase y Directa) --- */
:root {
    --brand-navy: #0f172a;       /* Azul Profundo (Fondo Directa) */
    --brand-dark: #020617;       /* Casi Negro */
    --brand-orange: #f97316;     /* Naranja Vibrante (Energía/Fase) */
    --brand-orange-dark: #ea580c; /* Naranja Oscuro (Hover) */
    --brand-light: #f8fafc;      /* Blanco Humo */
    --text-main: #334155;
}

body { 
    font-family: 'Instrument Sans', 'Segoe UI', sans-serif; 
    background-color: var(--brand-light);
    color: var(--text-main);
}

/* --- Utilidades de Color (Forzar visualización sin compilación) --- */
.bg-brand-navy { background-color: var(--brand-navy) !important; }
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.bg-brand-orange { background-color: var(--brand-orange) !important; }
.text-brand-navy { color: var(--brand-navy) !important; }
.text-brand-orange { color: var(--brand-orange) !important; }
.border-brand-navy { border-color: var(--brand-navy) !important; }
.border-brand-orange { border-color: var(--brand-orange) !important; }

.hover\:bg-brand-orange-dark:hover { background-color: var(--brand-orange-dark) !important; }

/* --- Elementos Decorativos (Hero Section) --- */
.hero-bg {
    background-color: var(--brand-navy);
    position: relative;
    overflow: hidden;
    color: white !important;
}

.hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.05;
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(249, 115, 22, 0.25), var(--brand-navy) 60%, var(--brand-navy));
    pointer-events: none;
}

/* --- Footer Unificado --- */
footer {
    background-color: var(--brand-navy) !important;
    color: #cbd5e1 !important; /* Texto gris claro */
    border-top: 4px solid var(--brand-orange) !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer strong { color: white !important; }
footer a:hover { color: var(--brand-orange) !important; }

/* --- Componentes del Sistema --- */
.tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.sidebar-item.active { background-color: var(--brand-navy); color: white; border-radius: 0.5rem; }

/* Scrollbar Personalizado */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--brand-navy); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-orange); }

.loc-badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; background: #e0e7ff; color: var(--brand-navy); border: 1px solid #c7d2fe; display: inline-block; margin-right: 4px; }