/* ══════════════════════════════════════════════════════════════════
   LAS PANTALLAS DE ACCESO (04-05/09)

   HOJA COMPARTIDA. La usan iniciar sesión, registrarse y el paso del
   código de verificación: son el mismo diseño, y tenerlo tres veces es
   tenerlo tres veces distinto el día que alguien retoque una. Vive aquí
   arriba y no dentro de una de las tres, como Auth/auth.css.
   Nació el 04/09 dentro de SignUp/ y se saco aquí el 05/09, al hacer la
   segunda pantalla — antes de copiarla, que es cuando toca.
   Lo PROPIO de cada página va en su styles.css; hoy solo el registro
   tiene uno, para su lista de requisitos de la contraseña.

   OJO CON EL NOMBRE DE LAS CARPETAS, que confunde a todo el que llega:
   SignUp/ es INICIAR SESIÓN y SignIn/ es REGISTRARSE. Están cruzadas de
   origen (29/08) y no se han renombrado para no romper enlaces de fuera.

   ── DE DÓNDE SALE CADA COSA, QUE SON DOS SITIOS DISTINTOS ──────────
   LA COMPOSICIÓN es de la referencia del usuario
   (C:\Users\alexx\Pictures\PantallaIncioSesion): qué hay, en qué orden y
   con qué anchura — el título grande, los tres accesos en fila, los dos
   campos, el botón oscuro, el pie y la letra legal.
   TODO LO DEMÁS ES DE LA CASA: la tipografía, la escala, los pesos, el
   material de los campos, el canto de los botones y el pulsado. Se pidió
   así en chat, y en estas palabras: "haz que la tipografía sea la que ya
   tenemos en la página Home principal, tamaños de fuentes, grosor,
   espacios, los efectos de los inputs que ya tenemos, efectos de bordes,
   efecto de bordes de botones".

   LA PRIMERA VERSIÓN DE ESTA HOJA HACÍA JUSTO LO CONTRARIO y por eso se
   rehízo: sacaba también la tipografía de la imagen —una serif medida
   contra trece candidatas y una sans condensada— y le salía una pantalla
   que no se parecía al producto. Queda escrito porque la tentación al
   ver una referencia es copiarla entera: LO QUE SE COPIA DE UNA MAQUETA
   ES LA COMPOSICIÓN; el material es el que ya tiene la casa.

   ── ESTA PANTALLA ES CLARA SIEMPRE, Y NO ES UN DESCUIDO ──
   No lleva pareja oscura, que es lo que pide REGLAS-DISENO para todo
   elemento nuevo. Se preguntó en chat y se eligió a sabiendas: "clara
   siempre, como la referencia". ANTES DE AÑADIR UN
   @media (prefers-color-scheme: dark) AQUÍ, PREGUNTAR — se descartó, no
   se olvidó. Lo que había hasta hoy era lo contrario: la página nacía
   OSCURA y tenía su pareja clara.
   ══════════════════════════════════════════════════════════════════ */

/* ── LOS TOKENS DE LA CASA ─────────────────────────────────────────
   COPIADOS, NO INVENTADOS, y con su sitio de origen al lado. La fuente
   de verdad de todos ellos es dashboard/Home: el <head> de
   partes/00-cabeza.html y las hojas styles/01-base y 04-tooltips-menus.
   SI ALGUNO SE RECALIBRA ALLÍ, HAY QUE TRAERLO AQUÍ. No se enlazan las
   hojas de Home directamente porque dependen de Tailwind y de sus veinte
   @import: traerlas enteras a una página de acceso sería arrastrar media
   app para usar seis variables.
   Es el mismo trato que ya tienen SERVIDOR y CLAVE_SESION, copiadas de
   Auth/config.js al <head> del dashboard con esa misma nota. */
:root {
    /* Cuatro de los ocho de la paleta (00-cabeza). */
    --c-text:       #1a1a1a;
    --c-muted:      #6a6d71;
    --c-superficie: #fafafa;   /* el nivel CONTENIDO */
    --c-elevado:    #ffffff;   /* lo que "flota": controles y campos */

    /* EL BORDE Y EL CANTO DE TODOS LOS BOTONES DE LA CASA
       (styles/04-tooltips-menus.css). El canto dibuja una pieza
       ILUMINADA DESDE ARRIBA: línea clara arriba al 6,2% y oscura abajo
       al 17,6%, casi tres veces más. Los dos van juntos o no van. */
    --bisel-borde: rgba(0, 0, 0, 0.16);
    --bisel-canto:
        0 -0.5px 0 0 rgba(0, 0, 0, 0.062),
        0  0.5px 0 0 rgba(0, 0, 0, 0.176),
        0 0 0 0.5px rgba(0, 0, 0, 0.1765);

    /* EL PULSADO DE LA CASA (styles/01-base.css). Tres capas: el hundido
       de arriba, el canto interior y un tinte plano del 5% sobre todo. */
    --pressed-shadow:
        inset 0 4px 5px -3px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 0 0 999px rgba(0, 0, 0, 0.05);

    /* Los tokens que pide Auth/auth.css, que es la hoja de avisos
       COMPARTIDA con el registro y con recuperar contraseña. Se
       redefinen aquí en claro; aquella no se toca, que las otras dos
       páginas siguen siendo oscuras. */
    --error-border:      #d94a3d;
    --error-bg:          rgba(217, 74, 61, 0.06);
    --auth-error-texto:  #a8291d;   /* 6,7:1 sobre #fafafa */
    --auth-ok-texto:     var(--marca);
    --border:            var(--bisel-borde);
    --surface-container: var(--c-elevado);
    --subheading:        var(--c-muted);
    --btn-bg:            var(--c-text);

    /* ── LA ESCALA FLUIDA ──────────────────────────────────────────
       Pedido en chat: "haz el título y el subtítulo más grande, haz la
       pantalla totalmente responsive, que se adapte a monitores más
       grandes y más pequeños".

       SE HACE CON clamp() Y vw EN CSS, que es como escala la casa: el nav
       es `clamp(220px, 17.1vw, 16rem)` (02-sidebar) y el chat interpola su
       ancho entre 1024 y 1600 (WEBLYM_AI_W, en el <head> de Home). No se
       inventa un mecanismo nuevo.

       CÓMO SE LEEN ESTOS NÚMEROS: el término del medio es una recta,
       `base + pendiente·vw`, calculada para pasar por dos puntos elegidos
       a mano. Los extremos del clamp son los topes. Están escritos con el
       valor que dan en las resoluciones de la casa, para que se puedan
       comprobar sin echar cuentas.

       QUÉ ESCALA Y QUÉ NO, y es una decisión:
         · ESCALA la portada (título y lema), el ancho de la columna y el
           aire entre bloques — o sea el LAYOUT.
         · NO ESCALAN los controles ni el texto del formulario: un campo
           mide 46 y el cuerpo 13 en toda la app, y el 04/09 se pidió
           expresamente que esta pantalla usara esos mismos. Un campo que
           creciera con el monitor dejaría de ser el campo de la casa.
         Es el mismo reparto que hace el dashboard: allí escalan el nav y
         el panel de IA; los botones y los campos, no. */

    /* 32 px a 1024 y 48 a 2560; nunca menos de 26 ni más de 48. El 30 que
       había era `headline-lg`, el escalón más grande de la casa — esto
       AÑADE uno por encima, y se añade a sabiendas porque se pidió: una
       portada no es una cabecera de sección. */
    --ac-titulo: clamp(26px, 21.33px + 1.042vw, 48px);
    /* 16 px a 1024 y 22 a 2560. Sube con el título para que la pareja siga
       leyéndose como una pareja. */
    --ac-lema:   clamp(14px, 12px + 0.39vw, 22px);
    /* EL AIRE ENTRE BLOQUES: 19 px a 1024 y 27 a 2560. Sin esto la
       pantalla crece de letra pero se queda igual de apretada, que es
       justo lo que hace que un diseño "no se adapte". */
    --ac-aire:   clamp(16px, 12.9px + 0.6vw, 28px);

    /* LA COLUMNA. 435 es el ancho de la referencia y es el SUELO: por
       debajo de 1280 no encoge (de eso se encarga el width:100%, que en
       una ventana estrecha la deja más angosta de todas formas). De ahí
       para arriba crece hasta 520 en 2560, para que en un monitor grande
       el formulario no se quede como un sello al lado de un título de 48. */
    --ac-col: clamp(435px, 350px + 6.64vw, 520px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-superficie);
}

/* LA TIPOGRAFÍA ES LA DEL DASHBOARD, no la de la maqueta: Inter y el
   cuerpo base de 13 px, que es el `text-[13px] font-sans` del <body> de
   Home. Todos los tamaños de esta hoja cuelgan de esa escala. */
body {
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
}

/* ── EL SITIO ─────────────────────────────────────────────────────
   Centrado en los dos ejes. `padding` y no `justify-content` a secas:
   en una ventana baja el contenido tiene que poder desbordar hacia
   abajo y hacerse scroll, no recortarse por arriba. */
.acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 3vw, 72px) 20px;
}

.acceso__caja {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── LA CABECERA ──────────────────────────────────────────────────
   30 px con peso 600 y tracking -0.02em es `headline-lg`, el escalón más
   grande que tiene la casa (estaba ya en la config de Tailwind de esta
   misma página). NO se inventa un tamaño mayor aunque en la referencia
   el título sea enorme: el TAMAÑO lo pone la escala; la referencia pone
   qué dice y dónde va.
   `clamp` por abajo para que quepa en una ventana estrecha. */
.acceso__titulo {
    margin: 0;
    font-size: var(--ac-titulo);
    font-weight: 600;
    /* Baja de 1.2 a 1.12: a 48 px un interlineado de 1.2 abre demasiado el
       hueco entre las dos frases del título cuando parte en dos líneas. */
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--c-text);
    text-align: center;
}

/* 14 px es `body-md`, el cuerpo de texto de la casa, en el gris apagado
   de siempre. */
.acceso__lema {
    margin: 10px 0 0;
    font-size: var(--ac-lema);
    font-weight: 400;
    line-height: 1.4;
    color: var(--c-muted);
    text-align: center;
}

/* LA OFERTA DE LA PORTADA (12/10): una pastilla bajo el lema, solo si se
   llega desde un boton de descuento. Verde de la casa, el del correo que
   la confirma. */
.acceso__oferta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 6px 14px 6px 6px;
    border: 1px solid rgba(6, 104, 68, 0.22);
    border-radius: 999px;
    background: rgba(6, 104, 68, 0.07);
    color: var(--marca, #066844);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
}

.acceso__oferta[hidden] {
    display: none;
}

.acceso__oferta-pct {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--marca, #066844);
    color: #fff;
    font-weight: 600;
}

.acceso__col {
    width: 100%;
    max-width: var(--ac-col);
}

/* ── LOS TRES ACCESOS DE FUERA ────────────────────────────────────
   Tres cajas iguales en una fila, con EL BOTÓN DE LA CASA: el degradado
   de arriba abajo, el borde --bisel-borde y el canto --bisel-canto. Es
   .btn-bisel de styles/04-tooltips-menus.css, traído tal cual.
   46 DE ALTO PARA QUE RIMEN CON LOS CAMPOS, que miden lo mismo: es la
   altura de control de la casa (.input-tienda). En la referencia también
   eran 46, así que aquí no hay que elegir entre una cosa y la otra.
   RADIO 8, el de los campos y los controles de la casa; no el 10 que se
   había sacado de la imagen.
   background-origin: border-box NO ES UN ADORNO: sin él el degradado se
   coloca sobre la caja de RELLENO y se repite bajo el borde, así que el
   canto sale AL REVÉS. La trampa está pagada dos veces en 04. */
.acceso__sociales {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: calc(var(--ac-aire) * 1.35);
}

.acceso__social {
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
    background-color: #f6f6f6;
    background-image: linear-gradient(to bottom, #fefefe, #f6f6f6);
    background-origin: border-box;
    border: 1px solid var(--bisel-borde);
    box-shadow: var(--bisel-canto);
    /* La transición va sobre background-image y no sobre "colors": lo que
       cambia en el hover es la imagen, no un color plano. */
    transition: background-image 0.15s ease, background-color 0.15s ease;
}
/* El hover de la casa: los DOS extremos del degradado bajan los mismos 11
   niveles, así el botón se oscurece lo de siempre sin perder el relieve. */
.acceso__social:hover {
    background-image: linear-gradient(to bottom, #f3f3f3, #ebebeb);
}
/* EL PULSADO Y EL CANTO TIENEN QUE CONVIVIR: escribir solo el hundido
   borraría las tres capas del canto justo mientras se pulsa, que es
   cuando más se notaría. Se suman los dos, como en 04. */
.acceso__social:active {
    box-shadow: var(--pressed-shadow), var(--bisel-canto);
}
.acceso__social svg {
    width: 20px;
    height: 20px;
}
/* El de GitHub y el de Apple van en la tinta de la casa; el de Google
   trae sus cuatro colores dentro y por eso no se le toca el fill. */
.acceso__social:nth-child(2) svg,
.acceso__social:nth-child(3) svg {
    fill: var(--c-text);
}

/* ── EL FORMULARIO ────────────────────────────────────────────────
   13 px, el cuerpo base de la casa, con peso 500 — el de las etiquetas
   del dashboard. */
.acceso__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--c-text);
    margin: var(--ac-aire) 0 6px;
}

/* EL CAMPO DE LA CASA, ENTERO: son .input-tienda + .input-hundido, las
   dos clases con las que se dibuja cualquier campo del dashboard (el de
   "Nueva carpeta", el de "Añadir tiendas", los de Ajustes).
     · 46 de alto, 14 de sangría, radio 8 y cuerpo 13 (06-modales).
     · EL MATERIAL HUNDIDO: siete paradas de degradado, no una sombra
       interior. Está en 04-tooltips-menus y lo comparten los campos, la
       barra de filtros de Tiendas y el lienzo de las tarjetas. Los siete
       números se copian enteros: partirlos es garantizar que se
       despareje alguno.
     · El placeholder en #9ca3af, el de .input-tienda. */
.acceso__campo {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--bisel-borde);
    color: var(--c-text);
    font-family: inherit;
    font-size: 13px;
    background-color: var(--c-elevado);
    background-image: linear-gradient(to bottom,
        #f3f3f3 0%,
        #f9f9f9 10%,
        #fbfbfb 20%,
        #fcfcfc 40%,
        #fdfdfd 60%,
        #fefefe 80%,
        #ffffff 95%);
}
.acceso__campo::placeholder {
    color: #9ca3af;
}
/* EL CAMPO NO CAMBIA AL ENFOCARLO, Y ESO ES LA CASA, no un olvido: los
   de Ajustes dan box-shadow `none` con el foco puesto y conservan su
   mismo borde (medido, y anotado en 06-modales junto a
   input.input-tienda:focus). El relieve es del estado de REPOSO.
   Se apagan el outline y el anillo porque son del navegador y de
   Tailwind, no del diseño de la casa.
   LA PRIMERA VERSIÓN LE PUSO UN ANILLO de 3 px al enfocar. No sale de
   ningún sitio del producto: era mío. */
.acceso__campo:focus {
    outline: none;
    border-color: var(--bisel-borde);
    box-shadow: none;
}

/* LA FILA DE "Contraseña" + "Olvidé mi contraseña".
   Alineadas por la BASE y no por el centro: así el enlace se apoya en la
   misma línea que la etiqueta aunque tengan cuerpos distintos. */
.acceso__fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.acceso__fila .acceso__label { margin-bottom: 6px; }

/* 12 px es `body-sm`, el escalón pequeño de la casa. Va en la tinta
   fuerte y con peso 500: no es una etiqueta más, es la salida cuando no
   te acuerdas. */
.acceso__olvido {
    font-size: 12px;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    white-space: nowrap;
}
.acceso__olvido:hover { text-decoration: underline; }

/* ── EL BOTÓN PRINCIPAL ───────────────────────────────────────────
   Oscuro, como en la referencia, pero con LOS EFECTOS DE LA CASA: el
   mismo alto y radio que un campo (46 y 8), el cuerpo de 14 con peso 500
   —que es `button-text`, el escalón de los botones— y el pulsado de
   --pressed-shadow, que es el de cualquier botón oscuro del dashboard
   (la regla `button.bg-black:…:active` de 01-base).
   EL BORDE ES EL MISMO --bisel-borde que el resto: sobre un relleno
   oscuro se lee como un negro más profundo, igual que la variante roja
   de .btn-bisel hace sobre el rojo. */
.acceso__enviar {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: var(--ac-aire);
    border-radius: 8px;
    border: 1px solid var(--bisel-borde);
    background-color: var(--c-text);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.acceso__enviar:hover { background-color: #2c2c2c; }
.acceso__enviar:active { box-shadow: var(--pressed-shadow); }
.acceso__enviar:disabled { opacity: .65; cursor: default; }

/* ── EL PIE ───────────────────────────────────────────────────────
   13 px, el cuerpo base, en el gris apagado. "Crear tienda" en la tinta
   fuerte con peso 500. */
.acceso__pie {
    margin: var(--ac-aire) 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--c-muted);
    text-align: center;
}
.acceso__pie-enlace {
    color: var(--c-text);
    font-weight: 500;
    text-decoration: none;
}
.acceso__pie-enlace:hover { text-decoration: underline; }

/* 12 px es `body-sm`, el escalón de la letra pequeña de la casa. El
   ancho lo decide el texto: no se fuerza el salto con un <br>, que
   aguanta mal otro idioma o un zoom distinto. */
.acceso__legal {
    margin: calc(var(--ac-aire) * 0.9) auto 0;
    /* Se queda algo por dentro de la columna: una letra pequenia a todo
       el ancho de un formulario de 520 se lee peor, no mejor. */
    max-width: min(390px, 100%);
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-muted);
    text-align: center;
}
.acceso__legal a {
    color: var(--c-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── EL AVISO Y EL CAMPO EN ROJO ──────────────────────────────────
   El aviso lo dibuja la hoja compartida con los tokens de arriba; aquí
   solo se le da el hueco.
   `.error-input` LA PONE app.js y hasta el 04/09 la pintaba un bloque de
   estilos que ese mismo archivo inyectaba con !important para ganarle a
   Tailwind. Sin Tailwind no hay a quien ganar, así que la regla vive
   aquí y sin un solo !important.
   SE APAGA EL DEGRADADO HUNDIDO al marcar el error: dejarlo debajo del
   tinte rojo lo enturbia y el campo deja de leerse como un error. */
#auth-aviso { margin-bottom: 14px; }

.acceso__campo.error-input,
.acceso__campo.error-input:focus {
    border-color: var(--error-border);
    background-image: none;
    background-color: var(--error-bg);
}

/* ── EL TEMBLOR DEL FALLO ─────────────────────────────────────────
   Lo dispara app.js cuando el servidor dice que no. Se conserva del
   diseño anterior tal cual: es de las pocas cosas de aquella pantalla
   que no dependían de su aspecto. */
@keyframes acceso-temblor {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.shake { animation: acceso-temblor .5s cubic-bezier(.36,.07,.19,.97) both; }

@media (prefers-reduced-motion: reduce) {
    .shake { animation: none; }
    .acceso__social, .acceso__enviar { transition: none; }
}

/* ── PANTALLAS ESTRECHAS ──────────────────────────────────────────
   Se retira aire, no contenido: el título baja de tamaño solo (clamp) y
   aquí lo único que cambia son los márgenes. La columna nunca pasa de
   435, así que en una ventana ancha no se estira. */
@media (max-width: 520px) {
    .acceso { padding: 32px 16px; }
    .acceso__sociales { gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════
   LO QUE AÑADE EL REGISTRO Y EL PASO DEL CÓDIGO (05/09)

   Las dos pantallas nuevas son la de arriba con otras piezas dentro, así
   que aquí no se repite ni un token: solo lo que ellas tienen y el login
   no.
   ══════════════════════════════════════════════════════════════════ */

/* ── LOS DOS PASOS DE LA PÁGINA DE REGISTRO ───────────────────────
   Registrarse y meter el código son DOS PASOS DE LA MISMA PÁGINA y no
   una pantalla con un modal encima, que es lo que había. La referencia
   los enseña así: la portada se queda y debajo cambia el contenido.
   SE CONMUTA CON [hidden] Y NO CON UNA CLASE porque un paso oculto tiene
   que estar oculto TAMBIÉN para un lector de pantalla y para el
   tabulador — `display:none` de la hoja del navegador hace las tres
   cosas de una vez. Por eso el marcado no lleva `.oculto` ni nada
   parecido: lleva el atributo. */
[hidden] { display: none !important; }

/* ── EL PÁRRAFO QUE DICE A DÓNDE FUE EL CÓDIGO ────────────────────
   "Para continuar, introduce el código de verificación enviado a" y
   debajo la dirección. DECIR LA DIRECCIÓN NO ES ADORNO: es lo que corta
   el clásico "no me llega nada" de quien se equivocó de letra al
   escribirla. El correo va en su propia línea y en la tinta fuerte,
   como en la referencia. */
.acceso__dicho {
    margin: var(--ac-aire) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-muted);
    text-align: center;
}
.acceso__dicho strong {
    display: block;
    color: var(--c-text);
    font-weight: 600;
    /* El correo no se traduce ni se parte por la mitad: es un dato. */
    word-break: break-all;
}

/* ── EL CAMPO DEL CÓDIGO ──────────────────────────────────────────
   Es el campo de la casa (.acceso__campo) y nada más; aquí solo se le
   centra el texto, que es como lo enseña la referencia.
   SEIS CASILLAS ERAN, Y SE FUERON EL 05/09 a petición ("un campo, como
   la referencia"). Con ellas se va su avance automático, su pegado por
   dígitos y el TECLADO NUMÉRICO propio de móvil — que existía porque
   seis casillas en un móvil son incómodas; con un solo campo y
   inputmode="numeric" el teléfono ya saca su teclado de números.
   Si alguna vez vuelven, estaban en app.js y en styles.css de SignIn. */
.acceso__campo--codigo {
    text-align: center;
    /* Un código se lee de un vistazo si sus cifras no se tocan. */
    letter-spacing: 0.12em;
}
.acceso__campo--codigo::placeholder {
    letter-spacing: normal;
}

/* ── "¿No te ha llegado nada? Volver a enviar" ────────────────────
   Mismo renglón que el pie del login, con el botón dentro. Va como
   <button> y no como <a>: reenviar es una ACCIÓN, no un sitio al que se
   va, y además tiene que poder deshabilitarse mientras corre la cuenta
   atrás.
   NO SE ANUNCIA LA CUENTA ATRÁS EN LA REFERENCIA, pero se conserva: el
   servidor corta los reenvíos de verdad (5 por hora y dirección) y un
   botón que promete lo que el servidor va a rechazar es peor que uno
   que espera. Lo único que cambia es el texto mientras espera. */
.acceso__reenvio {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--c-text);
    font-weight: 500;
    cursor: pointer;
}
.acceso__reenvio:hover:not(:disabled) { text-decoration: underline; }
.acceso__reenvio:disabled {
    color: var(--c-muted);
    cursor: default;
    font-weight: 400;
}

/* ── LA LISTA DE REQUISITOS DE LA CONTRASEÑA (registro) ───────────
   Se despliega al enfocar el campo y cada línea se enciende cuando su
   requisito se cumple. Los cinco son los mismos que valida el servidor
   (servidor/src/passwords.js): si cambian allí, cambian aquí.
   SE ANIMA EL max-height Y NO EL display, que no se puede animar; el
   200px es un techo generoso, no una medida. */
.acceso__requisitos {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
    margin-top: 0;
}
.acceso__requisitos.abierta {
    max-height: 200px;
    opacity: 1;
    margin-top: 10px;
}
.acceso__requisito {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--c-muted);
    transition: color .2s ease;
}
/* EL PUNTO SE CONVIERTE EN CHECK: en reposo es un círculo hueco y al
   cumplirse se rellena. Se dibuja con CSS y no con un icono para no
   cargar una familia entera por cinco puntos. */
.acceso__requisito::before {
    content: '';
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    flex-shrink: 0;
    transition: background-color .2s ease, border-color .2s ease;
}
.acceso__requisito.cumplido {
    color: var(--c-text);
}
.acceso__requisito.cumplido::before {
    background-color: var(--c-text);
    border-color: var(--c-text);
}

@media (prefers-reduced-motion: reduce) {
    .acceso__requisitos, .acceso__requisito, .acceso__requisito::before {
        transition: none;
    }
}

/* ── EL PASO DE «LISTO» (12/10) ───────────────────────────────────
   Solo con la oferta de lanzamiento: la cuenta queda creada y no se entra
   en Weblym. Marca verde de la casa, titulo, el texto y volver. */
.acceso__listo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--ac-aire) * 1.35);
    text-align: center;
}

.acceso__listo[hidden] {
    display: none;
}

.acceso__listo-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--marca, #066844);
    color: #fff;
}

.acceso__listo-marca svg {
    width: 26px;
    height: 26px;
}

.acceso__listo-titulo {
    margin: 18px 0 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text);
}

.acceso__listo-texto {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-muted);
}

.acceso__listo-texto strong {
    color: var(--c-text);
    font-weight: 600;
}

.acceso__listo-texto #listo-email {
    display: block;
    word-break: break-all;
}

/* El boton de la casa, pero como enlace. */
.acceso__enviar--enlace {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ── EL CAPTCHA PROPIO (12/10) ────────────────────────────────────
   Solo se ve con una conexión sospechosa. Una caja de la casa con un
   aro que gira, el texto y una barra fina de progreso; al terminar, el
   aro pasa a un check verde. */
.acceso__captcha {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    margin-top: var(--ac-aire);
    padding: 12px 14px;
    border: 1px solid var(--bisel-borde);
    border-radius: 8px;
    background: var(--c-elevado);
    font-size: 13px;
    color: var(--c-text);
}

.acceso__captcha[hidden] {
    display: none;
}

.acceso__captcha-marca {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--marca, #066844);
    border-radius: 999px;
    animation: acceso-captcha-gira 0.8s linear infinite;
}

.acceso__captcha.is-hecho .acceso__captcha-marca {
    border-color: var(--marca, #066844);
    background: var(--marca, #066844) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    animation: none;
}

.acceso__captcha-barra {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.acceso__captcha-barra i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--marca, #066844);
    transition: width 0.2s ease;
}

.acceso__captcha.is-hecho .acceso__captcha-barra {
    display: none;
}

@keyframes acceso-captcha-gira {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .acceso__captcha-marca { animation-duration: 2.4s; }
}