/* ====== Estilo general del contenedor ====== */
.form-group .bootstrap-select,
.form-horizontal .bootstrap-select,
.form-inline .bootstrap-select {
    width: 100% !important;
    margin-bottom: 0.5rem;
    padding: 0 !important;
}


.bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-secondary {
    background: transparent !important;
    color: var(--text-dark);
    border-color: var(--secondary-eco);
    -webkit-box-shadow: none;
    box-shadow: none;
}
/* Ocultar caret original */
.bootstrap-select .dropdown-toggle::after {
    display: none !important;
}

/* Crear flecha nueva y moderna */
.bootstrap-select .dropdown-toggle::before {
    content: "⌄"; /* Puedes usar ▼ ▾ ⮟ según el estilo que prefieras */
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #4f46e5; /* color de la flecha */
    pointer-events: none;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Rotar flecha cuando está abierto */
.bootstrap-select.show .dropdown-toggle::before {
    transform: translateY(-50%) rotate(180deg);
    color: var(--text-dark);
}


/* ====== Botón principal del select ====== */
.bootstrap-select > .dropdown-toggle {
    background: linear-gradient(135deg, #f7f8fa, #e9ebf0) !important;
    border: 0px solid var(--secondary-eco) !important;
    border-radius: 10px !important;
    box-shadow: 0 0px 0px var(--selectbor) !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    height: 52px !important;
    padding: 13px !important;
    transition: all 0.25s ease-in-out !important;
}

    /* Hover y foco */
    .bootstrap-select > .dropdown-toggle:hover,
    .bootstrap-select > .dropdown-toggle:focus {
        background-color: var(--input);
        box-shadow: 0 0 0 0px var(--secundary_border) !important; /*MOD LUIS*/
    }

/* ====== Texto dentro del select ====== */
.bootstrap-select .filter-option-inner-inner {
    color: var(--text-dark) !important;
    font-weight: 600 !important;
}

/* ====== Menú desplegable ====== */
.bootstrap-select .dropdown-menu {
    background-color: #f9fafb !important;
    border: 2px solid var(--secondary-eco) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px var(--selectbor) !important;
    overflow: hidden !important;
    padding: 4px !important;
    max-height: 250px !important;
}

    /* ====== Ítems del dropdown ====== */
    .bootstrap-select .dropdown-menu .inner .dropdown-item {
        font-size: 15px !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        margin: 2px !important;
        transition: all 0.2s ease-in-out !important;
    }

        /* Filas alternadas */
        .bootstrap-select .dropdown-menu .inner .dropdown-item:nth-child(odd) {
            background-color: var(--input) !important;
            color: var(--text-dark) !important;
        }

        .bootstrap-select .dropdown-menu .inner .dropdown-item:nth-child(even) {
            background-color: #f3f4f6 !important;
            color: var(--text-dark) !important;
        }

        /* Hover */
        .bootstrap-select .dropdown-menu .inner .dropdown-item:hover,
        .bootstrap-select .dropdown-menu .inner .dropdown-item:focus {
            background: linear-gradient(135deg, #7C7C7C, #7C7C7C) !important;
            color: #ffffff !important;
            transform: scale(1.02);
        }

/* ====== Estado abierto ====== */
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--secondary-eco) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ====== Estilo de búsqueda dentro del dropdown ====== */
.bootstrap-select .bs-searchbox input {
    background-color: #ffffff !important;
    border: 2px solid var(--secondary-eco) !important;
    border-radius: 10px !important;
    color: #111827 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    transition: border 0.3s ease;
}

    .bootstrap-select .bs-searchbox input:focus {
        border-color: var(--secondary-eco) !important;
        box-shadow: 0 0 0 3px var(--selectbor) !important;
    }

/* ====== Scrollbar personalizada ====== */
.bootstrap-select .dropdown-menu .inner::-webkit-scrollbar {
    width: 8px;
}

.bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb {
    background-color: #c7c9d1;
    border-radius: 6px;
}

    .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb:hover {
        background-color: var(--input);
    }

.bootstrap-select .dropdown-menu {
    max-height: none !important; /* Permite que crezca todo lo necesario */
}

    .bootstrap-select .dropdown-menu.inner {
        max-height: 100% !important; /* Límite de scroll (ajústalo a gusto) */
    }

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 99% !important;
}

    .bootstrap-select .dropdown-menu.show {
        min-width: 100% !important;
        width: 100% !important;
    }

.dropdown-menu.inner > li.active:not(.selected) > a .text {
    color: #774343 !important;
}