/* EDISON · fundamentos compartidos: color, tipografía y foco. */
/* Inter (SIL OFL 1.1, servida desde este PC): la alternativa libre más cercana a SF Pro. */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --void: #000;
  --bg: #0a0b0d;          /* campo */
  --panel: #111316;       /* panel: +1 paso de luz */
  --raised: #171a1e;      /* elevado */
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .2);
  --text: #f2f3f5;
  --text-2: rgba(242, 243, 245, .66);
  --text-3: rgba(242, 243, 245, .52);
  --amber: #ffb340;       /* presencia de Edison: como mucho un 8 % de la pantalla */
  --amber-hi: #ffd79a;
  --amber-lo: rgba(255, 179, 64, .13);
  --cool: #6fa0ff;        /* azul EMP aclarado: estados funcionales y datos en vivo */
  --cool-lo: rgba(111, 160, 255, .13);
  --emp-blue: #1f4fff;
  --ok: #5ee0b0;
  --bad: #ff4245;         /* solo alertas */
  --bad-lo: rgba(255, 66, 69, .13);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  /* Grano finísimo (textura precalculada): rompe las bandas de los degradados y da textura de material. */
  --mono: "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --enter: cubic-bezier(.05, .7, .1, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto; letter-spacing: -.006em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--amber-hi); }
:focus-visible { outline: 1.5px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Emparejamiento: la única pantalla de acceso, y solo la primera vez en cada dispositivo. */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; overflow: auto; background: radial-gradient(120% 70% at 50% 0%, rgba(255, 179, 64, .07), transparent 60%), rgba(0, 0, 0, .96); backdrop-filter: blur(10px); }
.gate-card { width: min(390px, 100%); min-width: 0; box-sizing: border-box; display: grid; gap: 16px; padding: 30px 24px 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.gate-kicker { margin: 0; font: 500 13px/1.3 var(--sans); color: var(--text-3); }
.gate h1 { margin: -6px 0 0; font: 700 34px/1.05 var(--display); letter-spacing: -.02em; }
.gate-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.gate-steps b { color: var(--text); font-weight: 600; }
.gate label { display: grid; gap: 8px; font: 500 13px/1.3 var(--sans); color: var(--text-2); }
.gate input { width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; font-size: 16px; color: var(--text); }
.gate input[name="code"] { font: 600 30px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .3em; text-align: center; padding: 16px 8px; }
.gate button { min-height: 50px; padding: 12px; border: 0; border-radius: 999px; background: var(--amber); color: #1a1206; font: 600 16px/1 var(--sans); letter-spacing: -.01em; }
.gate button:disabled { opacity: .5; }
.gate-error { margin: 0; color: #ff8a8c; font-size: 14px; }
.gate-alt summary { cursor: pointer; font-size: 13px; color: var(--text-3); }
.gate-alt[open] { display: grid; gap: 10px; }
.gate-alt button { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: var(--text); }
.gate small { color: var(--text-3); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}