/* === Variables y tema === */
:root{
  --sc-blue:#0063ee;
  --sc-gray:#646464;
  --sc-black:#000000;
  --sc-purple:#5e13a6;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --bg:#0f1117;
  --panel:#1b1f2b;
  --panel-2:#222838;
  --border:#2a3142;
  --text:#e8eaf2;
  --muted:#9aa3b8;
  --link:#7aa9ff;
  --shadow:rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4f6fb;
  --panel:#ffffff;
  --panel-2:#f0f2f7;
  --border:#dbe0ec;
  --text:#1a1d28;
  --muted:#5b6478;
  --link:#0050c7;
  --shadow:rgba(20,30,60,.10);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.6;transition:background .25s,color .25s}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.ribbon{height:6px;background:linear-gradient(90deg,var(--sc-blue),var(--sc-gray),var(--sc-black),var(--sc-purple));background-size:400% 100%;animation:ribbon 20s linear infinite}
@keyframes ribbon{0%{background-position:0 0}100%{background-position:400% 0}}

.wrap{max-width:980px;margin:0 auto;padding:30px 22px 60px}
.hero{
  border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:22px 26px;margin-bottom:22px;position:relative;
}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--muted);font-weight:700}
h1{margin:6px 0 4px;font-size:26px;font-weight:800;letter-spacing:-.3px;background:linear-gradient(90deg,var(--sc-blue),var(--sc-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:20px;margin:16px 0 8px}
h3{font-size:16px;margin:14px 0 6px}
.lead{color:var(--muted);font-size:14px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:14px 0;box-shadow:0 6px 22px var(--shadow)}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;margin:8px 0}
.kv div:nth-child(odd){color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}

.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);color:var(--muted)}
.tag.blue{background:rgba(0,99,238,.12);color:#7aa9ff;border-color:rgba(0,99,238,.35)}
.tag.purple{background:rgba(94,19,166,.12);color:#c9a1ff;border-color:rgba(94,19,166,.35)}
.tag.ok{background:rgba(34,197,94,.12);color:#7de3a3;border-color:rgba(34,197,94,.35)}
.tag.warn{background:rgba(245,158,11,.12);color:#ffd182;border-color:rgba(245,158,11,.45)}
.tag.danger{background:rgba(239,68,68,.12);color:#ffa1a1;border-color:rgba(239,68,68,.55)}
:root[data-theme="light"] .tag.blue{color:#0050c7}
:root[data-theme="light"] .tag.purple{color:#5e13a6}
:root[data-theme="light"] .tag.ok{color:#15803d}
:root[data-theme="light"] .tag.warn{color:#a35c00}
:root[data-theme="light"] .tag.danger{color:#b42525}

input[type="text"], input[type="password"], input[type="email"], select{
  width:100%;padding:10px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  font-family:var(--sans);font-size:14px;
}
input:focus, select:focus{outline:2px solid var(--sc-purple);outline-offset:0}
label.field{display:block;margin:10px 0}
label.field .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;display:block}

button{font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;padding:10px 18px;border-radius:10px;border:1px solid transparent;transition:transform .15s ease, box-shadow .2s ease}
button.primary{background:linear-gradient(135deg,var(--sc-blue),var(--sc-purple));color:#fff;box-shadow:0 6px 18px rgba(94,19,166,.35)}
button.primary:hover{transform:translateY(-1px)}
button.primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
button.ghost{background:transparent;border-color:var(--border);color:var(--text)}
button.ghost:hover{border-color:var(--sc-purple)}
button.danger{background:rgba(239,68,68,.18);color:#ffa1a1;border-color:rgba(239,68,68,.55)}
:root[data-theme="light"] button.danger{color:#b42525}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{background:var(--panel-2);color:var(--text);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.6px}

.alert{padding:10px 14px;border-radius:8px;margin:10px 0;border-left:3px solid var(--sc-purple);background:rgba(94,19,166,.08);font-size:14px}
.alert.ok{border-color:var(--ok);background:rgba(34,197,94,.08)}
.alert.bad{border-color:var(--danger);background:rgba(239,68,68,.10)}
.hidden{display:none !important}

.user-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--border);font-size:13px}
.user-chip .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;background:linear-gradient(135deg,var(--sc-blue),var(--sc-purple))}

.theme-toggle{position:fixed;top:16px;right:16px;z-index:9999;width:42px;height:42px;border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 20px var(--shadow);transition:transform .25s ease}
.theme-toggle:hover{transform:rotate(20deg) scale(1.05);border-color:var(--sc-purple)}

code{font-family:var(--mono);background:var(--panel-2);border:1px solid var(--border);padding:1px 6px;border-radius:4px;font-size:.9em}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
@media (max-width:680px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{padding:14px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border)}
.stat .v{font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--sc-blue),var(--sc-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}