/* ========== Tokens ========== */
:root{
  --bg:#0f111f;
  --bg-gradient:
    radial-gradient(1200px 800px at 80% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(8,145,178,.08), transparent 60%),
    #0f111f;
  --surface:#181c2e; --surface-soft:#1f2338; --surface-raised:#232941; --surface-glass:rgba(31,36,56,.72);
  --text:#f8fafc; --text-muted:#cbd5f5; --text-subtle:rgba(203,213,245,.72);

  --brand:#6366f1; --brand-strong:#4338ca; --brand-soft:rgba(99,102,241,.35); --brand-contrast:#fff;

  --border:rgba(255,255,255,.08);
  --shadow-raised:12px 12px 24px rgba(4,7,19,.65), -10px -10px 24px rgba(63,69,112,.20);
  --shadow-raised-strong:16px 16px 28px rgba(4,7,19,.75), -12px -12px 28px rgba(63,69,112,.28);
  --shadow-pressed:inset 8px 8px 16px rgba(10,12,24,.8), inset -8px -8px 16px rgba(63,69,112,.25);
  --radius-md:16px; --radius-lg:22px; --radius-xl:28px;
}

html,body{height:100%;background:var(--bg-gradient);color:var(--text);font:16px/1.55 Inter,Segoe UI,system-ui,sans-serif}
a{color:var(--brand)}
.container{max-width:1200px;margin:0 auto;padding:22px}

/* ========== Componentes ========== */
.card{background:var(--surface-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:18px;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-raised-strong)}

.kpi{display:grid;gap:8px}
.kpi .label{color:var(--text-subtle);font-weight:600}
.kpi .value{font-size:1.35rem;font-weight:700}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-md);padding:10px 18px;font-weight:600;box-shadow:var(--shadow-raised);transition:all .18s;border:0;background:var(--surface-raised);color:var(--text)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised-strong)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-pressed)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:var(--brand-contrast)}

.form input,.form select,.form textarea{
  width:100%;background:var(--surface);color:var(--text);border:none;border-radius:var(--radius-md);
  box-shadow:var(--shadow-pressed);padding:14px 16px
}
.form input:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--brand-soft),var(--shadow-pressed)}

.app-header{position:sticky;top:0;background:var(--surface-glass);backdrop-filter:blur(18px);border-radius:0 0 var(--radius-xl) var(--radius-xl);z-index:20;border-bottom:1px solid var(--border)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:18px}
.app-card{display:grid;place-items:center;gap:10px;padding:18px;cursor:pointer}

#login-backdrop{position:fixed;inset:0;background:rgba(12,15,32,.7);backdrop-filter:blur(14px);z-index:9999}
#login-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:10000}
#login-modal[hidden],#login-backdrop[hidden]{display:none!important}
.login-card{width:min(440px,92vw);background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--shadow-raised-strong);padding:26px}
.error{color:#f87171;font-size:.9rem;min-height:1.2em}

.fade-in{animation:fade .25s ease both, slide .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateY(6px)}to{transform:translateY(0)}}

body.auth-locked .gate{display:none!important}