/* gate.css - sistema visual compartido del portal de maquinon.
   Un solo acento (azul Arch), esquinas rectas en todo, mono para datos. */

@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/geist-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:      #05070a;
  --bg-2:    #0a0e13;
  --line:    #1e2632;
  --line-hi: #34404f;
  --tx:      #dfe4ea;
  --tx-2:    #8a94a3;
  --tx-3:    #5a6472;
  --accent:  #1793d1;              /* el unico acento */
  --accent-ink: #03121b;           /* texto sobre el acento: 5.6:1 */
  --danger:  #ff6b5e;

  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* curvas fuertes; las nativas de CSS son demasiado flojas */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);

  --z-bg: 0; --z-scrim: 1; --z-ui: 10; --z-fx: 50;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark}
body{min-height:100dvh;background:var(--bg);color:var(--tx);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:var(--accent-ink)}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}

/* ---------- capas de fondo ---------- */
#ascii{position:fixed;inset:0;z-index:var(--z-bg);display:block}
.scrim{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none}
/* grano y lineas de barrido: solo en capas fijas, nunca en contenedores que hacen scroll */
.scrim::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}

/* ---------- tipografia ---------- */
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--tx-2)}
.accent{color:var(--accent)}

/* ---------- campos ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:12px;color:var(--tx-2)}
.input{width:100%;height:48px;padding:0 14px;background:rgba(8,11,16,.78);
  border:1px solid var(--line-hi);border-radius:0;outline:0;font-family:var(--mono);font-size:15px;
  transition:border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out),background 180ms var(--ease-out)}
.input::placeholder{color:var(--tx-3)}
.input:focus{border-color:var(--accent);background:rgba(10,15,21,.92);
  box-shadow:inset 3px 0 0 var(--accent)}
.input[aria-invalid="true"]{border-color:var(--danger)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;
  border-radius:0;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  transition:transform 160ms var(--ease-out),background 180ms var(--ease-out),color 180ms var(--ease-out),
             border-color 180ms var(--ease-out),opacity 180ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border:1px solid var(--line-hi);color:var(--tx)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled){background:#2aa3e0}
  .btn-ghost:hover{border-color:var(--tx-2)}
}
.btn:focus-visible,.input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- entradas escalonadas ---------- */
.in{opacity:0;transform:translateY(10px);filter:blur(3px);
  animation:in 520ms var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 55ms + var(--base,0ms))}
@keyframes in{to{opacity:1;transform:none;filter:blur(0)}}

@media (prefers-reduced-motion:reduce){
  .in{animation:fade 200ms ease forwards;transform:none;filter:none}
  @keyframes fade{to{opacity:1}}
}