/**
 * contact.css
 * Estilos específicos para la vista de Contáctenos.
 * Corrige problemas de z-index y visualización de TomSelect.
 */

/* Asegurar que el dropdown de TomSelect tenga z-index alto para no ser obstruido */
#contactForm .ts-wrapper {
    position: relative;
    z-index: 100;
}

#contactForm .ts-wrapper.dropdown-active {
    z-index: 1001;
}

#contactForm .ts-dropdown {
    z-index: 1002 !important;
}

/* Estilos de validación para el wrapper de TomSelect */
#contactForm .ts-wrapper.is-invalid .ts-control {
    border-color: var(--bs-form-invalid-color, #dc3545);
}

#contactForm .ts-wrapper.is-valid .ts-control {
    border-color: var(--bs-form-valid-color, #198754);
}

/* Mostrar mensaje de error cuando TomSelect es inválido */
#contactForm .ts-wrapper.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Ajustar altura del control de TomSelect para coincidir con otros inputs */
#contactForm .ts-wrapper .ts-control {
    min-height: 58px;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
}

/* Estilo de focus para TomSelect */
#contactForm .ts-wrapper.focus .ts-control {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Asegurar que las opciones del dropdown sean clickeables */
#contactForm .ts-dropdown .option {
    cursor: pointer;
    padding: 10px 15px;
    color: #333; /* Color base del texto */
}

#contactForm .ts-dropdown .option:hover {
    background-color: #033C73;
    color: #fff;
}

#contactForm .ts-dropdown .option.active {
    background-color: #033C73;
    color: #fff;
}

/* Corregir color del texto en el control después de seleccionar */
#contactForm .ts-wrapper .ts-control .item {
    color: #333 !important; /* Asegurar que el texto seleccionado sea oscuro */
}

/* Estilos para el campo de búsqueda dentro del dropdown */
#contactForm .ts-dropdown .dropdown-input {
    padding: 10px 15px;
    border: none;
    border-bottom: 2px solid #033C73;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

#contactForm .ts-dropdown .dropdown-input:focus {
    outline: none;
    border-bottom-color: #00b4d8;
}

/* Quitar iconos de validación embebidos que pueden interferir */
#contactForm .ts-wrapper.is-valid:not(.single),
#contactForm .ts-wrapper.is-invalid:not(.single) {
    background-image: none !important;
}