/*
 * Formularios del área de socios y de autenticación — Fase 10, paso
 * 10.21.
 *
 * `.atma-member-information` **no tenía CSS**. Ninguno. El síntoma
 * reportado era que sus campos se veían más pequeños que sus etiquetas,
 * y la causa no era un tamaño mal puesto: los `<input>` y `<textarea>`
 * salían con el tamaño por defecto del navegador, que no hereda el del
 * documento, mientras las etiquetas sí heredaban el del tema.
 *
 * El plan decía que los formularios de autenticación eran la
 * referencia, «estilados y auditados en la Fase 7». No lo estaban:
 * tampoco tenían hoja propia. Así que esto no copia un estilo
 * existente, lo establece — y lo hace para **todas** las pantallas del
 * área de socios a la vez, no sólo para la que se reportó, porque el
 * problema era el mismo en todas.
 *
 * Colores por `--wp--preset--*` con reserva literal, para que la hoja
 * siga funcionando si algún día se carga fuera del tema.
 */

.atma-login-form,
.atma-signup-form,
.atma-password-reset-request-form,
.atma-password-reset-confirm-form,
.atma-member-information,
.atma-student-space__payment-form,
.atma-student-space__status-form,
.atma-registrations-space__quick-register,
.atma-finance-space__manual-cash-form,
.atma-finance-space__manual-general-form,
.atma-finance-space__general-payment-form,
.atma-finance-space__csv-import-form,
.atma-invoice-editor__header-form,
.atma-invoice-editor__add-item-form {
    --atma-field-border: var(--wp--preset--color--secondary-4, #cfc6bd);
    --atma-field-text: var(--wp--preset--color--primary-1, #3e2b2f);
}

/*
 * **Lo que arregla el síntoma reportado**: los controles heredan la
 * tipografía y el tamaño del documento, así que un campo mide lo mismo
 * que su etiqueta.
 *
 * `font: inherit` en vez de `font-size: 1rem` a propósito: también
 * arrastra familia, peso e interlineado, que es lo que hace que un
 * `<textarea>` deje de salir en monoespaciada.
 */
.atma-member-information input,
.atma-member-information select,
.atma-member-information textarea,
.atma-login-form input,
.atma-signup-form input,
.atma-password-reset-request-form input,
.atma-password-reset-confirm-form input,
.atma-student-space__payment-form input,
.atma-student-space__payment-form select,
.atma-registrations-space__quick-register input,
.atma-registrations-space__quick-register select,
.atma-finance-space__manual-cash-form input,
.atma-finance-space__manual-cash-form select,
.atma-finance-space__manual-general-form input,
.atma-finance-space__manual-general-form select,
.atma-finance-space__general-payment-form input,
.atma-finance-space__general-payment-form select,
.atma-finance-space__csv-import-form input,
.atma-invoice-editor__header-form input,
.atma-invoice-editor__header-form textarea,
.atma-invoice-editor__add-item-form input,
.atma-invoice-editor__add-item-form select {
    font: inherit;
    color: var(--atma-field-text, #3e2b2f);
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--atma-field-border, #cfc6bd);
    border-radius: 10px;
    background: var(--wp--preset--color--background-1, #fff);
    max-width: 100%;
}

/* Las casillas no son cajas de texto: heredar el relleno y el borde de
   arriba las convierte en cuadrados enormes. */
.atma-member-information input[type='checkbox'],
.atma-signup-form input[type='checkbox'] {
    padding: 0;
    border: 0;
    width: auto;
    min-height: 0;
}

.atma-member-information textarea,
.atma-invoice-editor__header-form textarea {
    min-height: 6rem;
    resize: vertical;
}

/* ---- Ancho de los campos (Step 10.46) -------------------------------
 *
 * La versión 1 del formulario tiene secciones largas y campos de texto
 * libre; los controles ocupan ahora el ancho de la columna en vez del
 * ancho por defecto del navegador, que dejaba las cajas -- sobre todo
 * los `<textarea>` -- muy estrechas. El formulario se limita a un ancho
 * de lectura cómodo para que no se estire de lado a lado en pantallas
 * grandes.
 */
.atma-member-information--edit,
.atma-member-information--view {
    max-width: 680px;
}

.atma-member-information input:not([type='checkbox']),
.atma-member-information select,
.atma-member-information textarea {
    width: 100%;
    box-sizing: border-box;
}

.atma-member-information textarea {
    min-height: 8rem;
}

/* ---- Etiquetas y ritmo ------------------------------------------- */

.atma-member-information label,
.atma-login-form label,
.atma-signup-form label,
.atma-password-reset-request-form label,
.atma-password-reset-confirm-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--atma-field-text, #3e2b2f);
}

/* Una casilla y su texto van en la misma línea: la etiqueta *es* el
   texto, y ponerla en bloque encima deja la casilla huérfana. */
.atma-member-information label:has(input[type='checkbox']),
.atma-signup-form label:has(input[type='checkbox']) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.atma-member-information > p,
.atma-login-form > p,
.atma-signup-form > p,
.atma-password-reset-request-form > p,
.atma-password-reset-confirm-form > p {
    margin: 0 0 1.1rem;
}

.atma-member-information h3,
.atma-login-form h3,
.atma-signup-form h3 {
    margin: 2rem 0 1rem;
}

.atma-member-information h3:first-of-type {
    margin-top: 0;
}

/* ---- Botones ----------------------------------------------------- */

.atma-member-information button,
.atma-login-form button,
.atma-signup-form button,
.atma-password-reset-request-form button,
.atma-password-reset-confirm-form button,
.atma-student-space__payment-form button,
.atma-student-space__status-form button,
.atma-registrations-space__quick-register button,
.atma-finance-space__manual-cash-form button,
.atma-finance-space__manual-general-form button,
.atma-finance-space__general-payment-form button,
.atma-finance-space__csv-import-form button,
.atma-invoice-editor__header-form button,
.atma-invoice-editor__add-item-form button {
    font: inherit;
    font-weight: 600;
    /* 44px, el mínimo táctil recomendado por WCAG 2.5.5 y por las guías
       de iOS y Android. */
    min-height: 2.75rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 10px;
    background: var(--wp--preset--color--primary-1, #3e2b2f);
    color: var(--wp--preset--color--background-1, #fff);
    cursor: pointer;
}

.atma-member-information button:hover,
.atma-login-form button:hover,
.atma-signup-form button:hover,
.atma-password-reset-request-form button:hover,
.atma-password-reset-confirm-form button:hover {
    background: var(--wp--preset--color--primary-3, #a14531);
}

/* ---- Foco -------------------------------------------------------- */

/*
 * El mismo anillo que el resto del sitio (`base.css`). `#1a1a1a` es
 * literal y auditado: 16:1 sobre el fondo de página y 8:1 sobre el
 * naranja de marca, donde WCAG 2.1 AA (1.4.11) pide 3:1. No cambiarlo
 * por un token de paleta que se le parezca.
 */
.atma-member-information :is(input, select, textarea, button):focus-visible,
.atma-login-form :is(input, button):focus-visible,
.atma-signup-form :is(input, button):focus-visible,
.atma-password-reset-request-form :is(input, button):focus-visible,
.atma-password-reset-confirm-form :is(input, button):focus-visible,
.atma-student-space__payment-form :is(input, select, button):focus-visible,
.atma-registrations-space__quick-register :is(input, select, button):focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

/* ---- Avisos ------------------------------------------------------ */

.atma-form-error,
.atma-form-success {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin: 0 0 1.25rem;
}

.atma-form-error {
    background: #fbeceb;
    color: var(--wp--preset--color--chakra-1, #8c3a2b);
}

.atma-form-success {
    background: #eaf3ef;
    color: var(--wp--preset--color--secondary-1, #5e7775);
}

/* ---- Lo que un socio nos contó antes (paso 10.6) ----------------- */

.atma-member-information__previous {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: var(--wp--preset--color--background-3, #f5f1ea);
}

.atma-member-information__previous h4 {
    margin: 0 0 0.35rem;
}

.atma-member-information__previous-intro {
    margin: 0 0 0.75rem;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.atma-member-information__previous-answer {
    margin: 0 0 0.35rem;
}

/* ---- La página de baja (paso 10.11) ------------------------------ */

.atma-retention-disclosure {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--wp--preset--color--primary-2, #db7b08);
    background: var(--wp--preset--color--background-3, #f5f1ea);
}

/* ---- Móvil ------------------------------------------------------- */

@media (max-width: 600px) {
    .atma-member-information input:not([type='checkbox']),
    .atma-member-information select,
    .atma-member-information textarea,
    .atma-login-form input,
    .atma-signup-form input,
    .atma-password-reset-request-form input,
    .atma-password-reset-confirm-form input {
        width: 100%;
    }

    .atma-member-information button,
    .atma-login-form button,
    .atma-signup-form button {
        width: 100%;
    }
}