/**
 * ===================================================================
 *  ESTILOS GLOBALES PARA TOM-SELECT (CON RENDERIZADO PERSONALIZADO)
 * ===================================================================
 */

/*
 * SECCIÓN 1: APARIENCIA DEL CONTROL (TIPO SELECT2)
 * -------------------------------------------------------------------
 */

.ts-control {
    position: relative;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: #fff; /* Asegura un fondo blanco */
}

.ts-control.focus, 
.ts-control:focus, 
.ts-control.dropdown-active {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ts-control::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333 transparent transparent transparent;
    opacity: 0.8;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.ts-control.dropdown-active::after {
    transform: rotate(180deg);
}

.ts-control .ts-placeholder {
    color: #6c757d;
}

/*
 * SECCIÓN 2: ESTILOS PARA NUESTRO DROPDOWN PERSONALIZADO
 * -------------------------------------------------------------------
 */

.custom-ts-dropdown {
    position: absolute; /* Es posicionado por JavaScript */
    display: none;      /* Se muestra y oculta con JavaScript */
    background: white;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999; /* Un z-index alto para estar por encima de todo */
}

.custom-ts-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem; /* Ajusta según necesites */
    line-height: 1.5;
}

.custom-ts-option:hover {
    background-color: #0d6efd;
    color: white;
}

.no-results-custom {
    padding: 8px 12px;
    color: #6c757d;
}