/* Base visual compartida: negro verdoso, verdes esmeralda de HUD, líneas finas y brillo suave. */
:root {
  --bg: #010805; --panel: rgba(2, 16, 9, .78); --line: rgba(34, 255, 136, .2); --line2: rgba(34, 255, 136, .5);
  --ink: #e2fff0; --mute: #72b394; --dim: #3f745b;
  --violet: #b44dff; --green: #22ff88; --mint: #8dffc4; --orange: #ff9f1a; --red: #ff2d7a;
  --sans: "SF Pro Display", "Helvetica Neue", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
/* sin barras de desplazamiento visibles: el contenido se sigue desplazando con rueda, trackpad o dedo */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 0.8125rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; position: relative; }
#bg { position: fixed; inset: 0; z-index: 0; opacity: .8; pointer-events: none; }
body > *:not(#bg):not(.frame):not(.toast):not(.taskpop):not(dialog) { position: relative; z-index: 1; }
/* viñeta suave encima de todo */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .55) 100%); }

.ht { font-family: var(--sans); font-weight: 300; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; line-height: 1.1; display: inline-block; }
.ht.num { font-family: var(--mono); font-weight: 300; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
button, input { font: inherit; color: inherit; }

/* botones: línea fina con esquinas de visor */
.btn {
  appearance: none; cursor: pointer; position: relative; margin: 3px; padding: 0.5625rem 0.875rem; border: 1px solid var(--c, var(--green)); color: var(--c, var(--green)); background: rgba(34, 255, 136, .04);
  --c: var(--green); font: 600 0.6875rem var(--sans); letter-spacing: .16em; text-transform: uppercase; border-radius: 2px; transition: background .15s, box-shadow .15s;
  box-shadow: inset 0 0 0.875rem rgba(34, 255, 136, .08);
}
.btn:hover { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0.875rem color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
.btn:focus-visible { outline: 1px dashed var(--mint); outline-offset: 0.25rem; }
.btn.warn { --c: var(--orange); background: rgba(255, 159, 26, .05); }
.btn.bad { --c: var(--red); background: rgba(255, 45, 122, .05); }
.btn.sec { --c: var(--violet); background: rgba(180, 77, 255, .06); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

input[type=text], input[type=password], input[type=url] {
  width: 100%; background: rgba(0, 12, 6, .8); color: var(--ink); border: 1px solid var(--line2); border-radius: 2px; padding: 0.6875rem 0.75rem; font: 0.9375rem var(--sans); letter-spacing: .02em;
}
input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 1.125rem rgba(34, 255, 136, .35); }
label { display: block; margin: 1.125rem 0 0.5rem; color: var(--mute); text-transform: uppercase; letter-spacing: .2em; font-size: 0.625rem; }

/* ojo para ver la contraseña */
.pw { position: relative; }
.pw input { padding-right: 2.875rem; }
.eye { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 2.5rem; display: grid; place-items: center; border: 0; background: transparent; color: var(--mute); cursor: pointer; border-radius: 2px; }
.eye:hover { color: var(--green); background: rgba(34, 255, 136, .08); }
.eye:focus-visible { outline: 1px dashed var(--mint); outline-offset: -2px; }
.eye .slash { opacity: 0; }
.eye.on { color: var(--green); }
.eye.on .slash { opacity: 1; }

/* pantallas de entrada */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.gate .box { width: min(26.25rem, 100%); padding: 1.875rem 1.625rem; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 0 3.75rem rgba(34, 255, 136, .16), inset 0 0 2.5rem rgba(34, 255, 136, .05); position: relative; }
.gate .box::before, .gate .box::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid var(--green); }
.gate .box::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.gate .box::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.gate p { color: var(--mute); margin: 0.625rem 0 0; }
.gate .err { margin: 1rem 0 0; padding: 0.625rem 0.75rem; color: var(--red); border: 1px solid var(--red); background: rgba(255, 45, 122, .08); }
.gate .go { width: 100%; margin: 1.5rem 0 0; padding: 0.8125rem; }
.gate small { display: block; margin-top: 0.375rem; color: var(--dim); }
.gate .logo { margin-bottom: 0.875rem; display: grid; gap: 0.375rem; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.gate .alt { display: block; margin: 1.25rem 0 0; text-align: center; color: var(--dim, #7fae95); font-size: 0.8125rem; text-decoration: none; letter-spacing: .04em; }
.gate .alt:hover, .gate .alt:focus-visible { color: var(--mint); text-decoration: underline; outline: none; }
.gate small b { color: var(--mint); font-weight: 600; }