/*
 * common/form-newsletter/styles.css — Estilos del componente form-newsletter.
 *
 * Solo se carga en las URLs donde el formulario se pinta (lo encola component.php).
 *
 * Tokens: solo los canonicos de style.css (issue #60), sin literales de respaldo.
 * Los `--pf-form-newsletter-*` son de componente y remapean la paleta a los papeles
 * del formulario. Como apuntan a los canonicos, el modo oscuro se hereda sin
 * declarar aqui ni un color. Mismos papeles y mismos criterios que form-contacto.
 *
 * Direccion «Expediente» (issue #117): el boton de alta NO es naranja. El naranja
 * tiene un solo papel, el boton primario de conversion, y nunca hay dos primarios
 * en una vista; este es navy (`--pf-color-brand` + `--pf-color-text-invert`,
 * 12.71:1 en claro sobre bg-alt y 8.38:1 en oscuro). Esta hoja no consume el
 * acento en ningun sitio. No hay foco propio: se hereda el global de style.css.
 *
 * @package pfuture
 * @module  leads
 */

.pf-form-newsletter {
    --pf-form-newsletter-gap: var(--pf-space-xs);
    --pf-form-newsletter-radius: var(--pf-radius-control);
    /* Borde de CONTROL: `--pf-color-border` da 1.39:1 y WCAG 1.4.11 pide 3:1. */
    --pf-form-newsletter-border: var(--pf-color-border-control);
    --pf-form-newsletter-error: var(--pf-color-error);
    --pf-form-newsletter-link: var(--pf-color-link);
    /* Boton navy. `--pf-color-on-brand` no existe: el par medido para navy es
     * brand + text-invert, el mismo que usan hero y cta-box. */
    --pf-form-newsletter-submit-bg: var(--pf-color-brand);
    --pf-form-newsletter-submit-hover: var(--pf-color-brand-strong);
    --pf-form-newsletter-submit-text: var(--pf-color-text-invert);

    display: block;
    padding: var(--pf-space-md);
    /* Radio de tarjeta y no `lg`: vale lo mismo hoy (6px), pero la caja es un
     * panel y el token que le corresponde es el de tarjeta, como card-post. */
    border-radius: var(--pf-radius-card);
    background: var(--pf-color-bg-alt);
    color: var(--pf-color-text);
}

.pf-form-newsletter__notice {
    margin: 0 0 var(--pf-form-newsletter-gap);
    padding: var(--pf-space-xs);
    border-left: 3px solid currentColor;
    background: var(--pf-color-surface);
}

.pf-form-newsletter__notice--ok {
    color: var(--pf-color-success);
}

.pf-form-newsletter__notice--error {
    color: var(--pf-form-newsletter-error);
}

.pf-form-newsletter__title {
    margin: 0 0 var(--pf-space-2xs);
}

.pf-form-newsletter__intro {
    margin: 0 0 var(--pf-form-newsletter-gap);
    color: var(--pf-color-text-muted);
}

.pf-form-newsletter__form {
    display: grid;
    gap: var(--pf-form-newsletter-gap);
}

.pf-form-newsletter__field {
    display: grid;
    gap: var(--pf-space-3xs);
}

.pf-form-newsletter__label {
    font-weight: var(--pf-weight-bold);
}

.pf-form-newsletter__required {
    color: var(--pf-form-newsletter-error);
}

/* Campo y boton en linea en pantallas anchas, apilados en movil. */
.pf-form-newsletter__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-2xs);
}

.pf-form-newsletter__input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: var(--pf-space-2xs) var(--pf-space-xs);
    border: 1px solid var(--pf-form-newsletter-border);
    border-radius: var(--pf-form-newsletter-radius);
    background: var(--pf-color-surface);
    color: inherit;
    font: inherit;
}

.pf-form-newsletter__input[aria-invalid="true"] {
    border-color: var(--pf-form-newsletter-error);
}

/* Foco: sin regla propia. Lo pone la regla global de foco de style.css (seccion 6,
   `:where(...)`, anillo unico `--pf-color-focus` con offset 2px). */

/* Boton de alta, navy: sin borde y sin sombra. */
.pf-form-newsletter__submit {
    flex: 0 0 auto;
    padding: var(--pf-space-2xs) var(--pf-space-md);
    border: 0;
    border-radius: var(--pf-form-newsletter-radius);
    background: var(--pf-form-newsletter-submit-bg);
    color: var(--pf-form-newsletter-submit-text);
    box-shadow: none;
    font: inherit;
    font-weight: var(--pf-weight-bold);
    cursor: pointer;
}

.pf-form-newsletter__submit:hover {
    background: var(--pf-form-newsletter-submit-hover);
}

.pf-form-newsletter__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.pf-form-newsletter__error {
    margin: 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-form-newsletter-error);
}

.pf-form-newsletter__error:empty {
    display: none;
}

.pf-form-newsletter__field--consent {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--pf-space-2xs);
}

.pf-form-newsletter__field--consent .pf-form-newsletter__error {
    grid-column: 1 / -1;
}

.pf-form-newsletter__label--consent {
    font-size: var(--pf-text-sm);
    font-weight: var(--pf-weight-regular);
    color: var(--pf-color-text-muted);
}

.pf-form-newsletter__link {
    color: var(--pf-form-newsletter-link);
}

/* Honeypot fuera de la vista sin display:none. */
.pf-form-newsletter__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pf-form-newsletter__status {
    margin: 0;
}

.pf-form-newsletter__status--ok {
    color: var(--pf-color-success);
}

.pf-form-newsletter__status--error {
    color: var(--pf-form-newsletter-error);
}

/* Alta enviada: queda solo el mensaje de "revisa tu correo". */
.pf-form-newsletter--sent .pf-form-newsletter__form > *:not(.pf-form-newsletter__status) {
    display: none;
}