/* Estilos para corregir los inputs en un entorno donde coexisten Bootstrap y Tailwind */

/* Estilos generales para inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

/* Estilos para el foco */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
    border-color: #fa930a !important;
}

/* Estilos para selects */
select {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #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;
    transition: all 0.3s ease !important;
}

/* Estilos para el foco en selects */
select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
    border-color: #fa930a !important;
}

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

/* Asegurar que los estilos de Bootstrap no sobrescriban nuestros estilos */
.form-control,
.form-select {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
}

.form-control:focus,
.form-select:focus {
    background-color: #222222 !important;
    color: #ffffff !important;
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Estilos específicos para inputs en modo oscuro */
.bg-dark .form-control,
.bg-dark .form-select,
[class*="bg-[#"] .form-control,
[class*="bg-[#"] .form-select {
    background-color: #222222 !important;
    color: #ffffff !important;
}