/*
 * Pantallas de acceso.
 *
 * Sin barra lateral ni branding del tenant: en este punto todavía no se sabe de qué cliente
 * es quien entra. Los radios y tipografías salen de tokens.css, igual que el resto.
 */

.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* dvh y no vh: en móvil la barra de direcciones recorta vh y el botón de enviar el código
       queda bajo el pliegue. La línea con vh se conserva como reserva para navegadores sin
       soporte de dvh, que la de abajo pisa en cuanto lo hay. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-6);
    background: var(--surface);
}

.auth__panel {
    width: 100%;
    max-width: 400px;
    padding: var(--space-8);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}

/*
 * Cabecera del panel: la marca a la izquierda y el selector de idioma a la derecha. Antes el
 * logo iba solo -- el selector de idioma no existía en esta pantalla, hueco detectado en vivo
 * porque el resto de la aplicación sí lo tiene (el globo de la barra superior).
 */
.auth__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/*
 * Logo real de marca (lockup OmmiFX, 208x64 en origen). Altura fija y ancho automático para
 * que el SVG mantenga su proporción -- la hoja de marca (logo/files/ommifx-brand-sheet.html)
 * fija un ancho mínimo de 96px para el lockup; 128px de aquí deja margen de sobra sin invadir
 * el resto del panel de acceso (max-width: 400px). El margen inferior lo pone ahora .auth__head.
 */
.auth__brand {
    display: block;
    height: var(--brand-lockup-height-lg);
    width: auto;
}

/*
 * ---- Selector de idioma (duplicado deliberado de layout.css) --------------------------
 *
 * .icon-button/.lang/.lang__panel/.lang__item viven en layout.css, pero esa hoja da por
 * sentado el chasis completo (sidebar, topbar, carril de tablet, drawer móvil) que estas dos
 * pantallas previas a la sesión no cargan -- cargar layout.css entero aquí traería reglas de
 * elementos que no existen en este DOM. Se copia solo lo que hace falta; si el componente
 * cambia en layout.css, este bloque hay que revisarlo a mano.
 */
.icon-button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
}

.icon-button:hover {
    color: var(--secondary);
    background: var(--surface-container);
    text-decoration: none;
}

.lang {
    position: relative;
    flex: 0 0 auto;
}

.lang__panel {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-popover);
    min-width: 160px;
    padding: var(--space-1);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    box-shadow: var(--elev-2);
}

.lang__panel.is-open { display: block; }

.lang__item {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    font-family: var(--font-label);
    font-size: var(--text-body-md-size);
    line-height: var(--text-body-md-lh);
    color: var(--on-surface);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.lang__item:hover { background: var(--surface-container); text-decoration: none; }

.lang__item.is-active {
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 600;
}

/* Objetivo táctil (§4.4): el botón mide 32x32 de caja visible, el área de pulsación crece con
   un pseudo-elemento centrado, mismo mecanismo que layout.css usa para toda la aplicación. */
.icon-button {
    position: relative;
}

.icon-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--control-touch);
    height: var(--control-touch);
    transform: translate(-50%, -50%);
}

.auth__title {
    margin: 0 0 var(--space-2);
    font: var(--text-title-lg);
    letter-spacing: var(--tracking-title-lg);
}

.auth__lead {
    margin: 0 0 var(--space-6);
    color: var(--on-surface-variant);
    font: var(--text-body-lg);
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Ancho completo: en esta pantalla no hay ninguna otra acción que compita. */
.auth__submit {
    justify-content: center;
    height: 40px;
}

.auth__hint {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--outline-variant);
    font: var(--text-body-md);
    color: var(--on-surface-variant);
}

/*
 * "Enviar otro" es el único camino de recuperación de la pantalla del código -correo mal
 * escrito, código caducado-, así que necesita el mínimo táctil aunque siga leyéndose como un
 * enlace de texto. inline-flex + min-height (no solo padding vertical) para que el área
 * pulsable crezca sin que el enlace deje de fluir con el texto que lo rodea.
 */
.auth__hint a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-touch);
    padding: var(--space-1) 0;
}

/*
 * El código se teclea dígito a dígito, así que se compone como un dato y no como texto:
 * monoespaciada, cifras de ancho fijo y letras separadas.
 */
.auth__code {
    font-family: var(--font-mono);
    font-size: var(--text-title-lg-size);
    font-variant-numeric: tabular-nums;
    letter-spacing: .3em;
    text-align: center;
}

/*
 * Código de desarrollo. Se pinta como una advertencia y no como parte del diseño: tiene que
 * cantar que esto no es una pantalla normal, para que nadie lo confunda con algo que pueda
 * llegar a producción.
 */
.auth__devcode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--error-container);
    border: 1px dashed var(--error);
    border-radius: var(--radius);
}

.auth__devcode-label {
    font: var(--text-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--on-error-container);
}

.auth__devcode-value {
    font-family: var(--font-mono);
    font-size: var(--text-title-md-size);
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--on-error-container);
}

/*
 * Consentimiento del alta de interesados (PublicSignupController). Área de toque de 44px
 * completa (min-height, no solo la casilla de 20x20 dentro), accent-color con el token de marca
 * y foco visible — mismo criterio que ya aplicó la OnePage a su propio checkbox de consentimiento
 * (1.77, cerrada 2026-09-11): un checkbox sin esto es exactamente el hueco de accesibilidad que
 * costó reabrir una vez.
 */
.field--checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-touch);
    font: var(--text-body-md);
    color: var(--on-surface-variant);
    cursor: pointer;
}

.field--checkbox input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--primary);
}

.field--checkbox input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.auth__foot {
    margin-top: var(--space-6);
    font: var(--text-body-sm);
    color: var(--on-surface-variant);
}

/* ---- Responsive (§4.1/§4.3/§4.4, tanda 82) ------------------------------------------ */

/*
 * Estas dos pantallas no tenían NI UNA media query. Funcionaban a 360px por casualidad —el
 * panel es de 400px con `width: 100%`— pero con el aire de escritorio metido en una pantalla
 * de móvil: 24px de padding exterior más 32px de panel dejaban 280px útiles para un campo de
 * correo, y el botón de enviar el código medía 40px, por debajo del mínimo táctil de §4.4.
 *
 * Como todo lo de la fase 4: el móvil es la BASE y el escritorio se recupera con `min-width`.
 * Lo de arriba se reescribe aquí en vez de tocar cada regla, para que el diff se lea como
 * "esto es lo que cambia en móvil" y no repartido por toda la hoja.
 */

.auth {
    /* El aire exterior de un móvil es el del contenido (`--space-3`), no el de escritorio, y
       el área segura evita que el pie quede bajo el indicador de inicio de un iPhone. */
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

.auth__panel {
    padding: var(--space-6);
}

/* §4.4: el botón principal mide 48px bajo `md`. Es el único de la pantalla, así que no compite
   con nada y puede ocupar todo el ancho. */
.auth__submit {
    height: var(--field-touch);
    width: 100%;
}

/* El código de desarrollo se apila: rótulo y valor en una sola línea a 360px obligaban al
   valor —monoespaciado y con `letter-spacing`— a empujar el panel. */
.auth__devcode {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

@media (min-width: 768px) {
    .auth { padding: var(--space-6); }
    .auth__panel { padding: var(--space-8); }

    .auth__submit {
        height: 40px;
        width: auto;
    }

    .auth__devcode {
        flex-direction: row;
        align-items: center;
        gap: var(--space-4);
    }
}