/* Estados visuales comunes para campos obligatorios. */
:root {
    --campo-obligatorio: #dc2626;
    --campo-obligatorio-fondo: rgba(220, 38, 38, 0.055);
    --campo-valido: #16803b;
    --campo-valido-fondo: rgba(22, 128, 59, 0.065);
}

.campo-obligatorio-pendiente {
    border-color: var(--campo-obligatorio) !important;
    background-color: var(--campo-obligatorio-fondo) !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12) !important;
}

.campo-obligatorio-valido {
    border-color: var(--campo-valido) !important;
    background-color: var(--campo-valido-fondo) !important;
    box-shadow: 0 0 0 1px rgba(22, 128, 59, 0.13) !important;
}

.form-group:has(.campo-obligatorio-pendiente) label.required,
.form-group:has(.campo-obligatorio-pendiente) .required {
    color: var(--campo-obligatorio) !important;
}

.form-group:has(.campo-obligatorio-valido) label.required,
.form-group:has(.campo-obligatorio-valido) .required {
    color: var(--campo-valido) !important;
}

.campo-obligatorio-pendiente:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
}

.campo-obligatorio-valido:focus {
    box-shadow: 0 0 0 3px rgba(22, 128, 59, 0.17) !important;
}

@media (prefers-reduced-motion: no-preference) {
    .campo-obligatorio-pendiente,
    .campo-obligatorio-valido {
        transition: border-color 0.18s ease, background-color 0.18s ease,
            box-shadow 0.18s ease;
    }
}