/* Estilos con alta especificidad para sobrescribir cualquier otro estilo en los selects */
select,
select.form-control,
select.form-select,
select.w-full,
select.bg-\[\#222222\],
select.bg-\[\#333333\],
#model,
[id^="select-"],
[class*="select"] {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

/* Estado de foco con alta especificidad */
select:focus,
select.form-control:focus,
select.form-select:focus,
select.w-full:focus,
select.bg-\[\#222222\]:focus,
select.bg-\[\#333333\]:focus,
#model:focus,
[id^="select-"]:focus,
[class*="select"]:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
    outline: none !important;
}

/* Sobrescribir específicamente las clases de Tailwind */
select.focus\:ring-1:focus,
select.focus\:ring-2:focus,
select.focus\:ring-\[\#fa930a\]:focus,
select.focus\:border-gray-700:focus,
select.focus\:border-transparent:focus {
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Estilos para las opciones de los selects */
select option {
    background-color: #333333 !important;
    color: #ffffff !important;
    padding: 8px !important;
}

/* Estilos específicos para el select de model */
#model {
    border: 1px solid #404040 !important;
    border-color: #404040 !important;
}

#model:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Estilos específicos para Firefox */
@-moz-document url-prefix() {
    select,
    select.form-control,
    select.form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        padding-right: 40px !important;
    }
}