/* =====================================================================
   acceso.css — LA PUERTA DE LA APP, en claro.

   LA ÚLTIMA DE LAS TRES. `inicio` (#283), `nueva-clave` (#288) y ésta. Con ella, todo lo
   que hay detrás del login habla el mismo idioma visual y el rediseño puede pasar a las
   páginas públicas, que son oscuras a propósito y otro sistema entero.

   CERO TOKENS NUEVOS, y eso es el resultado, no el objetivo. Al pintarla, los cuatro
   sitios que parecían pedir nombre propio ya lo tenían:

     · la tira de pestañas        → `--p-fondo` hundida sobre la tarjeta, como el campo.
     · la pestaña activa          → `--p-marco` + `--p-borde`, una píldora levantada. NO
                                    lleva sombra: `--p-sombra` es de TARJETA (28px de
                                    difuminado) y en una píldora de 30px de alto se ve
                                    como una mancha. Un borde dice lo mismo y no estrena
                                    un `--p-sombra-pildora` que usaría un solo selector.
     · el aviso verde de llegada  → el trío `--p-exito`, que nació en el #288.
     · la caja del correo enviado → `--p-fondo` otra vez.

   Es lo mismo que pasó con `--p-campo`, que resultó ser `--p-fondo`: un token que al
   pintarlo ya tiene nombre no entra, porque dos nombres para un color es exactamente lo
   que fue `--p-papel`.

   EL ACENTO, igual que en `nueva-clave.css` y por la misma decisión del 2026-09-15:
   dorado la marca, coral la acción, azul lo activo y lo enlazado. Aquí hay un segundo
   botón —«Usar otra dirección»— que NO es la acción primaria: es la salida de emergencia
   de quien se equivocó de correo. Va en azul de enlace, no en coral, para que el botón
   coral de la tarjeta siga siendo uno solo.

   LA NEGRITA ES 600 Y ESTÁ ESCRITA. `polarys-fuente.css` trae Inter en 400 y 600. Esta
   página pedía 700 en dos sitios —el botón y el «Revisa tu correo»— y el `<b>` de la marca
   lo pide por defecto del navegador. Sin cara de 700 el navegador elegía la 600 por su
   cuenta; ahora está escrito el 600 que se va a ver.

   LO QUE NO SE TOCA, Y NO ES DECORADO: el bloque `nextUrl()` del `<script>` de la página,
   con su constante y su indentación. Tiene tres acoplamientos medidos y ninguno da error
   al romperse; los vigila `tests/test_acceso_intocable.py`.
   ===================================================================== */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--p-fuente);
  background:var(--p-fondo);
  color:var(--p-tinta);display:flex;align-items:center;justify-content:center;padding:24px;
}

/* La tarjeta. Sin `backdrop-filter`: el tema claro no tiene vidrio, y sobre un fondo
   plano el desenfoque no desenfocaba nada — solo costaba una capa de composición. */
.card{
  width:100%;max-width:420px;background:var(--p-marco);
  border:1px solid var(--p-borde);border-radius:20px;
  padding:34px 30px 30px;box-shadow:var(--p-sombra);
}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
/* El `fill` sale de aquí y no del atributo del <svg>: así el dorado de la marca es el
   token y no un literal suelto en el marcado. */
.brand svg{width:30px;height:30px;fill:var(--p-dorado)}
.brand b{font-size:20px;font-weight:600;letter-spacing:.3px;color:var(--p-marino)}
.brand b span{color:var(--p-dorado)}
.sub{color:var(--p-apagado);font-size:14px;margin:0 0 22px}

/* LA TIRA DE PESTAÑAS. Hundida respecto a la tarjeta (lleva el color de la página) con la
   activa levantada en blanco. En oscuro la activa era un rectángulo dorado, o sea la marca
   haciendo de selección; aquí la marca se queda en el logotipo. */
.tabs{display:flex;gap:6px;background:var(--p-fondo);border:1px solid var(--p-borde);
  border-radius:var(--p-radio);padding:4px;margin-bottom:20px}
.tabs button{
  flex:1;border:1px solid transparent;background:transparent;color:var(--p-apagado);
  font:inherit;font-weight:600;padding:9px 0;border-radius:9px;cursor:pointer;
  font-size:14px;transition:color var(--p-transicion),background var(--p-transicion),
  border-color var(--p-transicion);
}
.tabs button:hover{color:var(--p-tinta)}
.tabs button:focus-visible{outline:none;border-color:var(--p-azul);box-shadow:var(--p-anillo)}
.tabs button.on{background:var(--p-marco);border-color:var(--p-borde);color:var(--p-marino)}

label{display:block;font-size:13px;color:var(--p-apagado);margin:14px 0 6px}

/* El campo se HUNDE respecto a la tarjeta: lleva el color de la página, no un blanco
   nuevo. Por eso no hay `--p-campo` (ver la cabecera del tema). */
input{
  width:100%;background:var(--p-fondo);border:1px solid var(--p-borde);color:var(--p-tinta);
  border-radius:11px;padding:12px 13px;font:inherit;font-size:15px;outline:none;
  transition:border-color var(--p-transicion),box-shadow var(--p-transicion);
}
input:focus{border-color:var(--p-azul);box-shadow:var(--p-anillo)}

.go{
  width:100%;margin-top:22px;border:0;background:var(--p-coral);color:var(--p-marco);font:inherit;
  font-weight:600;font-size:16px;padding:13px 0;border-radius:var(--p-radio);cursor:pointer;
  transition:background var(--p-transicion);
}
.go:hover{background:var(--p-coral-oscuro)}
.go:disabled{opacity:.6;cursor:default}

.msg{margin-top:16px;font-size:14px;border-radius:11px;padding:11px 13px;display:none;line-height:1.4}
.msg.err{display:block;background:var(--p-error-claro);border:1px solid var(--p-error-borde);color:var(--p-error)}
.msg.ok{display:block;background:var(--p-exito-claro);border:1px solid var(--p-exito-borde);color:var(--p-exito)}

.foot{margin-top:20px;text-align:center;font-size:13px;color:var(--p-apagado)}
.foot a{color:var(--p-azul);text-decoration:none;display:inline-flex;align-items:center;gap:.35em}
.foot a:hover{text-decoration:underline}
/* LA FLECHA ES UN SVG Y NO UN «←», por lo mismo que en nueva-clave.css: las caras de Inter
   que carga esta página cubren 230 caracteres y U+2190 no está entre ellos, así que caía a
   una tipografía del sistema al lado de texto en Inter. */
.foot a svg{width:1em;height:1em;fill:currentColor;flex:none}

.hint{font-size:12px;color:var(--p-apagado);margin-top:6px}

/* EL AVISO DE LLEGADA, el que sale al volver de un enlace de correo. Es un estado de
   ÉXITO, así que lleva el trío verde del tema y no un verde nuevo. Estaba escrito entero
   en el atributo `style=` del marcado; aquí solo se mueve el COLOR — la posición fija y el
   `display:none` se quedan donde estaban porque el JS los toca. */
.aviso{background:var(--p-exito-claro);border:1px solid var(--p-exito-borde);color:var(--p-exito);
  box-shadow:var(--p-sombra)}
.aviso button{color:var(--p-exito)}

/* «Revisa tu correo»: el panel que sustituye al formulario tras un alta correcta. */
.enviado-titulo{font-size:17px;font-weight:600;margin:0 0 8px;color:var(--p-marino)}
.enviado-texto{font-size:14px;color:var(--p-apagado);line-height:1.5;margin:0 0 12px}
.enviado-correo{background:var(--p-fondo);border:1px solid var(--p-borde);border-radius:11px;
  padding:11px 13px;font-size:15px;font-weight:600;word-break:break-all;color:var(--p-tinta)}
/* La salida de emergencia, no la acción primaria: azul de enlace y no coral, para que el
   botón coral de la tarjeta siga siendo uno solo. */
.enviado-otra{margin-top:14px;background:none;border:0;color:var(--p-azul);font:inherit;
  font-size:13px;cursor:pointer}
.enviado-otra:hover{text-decoration:underline}

/* SELECTOR DE IDIOMA. Es la TIRA del pie de la portada, no el desplegable de la
   cabecera, y por dos motivos: aquí no hay cabecera a la que anclarlo —esta página es
   una tarjeta centrada— y la tira no necesita JS ninguno. El cambio y el resaltado los
   hace ya i18n.js por su cuenta: la delegación global de `init()` escucha cualquier
   [data-lang], y `set()` alterna la clase `.on` sobre todos ellos.
   BOTONES y no <span> como en el pie de la portada: aquí es el único mando de la
   página y a esta pantalla se llega desde el enlace de un correo de recuperación —
   quien navega con teclado tiene que poder llegar a él, y un <span> no recibe foco. */
.langs{display:flex;gap:6px;justify-content:center;margin-top:18px}
.langs button{border:1px solid var(--p-borde-suave);background:transparent;color:var(--p-apagado);
  font:inherit;font-size:11.5px;border-radius:8px;padding:3px 9px;cursor:pointer;
  transition:color var(--p-transicion),border-color var(--p-transicion),background var(--p-transicion)}
.langs button:hover{color:var(--p-tinta);border-color:var(--p-borde)}
.langs button:focus-visible{outline:none;border-color:var(--p-azul);box-shadow:var(--p-anillo)}
.langs button.on{border-color:var(--p-azul-borde);background:var(--p-azul-claro);color:var(--p-azul)}