/* unified-forms.css - Estilos unificados para formularios en todo el proyecto */

/* Eliminar estilos predeterminados de navegador */
input, textarea, select {
    outline: none !important;
}

/* Estilos unificados para todos los elementos del formulario */
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,
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;
    transition: all 0.2s ease-in-out !important;
}

/* Efecto de elevación al pasar el ratón */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    border-color: #505050 !important;
}

/* Efecto de focus con borde naranja - más específico */
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,
select:focus,
input:focus,
textarea:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
    outline: none !important;
    transform: translateY(0) !important;
}

/* Estilos para activación inmediata del foco al hacer clic */
input:active, 
textarea:active, 
select:active {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Estilos específicos para select */
select {
    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;
}

/* Estilos para botones */
button,
.btn,
[type="button"],
[type="submit"],
a.bg-gray-600,
button.bg-gradient-to-r {
    transition: all 0.2s ease-in-out !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
}

/* Efecto hover para botones primarios (naranja) */
.bg-gradient-to-r:hover,
[class*="bg-[#fa"]:hover:not([disabled]) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(250, 147, 10, 0.3) !important;
}

/* Efecto hover para botones secundarios (gris) */
.bg-gray-600:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Efecto active para todos los botones */
button:active,
.btn:active,
[type="button"]:active,
[type="submit"]:active,
a.bg-gray-600:active,
button.bg-gradient-to-r:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Asegurar que los elementos con Tailwind mantengan el estilo correcto */
[class*="bg-[#"]:focus,
.focus\:border-\[\#fa930a\]:focus,
.focus\:ring-\[\#fa930a\]:focus,
.focus\:outline-none:focus {
    border-color: #fa930a !important;
    box-shadow: 0 0 0 2px rgba(250, 147, 10, 0.5) !important;
}

/* Ajustes para formularios en fondos oscuros */
.bg-\[#1a1a1a\] input,
.bg-\[#1a1a1a\] textarea,
.bg-\[#1a1a1a\] select,
.bg-\[#2a2a2a\] input,
.bg-\[#2a2a2a\] textarea,
.bg-\[#2a2a2a\] select {
    background-color: #333333 !important;
}