/* =====================================================================
   nueva-clave.css — LA PANTALLA DE RECUPERAR CONTRASEÑA, en claro.

   POR QUÉ SALIÓ DEL <style> DE LA PÁGINA
   ---------------------------------------
   Vivía dentro de `nueva-clave.html`, y mientras los colores eran literales daba igual.
   Al pasar a usar el tema deja de dar igual: la guarda de huérfanas
   (`tests/test_tema_claro.py`) deriva su corpus de los `<link rel=stylesheet>` de cada
   página, así que un `var(--p-dorado)` escondido en un `<style>` en línea no lo ve
   nadie — y el token quedaría «definido y sin usar» desde fuera, que es un rojo por un
   motivo falso, o peor, un verde por no mirar. Sacarlo a su hoja lo mete en el barrido
   y, de paso, bajo el `?v=<huella>` de `tests/test_version_css.py`.

   QUÉ ACENTO LLEVA CADA COSA. Decidido el 2026-09-15, y es lo que más cambia respecto a
   la versión oscura, donde TODO era dorado:

     · el dorado  → solo la marca (la estrella y el «3D»). Nada más.
     · el coral   → la acción primaria: el botón de enviar/guardar, y solo él.
     · el azul    → lo activo y lo enlazado: el foco del campo, el enlace del pie y el
                    idioma seleccionado. Es lo que `polarys-tema.css` ya dice que es
                    `--p-azul` («selección, bordes activos, enlaces»), así que aquí no
                    se decide nada nuevo: se usa el vocabulario que ya había.

   En oscuro los tres eran `#EEB63F`, de modo que el botón que hay que pulsar, el campo
   que tiene el foco y la marca eran el mismo color. Separarlos es el cambio.

   LA NEGRITA ES 600 Y ESTÁ ESCRITA, no elegida por el navegador. `polarys-fuente.css`
   trae Inter en 400 y 600. Esta página pedía `font-weight:700` en el botón, y los `<h1>`
   y el `<b>` lo piden por defecto del navegador: sin una cara de 700, el navegador coge
   la más cercana de la familia —la 600— por su cuenta. Funciona, y el fichero decía una
   cosa mientras pasaba otra. Aquí está escrito el 600 que se va a ver.

   EL CONTRASTE DEL BOTÓN es 3,69:1 (blanco sobre `--p-coral`), por debajo del 4,5:1 de
   WCAG AA para texto normal. NO se arregla aquí: `inicio.css:196` ya pinta así la acción
   primaria de la app, y cambiarlo en una sola pantalla daría dos botones primarios
   distintos. Es deuda del tema, no de esta página, y se anota para que tenga nombre.
   ===================================================================== */

*{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}
h1{font-size:19px;font-weight:600;margin:14px 0 4px;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 «←». El carácter dependía de que la fuente lo cubriera, y
   medido el 2026-09-15 no lo cubre: las caras de Inter que carga esta página traen 230
   caracteres y U+2190 no está entre ellos, así que caía a una tipografía del sistema
   justo al lado de texto en Inter. Un SVG no depende de ninguna fuente. `1em` y
   `currentColor` para que siga al texto en tamaño y en color, incluido el `:hover`. */
.foot a svg{width:1em;height:1em;fill:currentColor;flex:none}

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

/* 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)}