/* Cambia la fuente en todo el proyecto */
* {
    font-family: 'Segoe UI', sans-serif;
}

/* Ajusta en el tamaño de los textos */
body {
    font-size: 10px;
}

h1 {
    font-size: 40px;
}

/* Encabezados de tablas*/
h3 {
    font-size: 12px;
}

/* Encabezados de kpi_cards*/
h6 {
    font-size: 8px;
}

/* Dash DataTable */
.dash-table-container .dash-spreadsheet-container {
    font-size: 10px;
}

/* Espaciado vertical entre dropdowns */
.dash-dropdown {
    margin-bottom: 10px;
}



/* Cambia solo el color de texto del sidebar, no de los dropdoens o botones */
.custom-sidebar {
    color: #ffffff;
}

/* Estilo general del contenedor del dropdown */
.custom-sidebar .Select * {
    /* Color del fondo */
    background-color: #5A1F23;
    /* Color de la fuente */
    color: #ffffff;
    /* Color del borde */
    border-color: #8B3A3F;
    /* Radio del redondeo del recuadro */
    border-radius: 6px;
}

/* Texto de la opción seleccionada */
.custom-sidebar .Select-value {
    color: #12e21c;
}

/* Placeholder del dropdown */
.custom-sidebar .Select-placeholder {
    color: #1d0909;
}

/* Fondo del menú desplegable y texto de opciones */
.custom-sidebar .Select-menu-outer {
    background-color: #1f3361;
    color: #2c8353;
}

/* Estilo de cada opción */
.custom-sidebar .Select-option {
    background-color: #1f612c;
    color: #1fad80;
}

/* Cuando el cursor está sobre una opción */
.custom-sidebar .Select-option:hover {
    background-color: #7976cd;
    /* Color de fondo al hacer hover */
    color: #665dce;
    /* Color de texto al hacer hover */
}

/* Hover sobre una opción */
.custom-sidebar .Select-option.is-focused {
    background-color: #ca85d0;
    color: #cb32b5;
}

/* Opción ya seleccionada dentro del menú desplegable */
.custom-sidebar .Select-option.is-selected {
    background-color: #25a425;
    /* Fondo diferente para lo ya seleccionado */
    color: #FFD700;
    /* Texto distinto, por ejemplo dorado */
    font-weight: bold;
    /* Negrita opcional */
}


/* Estilo base de botones globales: menú principal y cerrar sesión */
.login__button--enter {
    display: block;
    /* Ocupa el ancho disponible */
    text-align: center;
    /* Centra el texto */
    padding: 6px 12px;
    /* Espaciado interno */
    font-size: 20px;
    /* Tamaño de fuente */
    color: #ffffff;
    /* Texto blanco */
    background-color: #7A2E32;
    /* Fondo vino oscuro satinado */
    border: 1px solid #7A2E32;
    /* Borde guinda profundo */
    border-radius: 4px;
    /* Bordes suaves */
    text-decoration: none;
    /* Sin subrayado */
    transition: background-color 0.75s ease;
    width: 25%;
    cursor: pointer;
    /* Indicador visual de que es clickeable */
}

/* Hover de botones globales: menú principal y cerrar sesión */
.login__button--enter:hover {
    background-color: #D16464;
    /* Guinda claro al pasar el mouse */
    border-color: #D16464;
    color: #ffffff;
    text-decoration: none;
}





/* Contenedor del dropdown */
.custom-dropdown .Select__control {
    background-color: #5A1F23;
    color: #FFFFFF;
    border-color: #8B3A3F;
    border-radius: 6px;
}

/* Texto del valor seleccionado */
.custom-dropdown .Select__single-value {
    color: #12e21c;
}

/* Placeholder */
.custom-dropdown .Select__placeholder {
    color: #DDCFCF;
}

/* Menú desplegable */
.custom-dropdown .Select__menu {
    background-color: #1f3361;
    color: #2c8353;
}

/* Opción del menú */
.custom-dropdown .Select__option {
    background-color: #1f612c;
    color: #1fad80;
}

/* Hover */
.custom-dropdown .Select__option:hover {
    background-color: #7976cd;
    color: #665dce;
}

/* Opción enfocada (hover + teclado) */
.custom-dropdown .Select__option--is-focused {
    background-color: #ca85d0;
    color: #cb32b5;
}

/* Opción seleccionada */
.custom-dropdown .Select__option--is-selected {
    background-color: #25a425;
    color: #FFD700;
    font-weight: bold;
}