/**
 * Form Validation Styles
 *
 * Estilos para feedback visual de validación de formularios
 *
 * @version 1.0.0
 */

/* ==========================================================================
   Estados de campos
   ========================================================================== */

/* Campo con error */
.field-error {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.field-error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
    outline: none;
}

/* Campo válido/exitoso */
.field-success {
    border-color: #16a34a !important;
    background-color: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1) !important;
}

.field-success:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2) !important;
    outline: none;
}

/* ==========================================================================
   Mensajes de error
   ========================================================================== */

.error-message {
    display: none;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    animation: slideDown 0.2s ease-out;
}

.error-message::before {
    content: "⚠ ";
    font-weight: bold;
}

/* ==========================================================================
   Mensajes de éxito del formulario
   ========================================================================== */

.form-success-message {
    display: none;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    border-radius: 0.5rem;
    color: #15803d;
    padding: 1rem;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease-out;
}

.form-success-message::before {
    content: "✓ ";
    font-weight: bold;
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

/* ==========================================================================
   Mensajes de error del formulario
   ========================================================================== */

.form-error-message {
    display: none;
    background-color: #fee2e2;
    border: 1px solid #dc2626;
    border-radius: 0.5rem;
    color: #991b1b;
    padding: 1rem;
    margin-bottom: 1.5rem;
    animation: slideDown 0.3s ease-out;
}

.form-error-message::before {
    content: "✕ ";
    font-weight: bold;
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

/* ==========================================================================
   Honeypot (campo anti-spam invisible)
   ========================================================================== */

.honeypot-field,
input[name="website"],
input[name="url"] {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    tab-index: -1 !important;
}

/* ==========================================================================
   Spinner de carga
   ========================================================================== */

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.6s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ==========================================================================
   Indicadores de campo requerido
   ========================================================================== */

.required {
    color: #dc2626;
    font-weight: bold;
    margin-left: 0.125rem;
}

label .required::before {
    content: "*";
}

/* ==========================================================================
   Mejoras de accesibilidad
   ========================================================================== */

/* Mejor contraste para campos deshabilitados */
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6 !important;
}

/* Focus visible para navegación por teclado */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ==========================================================================
   Animaciones
   ========================================================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Animación de shake para campos con error */
.field-error.shake {
    animation: shake 0.5s;
}

/* ==========================================================================
   Estados hover para mejor UX
   ========================================================================== */

input:not(:disabled):hover,
textarea:not(:disabled):hover,
select:not(:disabled):hover {
    border-color: #6b7280;
}

.field-error:hover {
    border-color: #dc2626 !important;
}

.field-success:hover {
    border-color: #16a34a !important;
}

/* ==========================================================================
   Checkbox y Radio button con validación
   ========================================================================== */

input[type="checkbox"].field-error,
input[type="radio"].field-error {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

input[type="checkbox"].field-success,
input[type="radio"].field-success {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .error-message,
    .form-success-message,
    .form-error-message {
        font-size: 0.8125rem;
        padding: 0.75rem;
    }
}

/* ==========================================================================
   Dark mode (opcional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .field-error {
        background-color: rgba(220, 38, 38, 0.1) !important;
        border-color: #ef4444 !important;
    }

    .field-success {
        background-color: rgba(22, 163, 74, 0.1) !important;
        border-color: #22c55e !important;
    }

    .error-message {
        color: #f87171;
    }

    .form-success-message {
        background-color: rgba(22, 163, 74, 0.2);
        border-color: #22c55e;
        color: #86efac;
    }

    .form-error-message {
        background-color: rgba(220, 38, 38, 0.2);
        border-color: #ef4444;
        color: #fca5a5;
    }
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    .error-message,
    .form-success-message,
    .form-error-message,
    .spinner {
        display: none !important;
    }
}