/*
 * common/form-contacto/styles.css — Estilos del componente form-contacto.
 *
 * 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.
 * El respaldo era justo lo que enmascaraba el fallo: un segundo argumento en la
 * funcion var() se aplica SIEMPRE que el token no exista, asi que el componente
 * habria pintado un color inventado sin que nadie se enterara.
 *
 * Los tokens `--pf-form-contacto-*` son de componente: remapean la paleta a los
 * papeles del formulario (borde, error, enlace, boton de envio) para que cada
 * papel se cambie en un solo sitio. Como apuntan a los canonicos, el modo
 * oscuro se hereda sin declarar aqui ni un color.
 *
 * Direccion «Expediente» (issue #117, docs/DISENO-EXPEDIENTE.md): el naranja
 * tiene UN solo papel en el sitio, el boton primario de conversion, y este
 * submit lo es. Es el unico elemento de las dos hojas de leads que resuelve al
 * acento. No hay foco propio: se hereda la regla global de style.css.
 *
 * @package pfuture
 * @module  leads
 */

.pf-form-contacto {
    --pf-form-contacto-gap: var(--pf-space-sm);
    --pf-form-contacto-radius: var(--pf-radius-control);
    /* Borde de CONTROL, no el borde decorativo: `--pf-color-border` da 1.39:1 y
     * el criterio 1.4.11 de WCAG pide 3:1 para lo que delimita un campo. */
    --pf-form-contacto-border: var(--pf-color-border-control);
    --pf-form-contacto-error: var(--pf-color-error);
    --pf-form-contacto-error-soft: var(--pf-color-error-soft);
    /* El enlace de la casilla de consentimiento no es naranja: el naranja no es
     * color de texto sobre fondo claro. Se usa el color de enlace del tema. */
    --pf-form-contacto-link: var(--pf-color-link);
    /* El boton SI es naranja: ahi el naranja es superficie (3.33:1 sobre bg),
     * no texto, y lo que se pinta encima es el navy de `--pf-color-on-accent`
     * (5.16:1). El hover baja al acento oscuro (3.65:1 sobre bg, 4.70:1 con el
     * rotulo), asi que el texto no cambia de color al pasar. */
    --pf-form-contacto-submit-bg: var(--pf-color-accent);
    --pf-form-contacto-submit-hover: var(--pf-color-accent-hover);
    --pf-form-contacto-submit-text: var(--pf-color-on-accent);

    display: block;
    max-width: 42rem;
    color: var(--pf-color-text);
}

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

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

.pf-form-contacto__form {
    display: grid;
    gap: var(--pf-form-contacto-gap);
}

/* Resumen de errores. Se muestra con el atributo hidden, no con display en JS. */
.pf-form-contacto__summary {
    padding: var(--pf-space-xs);
    border-left: 3px solid var(--pf-form-contacto-error);
    background: var(--pf-form-contacto-error-soft);
    color: var(--pf-form-contacto-error);
}

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

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

.pf-form-contacto__required {
    color: var(--pf-form-contacto-error);
}

.pf-form-contacto__input,
.pf-form-contacto__textarea {
    width: 100%;
    padding: var(--pf-space-2xs) var(--pf-space-xs);
    border: 1px solid var(--pf-form-contacto-border);
    border-radius: var(--pf-form-contacto-radius);
    background: var(--pf-color-surface);
    color: inherit;
    font: inherit;
}

.pf-form-contacto__textarea {
    resize: vertical;
    min-height: 8rem;
}

/* 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). Al ser `:where()`
   no compite con estas clases, asi que el radio del campo se conserva con el foco
   puesto. */

/* Estado invalido: se marca por aria-invalid, no por una clase paralela.
   Asi el estilo y la semantica no pueden desincronizarse. */
.pf-form-contacto__input[aria-invalid="true"],
.pf-form-contacto__textarea[aria-invalid="true"] {
    border-color: var(--pf-form-contacto-error);
}

.pf-form-contacto__hint {
    margin: 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

/* El mensaje de error ocupa sitio solo cuando tiene texto. */
.pf-form-contacto__error {
    margin: 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-form-contacto-error);
}

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

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

.pf-form-contacto__field--consent .pf-form-contacto__error {
    grid-column: 1 / -1;
}

.pf-form-contacto__label--consent {
    font-weight: var(--pf-weight-regular);
}

.pf-form-contacto__link {
    color: var(--pf-form-contacto-link);
}

/* Honeypot: fuera de la vista sin usar display:none, que algunos bots detectan. */
.pf-form-contacto__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-contacto__actions {
    display: flex;
    gap: var(--pf-space-xs);
    align-items: center;
}

/* Boton primario de conversion: relleno naranja, sin borde y sin sombra. */
.pf-form-contacto__submit {
    padding: var(--pf-space-xs) var(--pf-space-md);
    border: 0;
    border-radius: var(--pf-form-contacto-radius);
    background: var(--pf-form-contacto-submit-bg);
    color: var(--pf-form-contacto-submit-text);
    box-shadow: none;
    font: inherit;
    font-weight: var(--pf-weight-bold);
    cursor: pointer;
}

.pf-form-contacto__submit:hover {
    background: var(--pf-form-contacto-submit-hover);
}

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

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

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

.pf-form-contacto__status--error {
    color: var(--pf-form-contacto-error);
}

/* Envio resuelto con exito: el formulario se retira y queda el mensaje. */
.pf-form-contacto--sent .pf-form-contacto__form > *:not(.pf-form-contacto__status) {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pf-form-contacto__submit {
        transition: opacity var(--pf-transition), background-color var(--pf-transition);
    }
}