body {
  font-family: "Inter", sans-serif;
  background-color: #f8fafc;
  color: #334155;
}

/* Chart Container Styling */
.chart-container {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  height: 350px;
  max-height: 400px;
}

@media (max-width: 640px) {
  .chart-container {
    height: 280px;
  }
}

/* Custom Scrollbar for Sidebar */
.custom-scroll::-webkit-scrollbar {
  width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* --- ESTILOS DE NAVEGACIÓN (SIDEBAR) --- */

/* 1. Comportamiento Base */
.nav-item {
    transition: all 0.2s ease-in-out;
    border-right: 4px solid transparent; /* Reserva espacio para el borde */
}

/* 2. Estado Hover y Activo (MODO CLARO) */
/* Fondo azul muy sutil (0.1 opacidad) y texto azul oscuro fuerte */
.nav-item:hover,
.nav-item.active {
    background-color: rgba(37, 99, 235, 0.1) !important; /* Azul con 10% opacidad */
    color: #1e3a8a !important; /* Azul marino muy oscuro para contraste */
    border-right-color: #2563eb !important;
}

/* 3. Estado Hover y Activo (MODO OSCURO) */
/* Fondo azul más notorio (0.3 opacidad) y texto claro brillante */
.dark .nav-item:hover,
.dark .nav-item.active {
    background-color: rgba(37, 99, 235, 0.3) !important; /* Tu petición: 30% opacidad */
    color: #93c5fd !important; /* Azul celeste brillante para que se lea sobre oscuro */
    border-right-color: #60a5fa !important;
}

/* Eliminar conflictos de clases de Tailwind antiguas si persisten */
.dark .bg-slate-50 {
    background-color: transparent !important; /* Evita el cuadro blanco feo */
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estilos base para modo oscuro */
.dark body {
  background-color: #0f172a !important; /* Slate 900 */
  color: #f1f5f9 !important; /* Slate 100 */
}

.dark .text-slate-800,
.dark .text-slate-700,
.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark .text-slate-900 {
  color: #8ac5ff !important;
}

.dark .text-slate-600,
.dark .text-slate-500 {
    color: #cbd5e1 !important;
}

/* Inversión de fondos (Tarjetas) */
.dark .bg-white {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important;     /* Slate 700 */
    color: #f1f5f9 !important;
}

/* Inversión de fondos secundarios (Tablas, headers) */
.dark .bg-slate-50,
.dark .bg-blue-50,
.dark .bg-gray-50 {
    background-color: #334155 !important; /* Slate 700 */
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Ajustes específicos para inputs en modo oscuro */
.dark input,
.dark select {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: white !important;
}

/* Scrollbar oscuro */
.dark .custom-scroll::-webkit-scrollbar-track {
    background: #0f172a;
}
.dark .custom-scroll::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Sidebar en modo oscuro */
.dark #sidebar {
    background-color: #1e293b;
    border-right: 1px solid #334155;
}

/* Sobrescribir el azul oscuro (text-blue-800) por uno más claro y vibrante */
.text-blue-800 {
  color: #2563eb !important; /* Cambiamos a Blue-600 (Azul Rey) */
}

/* Ajuste automático para ese mismo texto en MODO OSCURO */
.dark .text-blue-800 {
  color: #60a5fa !important; /* Cambiamos a Blue-400 (Azul Celeste) para contraste */
}

/* --- CORRECCIÓN COLORES DE METAS (SEMÁFORO) --- */

/* 1. TIR - Tiempo en Rango (Verde) */
.dark .bg-emerald-50 {
    background-color: rgba(6, 78, 59, 0.4) !important; /* Verde profundo transparente */
    border-color: #059669 !important;
}
.dark .text-emerald-800 {
    color: #6ee7b7 !important; /* Verde menta brillante */
}

/* 2. TBR - Tiempo Bajo Rango (Rojo/Rose) */
.dark .bg-rose-50 {
    background-color: rgba(136, 19, 55, 0.4) !important; /* Rojo vino transparente */
    border-color: #be123c !important;
}
.dark .text-rose-800,
.dark .text-rose-700 {
    color: #fda4af !important; /* Rosa claro brillante */
}

/* 3. TAR - Tiempo Sobre Rango (Ámbar) */
.dark .bg-amber-50 {
    background-color: rgba(120, 53, 15, 0.4) !important; /* Marrón/Naranja transparente */
    border-color: #d97706 !important;
}
.dark .text-amber-800,
.dark .text-amber-900 {
    color: #fcd34d !important; /* Amarillo oro brillante */
}

/* --- CORRECCIÓN TABS Y ENLACES ACTIVOS --- */

/* Fuerza el color azul brillante en textos y bordes que usan 'blue-700' */
.dark .text-blue-700 {
    color: #60a5fa !important; /* Azul celeste (mismo del logo) */
}

.dark .border-blue-700 {
    border-color: #60a5fa !important; /* La línea inferior de la pestaña */
}

/* --- UX: TEXTO NO SELECCIONABLE --- */

/* Evita la selección de texto en el Logo y el Subtítulo */
#sidebar h1,
#sidebar h1 + p {
    -webkit-user-select: none; /* Safari / Chrome */
    user-select: none;         /* Estándar */
    cursor: default;           /* Mantiene el cursor de flecha */
}

/* --- EFECTO TEXT GLOW CELESTE --- */
.text-glow {
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4),
               0 0 20px rgba(56, 189, 248, 0.2); /* Cyan-400 equivalent */
}

/* En modo oscuro, el glow es más intenso */
.dark .text-glow {
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6),
               0 0 20px rgba(56, 189, 248, 0.3);
}