/* Contenedor principal del combo */
.dd-container {
    position: relative;
    width: 100% !important;
    margin-bottom: 20px; /* Le da espacio inferior respecto al siguiente elemento */
}

/* El cuadro del selector (lo que se ve a simple vista) */
.dd-select {
    border-radius: 10px !important; /* Bordes más suaves y modernos */
    border: solid 1px #e2e8f0 !important; /* Gris claro sutil estilo Bootstrap 5 */
    position: relative;
    cursor: pointer;
    width: 100% !important;
    background-color: #ffffff !important; /* Fondo blanco limpio para quitar el gris viejo */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Sombra muy ligera */
    transition: all 0.2s ease-in-out;
}

    /* Efecto al pasar el mouse por encima del combo cerrado */
    .dd-select:hover {
        border-color: #cbd5e1 !important;
        background-color: #f8fafc !important; /* Un sutil cambio táctil */
    }

/* Contenedor del elemento seleccionado */
.dd-selected {
    overflow: hidden;
    display: flex !important; /* Activamos flexbox para alinear perfectamente imagen y texto */
    align-items: center;
    padding: 12px 15px !important; /* Más "aire" por dentro */
}

/* El texto principal seleccionado */
.dd-selected-text {
    font-weight: 700 !important;
    color: #1e293b !important; /* Color carbón oscuro moderno en vez de negro puro */
    font-size: 15px;
    line-height: 1.2 !important;
}

/* La descripción secundaria (si existiera) */
.dd-desc {
    color: #64748b;
    display: block;
    overflow: hidden;
    font-weight: normal;
    line-height: 1.4em;
    font-size: 12px;
}

/* --- Imágen del combo --- */
.dd-option-image, .dd-selected-image {
    vertical-align: middle;
    float: none !important;
    margin-right: 12px !important; /* Más separación del texto */
    max-width: 45px !important; /* Tamaño controlado para que no rompa el diseño */
    max-height: 32px !important;
    object-fit: contain; /* Evita que los logos de las empresas se deformen */
}

/* --- La Flecha (Pointer) --- */
/* Cambiamos las flechas de bordes CSS por unas más estilizadas */
.dd-pointer {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -4px !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #64748b !important;
    border-bottom: 2px solid #64748b !important;
    transform: rotate(45deg); /* Crea una flecha hacia abajo limpia v/s los triángulos viejos */
    transition: transform 0.2s ease;
}

/* Cuando el menú se despliega, la flecha gira elegantemente hacia arriba */
.dd-pointer-up {
    transform: rotate(-135deg) !important;
    margin-top: -1px !important;
}

/* Ocultamos los estilos viejos del triángulo de ddSlick */
.dd-pointer-down {
    border: none !important;
}

/* --- Lista Desplegable (Opciones) --- */
.dd-options {
    border: solid 1px #e2e8f0 !important;
    border-radius: 10px; /* Bordes redondeados en la lista flotante */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* Sombra drop-shadow elegante */
    display: none;
    position: absolute;
    z-index: 2000;
    margin: 5px 0 0 0 !important; /* Separación mínima del selector */
    padding: 6px 0 !important;
    background: #fff;
    overflow: auto;
    width: 100% !important;
}

/* Cada opción individual de la lista */
.dd-option {
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center;
    border-bottom: none !important; /* Quitamos las líneas divisorias para un estilo más limpio */
    text-decoration: none;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}

.dd-option-text {
    line-height: 1.2 !important;
    font-size: 14px;
}

/* Efecto Hover en las opciones de la lista */
.dd-option:hover {
    background: #f1f5f9 !important; /* Gris azulado muy elegante */
    color: #0f172a !important;
}

/* Opción que está seleccionada actualmente dentro de la lista */
.dd-option-selected {
    background: #f8fafc !important;
    font-weight: bold;
}

.dd-selected-description-truncated {
    text-overflow: ellipsis;
    white-space: nowrap;
}