@charset "UTF-8";

/* 1. ELIMINAR EL FONDO OSCURO Y FORZAR TRANSPARENCIA */
/* Atacamos directamente los inputs que generan Materialize y Select2 */
.opt_hl_mb input.select-dropdown,
.opt_hl_mb .select2-selection--single,
.select2-container--default .select2-selection--single {
    background-color: color-mix(in srgb, var(--color-asfalto), transparent 85%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    /* Quitamos el borde blanco sólido y usamos un brillo sutil */
    /* box-shadow: 0 0.2rem 1.5rem 0.2rem color-mix(in srgb, var(--color-azul), transparent 85%); */

    /* RESET DE DIMENSIONES: Dejamos que el flujo original mande */
    color: var(--color-azul) !important;
    transition: all 0.1s ease-in-out !important;
    border-radius: 0.5rem !important;
}

/* 2. CORRECCIÓN DE DESCUADRE (Contenedores) */
/* Materialize y Select2 a veces añaden paddings que mueven el texto */
.select-wrapper.opt_hl_mb,
.select2-container.opt_hl_mb {
    display: inline-block !important; /* Evita que salte de línea si está en un grid */
    vertical-align: middle !important;
}

/* 3. ELIMINAR RESALTADOS FEOS EN EL INPUT DE BÚSQUEDA */
.opt_hl_mb input[type=text].input_hl_search:not(.browser-default) {
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* 4. EL DROPDOWN (La lista que se despliega) */
/* Debe ser un cristal muy ligero para no tapar la tabla */
.opt_hl_mb .dropdown-content,
.select2-dropdown {
    background-color: color-mix(in srgb, var(--color-asfalto), transparent 30%) !important;
    backdrop-filter: blur(20px) !important;
    border: none !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 0 10px 10px !important;
}

/* 5. HOVER EFECTO MAC (Brillo sutil al pasar el mouse) */
.opt_hl_mb input.select-dropdown:hover,
.select2-container--default .select2-selection--single:hover {
    background-color: color-mix(in srgb, var(--color-azul), transparent 90%) !important;
    border-bottom-color: var(--color-azul) !important;
}