/*
 * Estilo de las pantallas de acceso — el sistema de la web, no otro.
 *
 * REGLA DE ALEX: la UI de Yeison es la de toda la app. Su diseño manda;
 * nosotros hacemos lógica.
 *
 * Los valores salen de web/src/components/nfc.tsx y web/src/index.css,
 * que es donde él los define. Su propio comentario lo llama
 * "neo-brutalismo": bordes negros gruesos, sombras duras desplazadas,
 * esquinas redondeadas y paleta plana.
 *
 * Mismo sistema que panel/estilo.css. Si cambia, se actualiza desde web/
 * y no al revés.
 *
 * Antes esto era estilo Adidas (negro, esquinas rectas, sin sombras).
 * No tenía nada que ver con su web: queda sustituido.
 */

:root{
  /* Los mismos nombres que usa la web, para poder compararlos. */
  --nfc-paper:#FFFDF8;
  --nfc-warm:#F5F0E6;
  --nfc-ink:#111111;
  --nfc-ink3:#767672;
  --nfc-border:#111111;
  --nfc-accent:#E8B923;
  --nfc-blue:#4C63D2;
  --nfc-red:#D64545;
  --nfc-green:#4A9B4E;

  --borde:2.5px;
  --borde-campo:2px;
  --sombra:4px 4px 0 var(--nfc-border);
  --sombra-alta:6px 6px 0 var(--nfc-border);

  /* Los nombres viejos siguen apuntando a los valores nuevos, para que
     el HTML no haya que tocarlo. */
  --negro:var(--nfc-ink);
  --blanco:var(--nfc-paper);
  --tinta:var(--nfc-ink);
  --suave:var(--nfc-ink3);
  --linea:var(--nfc-border);
  --linea-floja:var(--nfc-border);
  --fondo:var(--nfc-paper);
  --papel:var(--nfc-paper);
  --error:var(--nfc-red);
  --error-fondo:var(--nfc-red);
  --bien:var(--nfc-green);
  --bien-fondo:var(--nfc-green);

  --radio:12px;
  --radio-caja:16px;

  --fuente:"Helvetica Regular",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --separacion-titular:-.02em;
  --separacion-boton:normal;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:var(--fondo);
  color:var(--tinta);
  font:16px/1.5 var(--fuente);
  -webkit-font-smoothing:antialiased;
}

/* La caja ---------------------------------------------------------- */

.caja{
  width:100%;
  max-width:440px;
  background:var(--papel);
  /* Sin sombra y sin borde: el estilo es plano. Lo que separa del fondo
     es el espacio en blanco, no una caja dibujada. */
  border:var(--borde) solid var(--nfc-border);
  border-radius:var(--radio-caja);
  padding:36px 32px;
  box-shadow:var(--sombra);
}

/* Marca: el nombre en mayúsculas muy apretado, como su wordmark. */
.marca{
  /* En móvil .caja es un contenedor flex en columna, y eso estira a sus
     hijos a todo el ancho. align-self:flex-start lo impide; display:table
     cubre el caso de que .caja no sea flex. */
  display:table;
  align-self:flex-start;
  font-family:var(--mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:6px 13px;
  border-radius:999px;
  border:var(--borde) solid var(--nfc-border);
  background:var(--nfc-accent);
  color:var(--nfc-ink);
  margin:0 0 26px;
}

h1{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:var(--separacion-titular);
}

.entradilla{
  margin:0 0 32px;
  color:var(--suave);
  font-size:15px;
  line-height:1.45;
}

/* Campos ----------------------------------------------------------- */

.campo{margin-bottom:20px}

/* La etiqueta va en minúscula y pequeña: si TODO va en mayúsculas, nada
   destaca. Las mayúsculas se reservan para titulares y botones. */
.campo label{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--nfc-ink3);
  margin-bottom:8px;
}

.campo input{
  width:100%;
  padding:13px 16px;
  border:var(--borde-campo) solid var(--nfc-border);
  border-radius:var(--radio);
  font:inherit;
  font-size:16px;             /* 16px evita que el iPhone haga zoom */
  color:inherit;
  background:var(--papel);
  transition:border-color .12s;
}

/* Al enfocar, el borde se vuelve negro y grueso. Sin anillos de color:
   el contraste lo da el propio negro. */
/* Al enfocar aparece la sombra dura: el mismo gesto que sus botones. */
.campo input:focus{
  outline:none;
  box-shadow:var(--sombra);
}

.campo input::placeholder{color:#a5a5a6}

.campo input:disabled{
  background:#f5f5f5;
  color:var(--suave);
  cursor:not-allowed;
}

.campo input[aria-invalid="true"]{
  border-color:var(--nfc-red);
  box-shadow:3px 3px 0 var(--nfc-red);
}

.campo__ayuda{
  font-size:12px;
  color:var(--suave);
  margin-top:8px;
  letter-spacing:.02em;
}

.campo__error{
  font-size:12px;
  font-weight:700;
  color:var(--error);
  margin-top:8px;
  letter-spacing:.04em;
}
.campo__error:empty{display:none}

.campo__cabecera{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.campo__cabecera label{margin:0}

/* Ver / ocultar la contraseña --------------------------------------
 *
 * Buena práctica (NIST 800-63B): ver lo que se escribe reduce los fallos
 * de tecleo, sobre todo en el móvil. Empieza SIEMPRE oculta: quien esté
 * en el mostrador con gente detrás decide él si la enseña.
 */

.campo--clave{position:relative}
.campo--clave input{padding-right:54px}

/* El input se envuelve en su propia caja, y el botón se coloca respecto
   a ESA caja, no respecto al campo entero.
 *
 * Antes se calculaba a mano cuánto ocupaba lo que hay debajo (la ayuda,
 * el medidor de fuerza, el error). Cualquier cambio de esos elementos
 * descolocaba el botón, y así fue: en la pantalla de registro quedó 6px
 * más arriba. Envolviendo el input, el navegador lo centra solo y deja
 * de importar lo que haya debajo.
 *
 * La caja la crea ver-clave.js al poner el botón. */
.campo--clave .caja-input{position:relative; display:block}

.ojo{
  position:absolute;
  right:1px;
  top:0;
  bottom:0;
  margin:auto 0;      /* centrado vertical exacto, sin números */
  height:52px;
  width:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  color:var(--nfc-ink3);
  border-radius:8px;
}

.ojo:hover{color:var(--nfc-ink); background:var(--nfc-warm)}

.ojo:focus-visible{
  outline:2px solid var(--negro);
  outline-offset:-2px;
}

.ojo svg{width:20px; height:20px; display:block}

.ojo .cerrado{display:none}
.ojo[aria-pressed="true"] .abierto{display:none}
.ojo[aria-pressed="true"] .cerrado{display:block}

/* Botón -----------------------------------------------------------
 *
 * El botón Adidas: negro, rectangular, mayúsculas muy separadas y una
 * flecha a la derecha que se desplaza al pasar por encima.
 */

.boton{
  width:100%;
  min-height:52px;
  padding:15px 20px;
  border:var(--borde) solid var(--nfc-border);
  border-radius:var(--radio-caja);
  background:var(--nfc-accent);
  color:var(--nfc-ink);
  box-shadow:var(--sombra);
  font:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  /* El texto a la izquierda y la flecha a la derecha, como los suyos. */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transition:background .12s;
  position:relative;
}

.boton:hover:not(:disabled){
  background:var(--nfc-blue);
  color:var(--nfc-paper);
  box-shadow:var(--sombra-alta);
}

/* Se hunde y pierde la sombra: exactamente su .nfc-press:active */
.boton:active:not(:disabled){transform:translate(4px,4px); box-shadow:none}

.boton:focus-visible{outline:3px solid var(--nfc-blue); outline-offset:3px}

.boton:disabled{
  background:var(--nfc-warm);
  color:var(--nfc-ink3);
  cursor:not-allowed;
  box-shadow:none;
  transform:translate(2px,2px);
}

/* La flecha. Se desplaza a la derecha al pasar por encima: es el gesto
   que más se repite en su web. */
.boton__flecha{
  flex:none;
  width:28px;
  height:10px;
  transition:transform .18s ease-out;
}
.boton:hover:not(:disabled) .boton__flecha{transform:translateX(5px)}

/* Botón secundario: fondo blanco, borde negro. */
.boton--claro{
  background:var(--blanco);
  color:var(--negro);
  box-shadow:inset 0 0 0 1px var(--negro);
}
.boton--claro:hover:not(:disabled){background:#f2f2f2}

/* Avisos ----------------------------------------------------------- */

.aviso{
  padding:14px 16px;
  border:var(--borde) solid var(--nfc-border);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  font-size:14px;
  font-weight:700;
  margin-bottom:24px;
}
.aviso:empty{display:none}

.aviso--error{background:var(--nfc-red); color:var(--nfc-paper)}

.aviso--bien{background:var(--nfc-green); color:var(--nfc-paper)}

/* Pie -------------------------------------------------------------- */

.pie{
  margin:32px 0 0;
  text-align:center;
  font-size:14px;
  color:var(--suave);
}

/* Los enlaces van subrayados: en Adidas el subrayado es parte del
   estilo, no un adorno. */
a{
  color:var(--negro);
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:700;
}
a:hover{color:var(--nfc-blue)}

.enlace-suave{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Fuerza de la contraseña ------------------------------------------ */

.fuerza{
  display:flex;
  gap:3px;
  margin-top:10px;
}
.fuerza i{
  flex:1;
  height:8px;
  background:var(--nfc-warm);
  border:1.5px solid var(--nfc-border);
  border-radius:999px;
  transition:background .2s;
}
.fuerza i.on{background:var(--nfc-green)}

/* Móvil ------------------------------------------------------------ */

@media (max-width:480px){
  body{padding:0; align-items:stretch}
  .caja{
    max-width:none;
    min-height:100vh;
    padding:40px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  h1{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}