/* ─────────────────────────────────────────────────────────────────────────
   HUBJARVIS — sistema visual.

   Punto de vista: INSTRUMENTO. Esto no es una web de producto, es el panel de
   una máquina: se lee de un vistazo, no adorna. De Linear se toma la densidad
   precisa y el craft del detalle; de Stripe, la base monocroma con UN acento y
   el aire; de Apple HIG, que la interfaz se aparte para dejar ver el dato.

   Firma que se repite: la REGLA DE TICKS (marcas de medición) y el renglón de
   instrumento — etiqueta chica arriba, dato grande en mono, nota gris abajo.

   Tipografía: sans del sistema para hablar, MONO para todo lo medido. La voz
   viene de esa mezcla, no de una fuente descargada (nada externo se carga acá).

   Color 60-30-10: 60% papel/superficie, 30% líneas y texto suave, 10% jade.
   Cada acento tiene su versión VIVA (decorar) y su TINTA (leer, ≥4.5:1 medido).
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* superficie */
  --papel:#f4f5f7;
  --superficie:#ffffff;
  --superficie-2:#fafbfc;
  --linea:#e2e5ec;
  --linea-fuerte:#cdd3de;

  /* tinta */
  --texto:#14171f;
  --suave:#5b6474;
  --tenue:#8b93a3;

  /* acentos: vivo para decorar, tinta para LEER */
  --jade:#17b47f;         --jade-tinta:#0a6b4a;   --jade-piso:#e8f7f1;
  --rojo:#e5484d;         --rojo-tinta:#b4232a;   --rojo-piso:#fdecec;
  --ambar:#e0b13f;        --ambar-tinta:#7e5c06;  --ambar-piso:#fdf5e3;

  /* forma */
  --r-caja:12px; --r-campo:9px; --r-pastilla:999px;
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.14);

  /* tipografía: escala 1.25 desde 16 */
  --t-mini:12px; --t-chico:13px; --t-base:16px; --t-medio:20px;
  --t-grande:25px; --t-mayor:31px; --t-titan:39px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --papel:#0c0f16;
    --superficie:#141924;
    --superficie-2:#182031;
    --linea:#222938;
    --linea-fuerte:#333c50;

    --texto:#e9ecf3;
    --suave:#949cad;
    --tenue:#6d768a;

    --jade:#2bd79a;       --jade-tinta:#2bd79a;   --jade-piso:#0d2b22;
    --rojo:#ff6b6b;       --rojo-tinta:#ff8b8b;   --rojo-piso:#2c1517;
    --ambar:#f0c66a;      --ambar-tinta:#f0c66a;  --ambar-piso:#2a2114;

    --sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font:var(--t-base)/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* el foco de teclado SIEMPRE se ve — se navega sin mouse */
:focus-visible{
  outline:2px solid var(--jade-tinta);
  outline-offset:2px;
  border-radius:4px;
}

/* ── la firma: regla de ticks ─────────────────────────────────────────── */
.regla{
  height:9px;
  border-top:1px solid var(--linea-fuerte);
  background-image:repeating-linear-gradient(
    to right, var(--linea-fuerte) 0 1px, transparent 1px 8px);
  background-repeat:no-repeat;
  background-size:100% 4px;
  opacity:.75;
}
.regla.corta{max-width:96px}

/* ── el renglón de instrumento (primitiva que se repite) ──────────────── */
.etiqueta{
  display:block;
  font:600 var(--t-mini)/1.3 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tenue);
}
.dato-grande{
  font:600 var(--t-mayor)/1.1 var(--mono);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  margin-top:6px;
}
.nota{color:var(--suave);font-size:var(--t-chico);margin-top:6px}

/* ── superficies ──────────────────────────────────────────────────────── */
.tarjeta{
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-caja);
  padding:20px;
}

/* ── controles ────────────────────────────────────────────────────────── */
.campo{display:block;margin-bottom:18px}
.campo .etiqueta{margin-bottom:8px}

.dato{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  background:var(--superficie-2);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--r-campo);
  color:var(--texto);
  font:var(--t-base)/1.4 var(--sans);
  transition:border-color .15s ease, background .15s ease;
}
.dato:hover{border-color:var(--tenue)}
.dato:focus{
  background:var(--superficie);
  border-color:var(--jade-tinta);
  outline:none;
  box-shadow:0 0 0 3px var(--jade-piso);
}

/* el código de 6 dígitos se lee como instrumento, no como texto */
.dato.codigo{
  font:600 var(--t-grande)/1.2 var(--mono);
  letter-spacing:.34em;
  text-indent:.34em;      /* compensa el espacio que el tracking deja al final */
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.dato.codigo::placeholder{color:var(--tenue);letter-spacing:.34em}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:12px 20px;
  background:var(--texto);color:var(--papel);
  border:1px solid transparent;border-radius:var(--r-campo);
  font:600 var(--t-base)/1 var(--sans);
  cursor:pointer;
  transition:opacity .15s ease, transform .06s ease;
}
.boton:hover{opacity:.88}
.boton:active{transform:translateY(1px)}
.boton.secundario{
  background:transparent;color:var(--texto);border-color:var(--linea-fuerte);
}

/* ── avisos ───────────────────────────────────────────────────────────── */
.error{
  margin:0 0 18px;padding:11px 14px;
  background:var(--rojo-piso);
  border:1px solid var(--rojo);
  border-left-width:3px;
  border-radius:var(--r-campo);
  color:var(--rojo-tinta);
  font-size:var(--t-chico);
}
.pista{color:var(--suave);font-size:var(--t-chico);margin:-8px 0 20px}

/* ── el marco de entrar / alta ────────────────────────────────────────── */
.escena{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
}
.panel{width:100%;max-width:400px}

.marca{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.marca .pulso{
  width:9px;height:9px;border-radius:50%;
  background:var(--jade);flex:none;
  box-shadow:0 0 0 3px var(--jade-piso);
}
.marca h1{
  margin:0;
  font:600 var(--t-medio)/1 var(--mono);
  letter-spacing:.02em;
}

.panel h2{
  margin:22px 0 6px;
  font:600 var(--t-grande)/1.15 var(--sans);
  letter-spacing:-.02em;
  text-wrap:balance;
}
.panel .bajada{
  margin:0 0 26px;color:var(--suave);font-size:var(--t-chico);
  max-width:34ch;text-wrap:pretty;
}

.pie-panel{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--linea);
  color:var(--tenue);font-size:var(--t-mini);
}
.pie-panel code{
  font-family:var(--mono);font-size:11px;
  background:var(--superficie-2);border:1px solid var(--linea);
  border-radius:5px;padding:1px 5px;
}

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