/* ══════════════════════════════════════════════════════════════════════════
   entrar.css · el acceso: token y PIN
   Ningún color escrito acá: todos salen de tokens.css.

   ESTO NO SE DISEÑÓ ACÁ. Es el `css/login.css` de Kiosco, medido y copiado
   valor por valor el 06/09/2026. Canu lo dijo sin vueltas: *«era copiar a
   Kiosco y agregarle el código de barras»*, y tenía razón — yo venía
   reconstruyendo a ojo desde una captura y errándole en algo distinto cada
   vuelta.

   Lo que se copia es el PATRÓN, reescrito acá y autocontenido: los nombres
   van en castellano --`.tarjeta`, no `.card`-- porque es la regla de este
   repo, y los colores salen de los tokens de Tienda, que ya tienen los
   mismos valores que los de ellos.

   Las medidas son las suyas, exactas:
     ancho del bloque ....... 380px
     tarjeta ................ 36px 32px, sombra 0 24px 60px -20px
     teclado ................ 3 columnas, 5px de hueco, 205px de ancho
     tecla .................. cuadrada, con la letra chica abajo del número
     puntos del PIN ......... 10px, dorados al llenarse
     ojo y confirmar ........ 44px, redondos
   ══════════════════════════════════════════════════════════════════════════ */

/* El halo dorado arriba: es lo que hace que la tarjeta no flote sobre un
   negro plano.

   Va en `.pantalla` y NO en el `body`, aunque Kiosco lo tenga en el body: acá
   la misma página lleva el acceso Y la app, y un `body` centrado con flex le
   rompe el armazón a la app cuando el acceso se esconde. */
.pantalla {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--e-6);
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, var(--borde-acento), transparent),
    var(--fondo);
}

/* Cada hijo lleva su ancho. Con `align-items: center` y sin esto, un `<p>` se
   encoge al ancho de su palabra más larga y el texto sale en una columna de
   una palabra por renglón. Medido el 06/09: la ayuda del PIN del dueño y el
   aviso quedaron así. */
.pantalla > * {
  width: 100%;
  max-width: 380px;
}

/* El campo del PIN existe para que el teclado del sistema no aparezca y para
   que el navegador guarde el valor: no se muestra, lo que se ve son los
   puntos. */
.pin-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── LA MARCA ─────────────────────────────────────────────────────────────
   El emblema circular va arriba del nombre. Todavía no está: es un archivo
   de la marca que no vive en este repo. Mientras no esté, el nombre ocupa
   solo ese lugar y la pantalla se ve SIN LOGO, no rota. */
.marca {
  text-align: center;
  margin-bottom: 14px;
}
.marca .marca-kfb {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  line-height: 1.15;
  display: inline-flex;
}
.marca .marca-producto {
  margin-left: 3px;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Sólo el token va en tarjeta. El PIN no: su teclado ya es un bloque
   sólido y meterlo adentro de una caja lo encierra dos veces. */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 36px 32px;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .4);
}

/* ── PASO 1 · EL TOKEN ────────────────────────────────────────────────── */
.chapa {
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 5px 14px;
  border-radius: var(--radio-full);
  border: 1px solid var(--borde-acento);
  background: var(--acento-suave);
  color: var(--acento-texto);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.titulo {
  margin: 0 0 6px;
  text-align: center;
  font-size: .92rem;
  font-weight: var(--peso-medio);
  letter-spacing: .02em;
  color: var(--texto);
}

.bajada {
  margin: 0 0 20px;
  text-align: center;
  font-size: .8rem;
  color: var(--texto-2);
}

.campo-token {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

/* Más grande, en mayúsculas y con las letras separadas: un código de doce
   caracteres se lee de un vistazo o no se lee. Eso mismo en el campo de un
   importe estaría mal. */
.campo-token input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.campo-token input:focus-visible { outline: none; box-shadow: var(--foco); }

/* SE LLAMA `ojo-token` Y NO `ojo` A PROPOSITO.
   `ojo` ya significa otra cosa en toda la app: es el TONO de un aviso --
   `entrarAvisar(texto, 'ojo')` pone `class="aviso ojo"`, y lo usan 8
   archivos con 17 llamadas--. Con el boton llamado `.ojo`, esta regla de
   44x44 redondo le caia encima a CADA aviso de ese tono: el cartel se
   convertia en un circulo de 44px con las palabras apiladas de a una, en
   vertical, y abajo de la tarjeta.
   Medido el 07/09/2026 en la rama de cupo lleno, que es donde primero se
   ve porque muestra dos avisos de tono `ojo` juntos.
   Se renombro el BOTON y no el tono: el tono es vocabulario de toda la app
   y el boton vive en un solo lugar. */
.ojo-token,
.confirmar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.ojo-token {
  border: 1px solid var(--borde);
  background: var(--superficie-alta);
  color: var(--texto-3);
}
.ojo-token:hover { color: var(--texto-2); }
.confirmar {
  border: none;
  background: linear-gradient(180deg, var(--acento), var(--acento-hondo));
  color: var(--sobre-acento);
  font-weight: var(--peso-fuerte);
  transition: filter var(--rapido), transform var(--rapido);
}
.confirmar:hover  { filter: brightness(1.08); }
.confirmar:active { transform: scale(.94); }
.ojo-token:focus-visible,
.confirmar:focus-visible { outline: none; box-shadow: var(--foco); }

.ayuda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 0;
  font-size: .74rem;
  color: var(--texto-3);
  text-align: center;
}

/* ── PASO 2 · EL PIN ──────────────────────────────────────────────────── */
.local-chapas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}
/* El puntito verde late: dice «este local está andando» sin una palabra. */
.local-pastilla {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--letra-titulo);
  font-size: 1.15rem;
  color: var(--texto);
}
.punto-vivo {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  animation: acceso-late 1.8s ease-in-out infinite;
}
@keyframes acceso-late {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgb(34 197 94 / .5); }
  50%      { opacity: .6; box-shadow: 0 0 0 4px rgb(34 197 94 / 0); }
}
.plan-chapa {
  padding: 3px 10px;
  border: 1px solid var(--borde-acento);
  border-radius: var(--radio-full);
  background: var(--superficie-alta);
  color: var(--acento-texto);
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Sin plan no hay chapa. Medido el 07/09: con el plan vacio quedaba una
   pastilla de 22px sin una letra adentro al lado del nombre del local -- se
   lee como algo que no cargo, no como algo que no aplica. */
.plan-chapa:empty { display: none; }

.sub {
  margin: 0 0 16px;
  text-align: center;
  font-size: .78rem;
  color: var(--texto-2);
}

.puntos {
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  margin-bottom: 10px;
  min-height: 10px;
}
.punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-acento);
  background: transparent;
  transition: background var(--rapido), border-color var(--rapido);
}
.punto.puesto {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 8px rgb(201 169 110 / .6);
  animation: acceso-punto .18s ease;
}
/* El PIN equivocado se ve antes de leerse: los puntos se ponen rojos y el
   bloque tiembla. */
.puntos.temblor { animation: acceso-tiembla .4s ease; }
.puntos.temblor .punto.puesto {
  background: var(--error);
  border-color: var(--error);
  box-shadow: 0 0 8px rgb(196 75 75 / .6);
}
@keyframes acceso-punto {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes acceso-tiembla {
  0%, 100% { transform: translateX(0); }
  12%  { transform: translateX(-9px); }
  28%  { transform: translateX(9px); }
  44%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  76%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
}

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 205px;
  margin: 0 auto 4px;
}

/* Las letras abajo del número no son adorno: el que se sabe el PIN como una
   palabra las busca. */
.tecla {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-alta);
  color: var(--texto);
  font: inherit;
  font-size: .92rem;
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido);
}
.tecla-letras {
  font-size: .5rem;
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  color: var(--texto-3);
}
.tecla:hover  { border-color: var(--borde-acento); }
.tecla:active { transform: scale(.94); }
.tecla:disabled { opacity: .35; cursor: not-allowed; }
.tecla:focus-visible { outline: none; box-shadow: var(--foco); }

.tecla.confirma {
  border: none;
  background: linear-gradient(180deg, var(--acento), var(--acento-hondo));
  color: var(--sobre-acento);
}
.tecla.confirma:hover { filter: brightness(1.08); }
.tecla.borra { color: var(--texto-2); }