/* ============================================================= */
/* === ESTILOS PARA LA VALIDACIÓN Y ENVÍO DEL FORMULARIO === */
/* ============================================================= */

/* Estilo para los campos de entrada inválidos */
.is-invalid {
    border-color: #ef4444; /* Rojo de Tailwind (red-500) */
    box-shadow: 0 0 0 1px #ef4444;
}

/* Estilo para el mensaje de error de texto */
.error-message {
    color: #b91c1c; /* Rojo oscuro (red-800) */
    font-size: 0.875rem; /* text-sm */
    margin-top: 0.5rem; /* mt-2 */
}

/* Estilo para el mensaje de éxito */
.form-success {
    border: 2px solid #15803d; /* Tu color primario */
    background-color: #f0fdf4; /* green-50 */
    padding: 2rem;
    border-radius: 0.75rem; /* rounded-xl */
    text-align: center;
}
.form-success h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: #14532d; /* green-900 */
    margin-bottom: 0.5rem;
}
.form-success p {
    font-size: 1rem;
    color: #166534; /* green-800 */
}

/* Estilo y animación para el spinner de carga en el botón */
.spinner {
    animation: rotate 2s linear infinite;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
}

.spinner .path {
    stroke: #ffffff; /* Color del trazo del spinner */
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}