/*
 * La identidad de nyx-wallet.aosfactory.com, copiada de `app/globals.css` y
 * `app/chrome.tsx` de `nyx-wallet-website`. Los valores NO se reinterpretan: los
 * tokens, el boton, la etiqueta, la pastilla, el logotipo y la cabecera son los de
 * produccion. Lo unico que se anade son los campos de formulario, que la web no
 * tiene, resueltos con los mismos tokens y el mismo radio que el boton.
 *
 * Tipografia autoalojada (woff2 del paquete `geist`, licencia OFL en
 * activos/GEIST-OFL-LICENSE.txt). Nada desde un CDN: la CSP es `default-src 'self'`.
 */

@font-face {
  font-family: Geist;
  src: url(activos/Geist-Variable.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url(activos/GeistMono-Variable.woff2) format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --background: #090b0b;
  --foreground: #f4f5f1;
  --primary: #c8f75a;
  --primary-foreground: #141a0c;
  --primary-hover: #b4ee78;
  --muted: #1b201d;
  --muted-foreground: #a4aba5;
  --border: #2b302b;
  --borde-verde: #2b3825;
  --borde-verde-medio: #38542b;
  --borde-verde-claro: #456734;
  --card: #141815;
  --secondary: #20251e;
  --ring: #c8f75a;
  --parrafo: #a5aca0;
  --entradilla: #a8ba9a;
  --titular-secundario: #7d8878;
  --etiqueta: #b3b9af;
  --radius: 1rem;
  --radio-boton: 7px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Geist, Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

p {
  line-height: 1.65;
  margin: 0;
}

h1,
h2 {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* El anillo de foco de la web: visible siempre, en el color del acento. */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 6px;
}

::selection {
  background: #c8f75a;
  color: #111;
}

/* ---- Cabecera y logotipo (componente `Brand` de chrome.tsx) ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #090d0bef;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--borde-verde);
}

.header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(560px, calc(100% - 32px));
  margin-inline: auto;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.brand-symbol {
  width: 57px;
  height: 52px;
  overflow: hidden;
  display: block;
}

/* La "N" de cristal se pinta con `screen` sobre el fondo oscuro: el PNG no tiene
   transparencia, y es el modo de mezcla el que le quita el negro. */
.brand-symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

.brand-name {
  font-size: 21px;
  letter-spacing: 4px;
  font-weight: 550;
  line-height: 1;
}

.brand-name > span {
  display: block;
  font-size: 9px;
  letter-spacing: 5.7px;
  margin-top: 7px;
  color: #a9bd9b;
}

/* ---- Estructura: movil primero, una columna estrecha ---- */

.envoltura {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.principal {
  flex: 1;
  width: min(560px, calc(100% - 32px));
  margin-inline: auto;
  padding: 36px 0 48px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--borde-verde);
  border-radius: var(--radius);
  padding: 28px 22px;
}

.pie {
  width: min(560px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 36px;
  color: var(--titular-secundario);
  font-size: 13px;
}

/* ---- Titulares, etiquetas y texto (los de la web) ---- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--etiqueta);
  margin: 0;
}

h1 {
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  font-weight: 450;
  color: var(--titular-secundario);
}

/* En los titulares, la parte resaltada va en el acento. */
h1 .resaltado {
  color: var(--primary);
}

.entradilla {
  color: var(--entradilla);
  font-size: 15px;
}

.factor-descripcion,
.campo-ayuda {
  color: var(--parrafo);
  font-size: 14px;
  margin: 0;
}

/* ---- Boton primario: el `.button` de la web, sin cambios ---- */

.button {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-foreground);
  min-height: 54px;
  padding: 14px 23px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  border-radius: var(--radio-boton);
  transition:
    transform 0.2s,
    background 0.2s;
}

.button:hover {
  background: var(--primary-hover);
}

.button.secundario {
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--borde-verde-medio);
}

.button.secundario:hover {
  background: var(--muted);
}

.button[disabled],
.enlace[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* Las acciones de segundo orden no compiten con la primaria. */
.enlace {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--entradilla);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.enlace:hover {
  color: var(--primary);
}

/* ---- Pastillas de estado: el `.pill` de la web ---- */

.pill {
  font-size: 10px;
  letter-spacing: 1px;
  border: 1px solid #3b482f;
  color: #c6ed8c;
  padding: 7px 11px;
  border-radius: 20px;
  display: inline-block;
}

.pill-inactivo {
  border-color: var(--border);
  color: var(--muted-foreground);
}

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

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo-etiqueta {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--etiqueta);
  margin: 0;
}

.entrada {
  min-height: 54px;
  padding: 14px 16px;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--borde-verde-medio);
  border-radius: var(--radio-boton);
  font-family: inherit;
  font-size: 16px;
}

.entrada:focus {
  border-color: var(--primary);
}

/* Los codigos y las claves, en Geist Mono: son datos, no prosa. */
.entrada-codigo,
.clave-valor {
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 6px;
  font-size: 20px;
}

.clave {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clave-valor {
  display: block;
  padding: 14px 16px;
  background: var(--background);
  border: 1px dashed var(--borde-verde-claro);
  border-radius: var(--radio-boton);
  color: var(--primary);
  letter-spacing: 3px;
  font-size: 17px;
  word-break: break-all;
}

/* ---- Lista de factores ---- */

.lista-factores {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.factor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.factor-texto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.factor-titulo {
  font-size: 19px;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--foreground);
}

.factor-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.factor-acciones {
  display: flex;
  gap: 10px;
}

.factor-acciones .button {
  flex: 1;
}

/* ---- Avisos, errores y esperas ---- */

.aviso,
.error,
.plazo {
  font-size: 14px;
  padding: 14px 16px;
  border-radius: var(--radio-boton);
  margin: 0;
}

.aviso {
  background: var(--muted);
  border: 1px solid var(--borde-verde-claro);
  color: var(--entradilla);
}

/* El error no se juega al color: lleva borde y fondo propios para no depender de el. */
.error {
  background: #241a1a;
  border: 1px solid #6b3a34;
  color: #f1d9d4;
  margin-bottom: 18px;
}

.plazo {
  background: var(--muted);
  border: 1px solid var(--borde-verde-medio);
  color: var(--foreground);
}

.cargando {
  margin-top: 16px;
  color: var(--muted-foreground);
  font-size: 14px;
}

/* ---- El QR ---- */

.qr {
  background: #f4f5f1;
  padding: 14px;
  border-radius: var(--radius);
  width: fit-content;
  margin-inline: auto;
}

.qr svg {
  display: block;
  width: min(232px, 60vw);
  height: auto;
  /* Los modulos son cuadrados: el suavizado los difumina y la camara falla mas. */
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

/* ---- Movimiento ---- */

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

/* ---- A partir de tableta, algo mas de aire ---- */

@media (min-width: 640px) {
  .header-inner {
    height: 88px;
    gap: 28px;
  }

  .brand-symbol {
    width: 66px;
    height: 58px;
  }

  .brand-name {
    font-size: 24px;
  }

  .tarjeta {
    padding: 34px 30px;
  }

  .factor {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .factor-acciones .button {
    flex: 0 0 auto;
  }
}