.spf-feedback {
    margin-top: 0.5rem;
}

.spf-feedback__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.375rem;
}

.spf-requirements {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.spf-requirements li {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-bottom: 0.125rem;
    color: #6b7280;
    transition: color 0.15s ease;
}

.spf-requirements li::before {
    content: '•';
    flex-shrink: 0;
    line-height: 1.5;
}

.spf-requirements li.spf-requirement--met {
    color: #16a34a;
}

.spf-requirements li.spf-requirement--unmet {
    color: #dc2626;
}

.spf-status {
    font-size: 0.75rem;
    margin: 0.375rem 0 0;
    line-height: 1.4;
}

.spf-status--invalid {
    color: #dc2626;
}

.spf-status--partial {
    color: #ea580c;
}

.spf-status--valid {
    color: #16a34a;
}

.spf-realtime-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.spf-realtime-input:focus,
.spf-realtime-input:focus-visible {
    outline: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.spf-realtime-input.spf-input--invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.spf-realtime-input.spf-input--invalid:focus,
.spf-realtime-input.spf-input--invalid:focus-visible {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28) !important;
}

.spf-realtime-input.spf-input--partial {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15) !important;
}

.spf-realtime-input.spf-input--partial:focus,
.spf-realtime-input.spf-input--partial:focus-visible {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.28) !important;
}

.spf-realtime-input.spf-input--valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15) !important;
}

.spf-realtime-input.spf-input--valid:focus,
.spf-realtime-input.spf-input--valid:focus-visible {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.28) !important;
}

.spf-realtime-input.spf-input--neutral:focus,
.spf-realtime-input.spf-input--neutral:focus-visible {
    border-color: inherit;
    box-shadow: none !important;
}

/* Compatibilidad con .input-focus de vistas auth */
.spf-realtime-input.spf-input--invalid.input-focus:focus,
.spf-realtime-input.spf-input--invalid.input-focus:focus-visible,
.spf-realtime-input.spf-input--partial.input-focus:focus,
.spf-realtime-input.spf-input--partial.input-focus:focus-visible,
.spf-realtime-input.spf-input--valid.input-focus:focus,
.spf-realtime-input.spf-input--valid.input-focus:focus-visible {
    background-color: white;
}