/* ══════════════════════════════════════════════════════════════════
   WEBLYM · ESTILOS DE AUTENTICACIÓN  (29/08)

   Lo que las tres páginas de acceso (login, registro y recuperar)
   necesitaban y no tenían: un sitio donde DECIR las cosas.
   Hasta hoy un fallo solo se pintaba de rojo y temblaba, y eso vale
   para "este campo está mal", pero no para "el código ha caducado" o
   "ese correo ya tiene cuenta", que es lo que empieza a contestar el
   servidor ahora que hay servidor.

   Casi todo sale de las variables que ya declara la styles.css de cada
   página (--error-border, --border, --subheading…), así que se adapta
   solo a claro y oscuro sin decir nada dos veces.

   LAS DOS QUE SÍ DECLARA, Y POR QUÉ: son colores de TEXTO, y ninguna de
   las de la casa servía para leerse en los dos temas.
     · --marca-clara vive en marca.css fuera de todo tema, o sea que es
       el mismo verde en claro y en oscuro. Sobre blanco da 2,4:1: se ve,
       pero no se lee.
     · --error-border está calculado para BORDES, no para texto. El
       #ef4444 del tema claro se queda en 3,8:1 sobre blanco, por debajo
       del 4,5:1 que pide la WCAG para texto normal. De borde sigue
       valiendo; de letra de 13px, no.
   Se declaran con el mismo patrón que las hojas de las páginas de
   acceso: OSCURO POR DEFECTO en :root, y el claro en la media query.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --auth-ok-texto:    var(--marca-clara);   /* #3eb082 sobre #0a0a0a → 7,4:1 */
    --auth-error-texto: var(--error-border);  /* #ffb4ab sobre #0a0a0a → 9,9:1 */
}

@media (prefers-color-scheme: light) {
    :root {
        --auth-ok-texto:    var(--marca);     /* #066844 sobre blanco → 7,3:1 */
        --auth-error-texto: #b91c1c;          /* sobre blanco → 7,0:1 */
    }
}

/* ── El aviso ───────────────────────────────────────────────────── */
.auth-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 18px;
    font-family: 'Geist', sans-serif;

    /* Entra y sale animado, con la curva de la casa. Se pliega por alto
       (grid-template-rows 0fr→1fr) y no por max-height: así el hueco es
       exactamente el del texto, mida lo que mida, y un mensaje de tres
       líneas no da el tirón de los últimos píxeles. */
    overflow: hidden;
    transition: opacity   .28s cubic-bezier(0.32, 0.72, 0, 1),
                transform .28s cubic-bezier(0.32, 0.72, 0, 1),
                margin    .28s cubic-bezier(0.32, 0.72, 0, 1),
                padding   .28s cubic-bezier(0.32, 0.72, 0, 1),
                border    .28s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Estado cerrado. El elemento se queda en el DOM (los lectores de
   pantalla lo anuncian por aria-live cuando vuelve), pero no ocupa. */
.auth-aviso[hidden] {
    display: flex;          /* gana al [hidden]{display:none} del navegador */
    opacity: 0;
    transform: translateY(-4px);
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin: 0 !important;
    pointer-events: none;
}

.auth-aviso__icono {
    font-size: 18px;
    line-height: 18px;
    flex-shrink: 0;
}

.auth-aviso__texto { flex: 1; min-width: 0; }

/* ── Variantes ──────────────────────────────────────────────────── */
.auth-aviso--error {
    color: var(--auth-error-texto);
    border-color: var(--error-border);   /* el borde SÍ es el de la casa */
    background-color: var(--error-bg);
}

.auth-aviso--ok {
    color: var(--auth-ok-texto);
    border-color: var(--marca);
    background-color: rgb(var(--marca-rgb) / 0.08);
}

.auth-aviso--info {
    color: var(--subheading);
    border-color: var(--border);
    background-color: var(--surface-container);
}

/* ── Botón ocupado ──────────────────────────────────────────────── */
/* Mientras hay una petición en vuelo el botón no se puede volver a
   pulsar. Sin esto, tres clics seguidos en "Registrarse" son tres
   altas en camino y el rate-limit de Supabase corta la tercera con un
   error que el usuario no ha provocado. */
.btn-primary[disabled],
.btn-primary[aria-busy="true"] {
    opacity: .72;
    cursor: not-allowed;
}
.btn-primary[disabled]:hover,
.btn-primary[aria-busy="true"]:hover {
    background-color: var(--btn-bg);
}
.btn-primary[disabled]:active,
.btn-primary[aria-busy="true"]:active {
    transform: none;
}

/* EL GIRO DE «CARGANDO» (12/10). Lo pone `ocupar()` (auth.js): un círculo
   de 15 px con un trazo de 2 px al que le falta un cuarto, que gira. Hereda
   el color del texto del botón —blanco en el negro y en el azul—, así que
   no necesita nada más. Va dentro de `.auth-ocupado`, centrado con su
   texto. */
.auth-ocupado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    line-height: 1;
}

.auth-giro {
    flex: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .9;
    animation: auth-girar .7s linear infinite;
}

@keyframes auth-girar {
    to { transform: rotate(360deg); }
}

/* VER LA CONTRASEÑA (12/10). Lo monta Auth/ver-clave.js: el campo va dentro
   de `.auth-clave` y el ojo, por dentro de su canto derecho. El campo deja
   sitio a la derecha para que el texto no pase por debajo del ojo. Vale
   igual para el campo de la casa (radio 8) y para la píldora de la oferta. */
.auth-clave {
    position: relative;
    display: block;
}

.auth-clave > input {
    padding-right: 46px !important;
}

.auth-clave__ver {
    position: absolute;
    top: 50%;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #6b7280;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease, background-color .15s ease;
}

.auth-clave__ver svg {
    width: 19px;
    height: 19px;
}

.auth-clave__ver:hover {
    color: #111827;
    background-color: rgb(0 0 0 / 0.05);
}

.auth-clave__ver:focus-visible {
    outline: 2px solid #397ef8;
    outline-offset: 1px;
}

/* ── Enlace en texto ────────────────────────────────────────────── */
/* Para los "Inicia sesión" que aparecen DENTRO de un aviso. */
.auth-aviso a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Cuenta atrás del reenvío ───────────────────────────────────── */
.auth-reenvio[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Quien prefiera no ver movimiento, no lo ve. */
@media (prefers-reduced-motion: reduce) {
    /* El giro va más despacio en vez de pararse: quieto parecería colgado. */
    .auth-giro { animation-duration: 1.6s; }
    .auth-aviso { transition-duration: .01ms; }
}