/* Colores (claro y oscuro), letras, botones, campos y pantalla de inicio de sesión. */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --surface2:#f9fafb; --line:#dfe3e8; --fg:#17202a; --muted:#5f6b78;
  --orange:#e8590c; --orange-hi:#ff8a3d; --orange-fg:#ffffff; --orange-soft:#fff0e6;
  --side:#14181d; --side-fg:#c9d1d9; --side-act:#232a32;
  --ok:#2b8a3e; --ok-soft:#e6f4ea; --bad:#c92a2a; --bad-soft:#fdecec; --warn:#b26a00; --warn-soft:#fff4dc;
  --sky:#1c7ed6; --sky-soft:#e3f0fc;
  --seat-free:#ffffff; --seat-free-line:#b8c1cb; --seat-sold:#5c6670; --seat-sold-fg:#ffffff;
  --seat-lock:#f6c344; --seat-part:#a5d0f5; --seat-part-line:#4b9be0;
  --scrim:rgba(12,16,20,.5);
  --f-brand:"Sora","Barlow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#101418; --surface:#181e24; --surface2:#1d242b; --line:#2b343d; --fg:#e8edf1; --muted:#97a3ae;
  --orange:#ff8a3d; --orange-hi:#ffa463; --orange-fg:#1d0d00; --orange-soft:#3a2312;
  --side:#0b0e11; --side-fg:#b9c2cb; --side-act:#1b2128;
  --ok:#69db7c; --ok-soft:#173222; --bad:#ff8787; --bad-soft:#3a1d1d; --warn:#ffc35a; --warn-soft:#3a2c12;
  --sky:#74c0fc; --sky-soft:#12293d;
  --seat-free:#1d242b; --seat-free-line:#4a5561; --seat-sold:#4a535c; --seat-sold-fg:#d6dce1;
  --seat-lock:#c99a2a; --seat-part:#1f4a6e; --seat-part-line:#4b9be0;
  --scrim:rgba(0,0,0,.6); color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.45}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border-radius:9px;border:1px solid var(--line);background:var(--surface);padding:9px 16px;font-weight:600}
button:hover:not(:disabled){border-color:var(--orange)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--orange);border-color:var(--orange);color:var(--orange-fg)}
button.primary:hover:not(:disabled){background:var(--orange-hi);border-color:var(--orange-hi)}
button.danger{color:var(--bad);border-color:var(--bad)}
button.danger.solid{background:var(--bad);color:#fff}
button.ghost{background:none;border-color:transparent}
button.big{padding:13px 20px;font-size:17px}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 22%,transparent)}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
label.f input,label.f select,label.f textarea{font-size:16px;font-weight:500;color:var(--fg)}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.vz{font-family:var(--f-brand);font-weight:800;letter-spacing:.04em}.vz b{color:var(--orange)}

/* ===== Login ===== */
#login{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(1200px 600px at 20% -10%,color-mix(in srgb,var(--orange) 16%,transparent),transparent),var(--bg)}
.login-card{width:min(400px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:0 20px 50px rgba(0,0,0,.12);display:grid;gap:14px}
.login-card .brand{display:flex;align-items:center;gap:10px;font-size:24px}
.login-card h1{font-family:var(--f-disp);font-size:30px;margin:4px 0 0;line-height:1}
.err{background:var(--bad-soft);color:var(--bad);padding:9px 12px;border-radius:9px;font-size:14px}