/* Hoja de estilos mejorada y refactorizada para soportar temas dinámicos */

/* --- DEFINICIÓN DE VARIABLES DE TEMA --- */

.theme-dark {
    --background-color: #1E1E1E;
    --card-background-color: #2D2D2D;
    --text-color: #E0E0E0;
    --primary-accent-color: #FF7F00; /* Naranja Corporativo */
    --chart-grid-color: #444444;
    --border-color: #555555;
}

.theme-light {
    --background-color: #FFFFFF;
    --card-background-color: #F8F9FA;
    --text-color: #212529;
    --primary-accent-color: #FF7F00; /* Naranja Corporativo */
    --chart-grid-color: #DEE2E6;
    --border-color: #CED4DA;
}


/* --- ESTILOS GENERALES --- */

.btn-primary {
    background-color: var(--primary-accent-color) !important;
    border-color: var(--primary-accent-color) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--primary-accent-color) !important;
    border-color: var(--primary-accent-color) !important;
}
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}
h1 {
    color: var(--text-color);
    font-weight: 200;
    letter-spacing: 1px;
}
.bg-light {
    background-color: var(--card-background-color) !important;
    border-color: var(--border-color) !important;
    transition: background-color 0.3s ease;
}
.card {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(255, 127, 0, 0.2);
    border-color: var(--primary-accent-color);
}
.card h4 {
    color: var(--primary-accent-color);
    font-size: 2.5rem;
    font-weight: 600;
}
.card p {
    font-size: 1rem;
    font-weight: 300;
}

/* --- ESTILOS PARA PESTAÑAS (dcc.Tabs) --- */

/* Contenedor principal de las pestañas */
.Tabs {
    border-bottom: 2px solid var(--primary-accent-color) !important; /* Borde inferior ahora es naranja */
}

/* Estilo para CADA pestaña (activa e inactiva) */
.Tab {
    color: var(--text-color) !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important; /* Evita doble borde */
    padding: 15px !important;
    transition: background-color 0.3s ease;
    border-radius: 5px 5px 0 0 !important;
    margin-right: 5px; /* Pequeña separación entre pestañas */
}

/* Efecto hover para pestañas que NO están seleccionadas */
.Tab:not(.tab--selected):hover {
     background-color: rgba(255, 127, 0, 0.1) !important; /* Un ligero tinte naranja al pasar el ratón */
}

/* Estilo ÚNICO para la pestaña SELECCIONADA */
.tab--selected {
    color: var(--primary-accent-color) !important;
    font-weight: bold;
    background-color: var(--card-background-color) !important;
    
    /* Borde superior y laterales naranjas para destacar */
    border-top: 3px solid var(--primary-accent-color) !important;
    border-left: 1px solid var(--primary-accent-color) !important;
    border-right: 1px solid var(--primary-accent-color) !important;
    
    /* Este truco hace que la pestaña parezca conectada al contenido de abajo */
    margin-bottom: -1px; 
    border-bottom: 1px solid var(--card-background-color) !important;
}

/* ============================================================================== */
/* =================== INICIO DE LA MODIFICACIÓN DE SELECTORES ================== */
/* ============================================================================== */

/* Contenedor principal del selector */
.Select-control {
    background-color: var(--card-background-color) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease;
}

/* Contenedor del selector CUANDO ESTÁ ACTIVO (reemplaza el borde azul) */
.is-focused:not(.is-open) > .Select-control, .Select--multi.is-focused .Select-control {
    border-color: var(--primary-accent-color) !important;
    box-shadow: 0 0 5px -1px var(--primary-accent-color) !important; /* Resplandor naranja */
}

/* Píldoras de elementos seleccionados en modo multi-selección */
.Select--multi .Select-value {
    background-color: var(--primary-accent-color) !important;
    border-color: var(--primary-accent-color) !important;
    color: #fff !important; /* Texto blanco para legibilidad */
}
.Select--multi .Select-value-label {
    color: #fff !important;
}

/* Menú desplegable con las opciones */
.Select-menu-outer {
    background-color: var(--card-background-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Opción individual al pasar el ratón por encima */
.Select-option:hover {
    background-color: rgba(255, 127, 0, 0.2) !important; /* Tinte naranja */
}

/* Opción que está actualmente seleccionada en el menú */
.Select-option.is-selected {
    background-color: transparent !important;
    color: var(--primary-accent-color) !important;
    font-weight: bold;
}

/* Placeholder (texto gris como "Seleccionar Cliente...") */
.Select-placeholder, .Select--single > .Select-control .Select-value-label {
    color: var(--text-color) !important;
    opacity: 0.6;
}
/* ============================================================================== */
/* ==================== FIN DE LA MODIFICACIÓN DE SELECTORES ==================== */
/* ============================================================================== */


/* --- RESPONSIVE DESIGN FOR MOBILE DEVICES --- */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
        text-align: center;
    }
    .card h4 {
        font-size: 1.75rem;
    }
    .card p {
        font-size: 0.8rem;
    }
    .card {
        margin-bottom: 1rem !important;
    }
    #canal-metric-selector .form-check {
        justify-content: center;
    }
}