/* ======= Tokens base (tema oscuro por defecto) ======= */
:root{
  --bg:#0a0f1c;           /* página */
  --bg2:#0f172a;          /* topbar/side */
  --card:#111827;         /* tarjetas/fondos */
  --text:#e5e7eb;         /* texto */
  --muted:#94a3b8;        /* texto secundario */
  --brand:#10b981;        /* acento */
  --danger:#ef4444;
  --border:#1f2937;
}

/* ======= Reset mínimo + tipografía ======= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%;height:auto;display:block}

/* ======= Layout ======= */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.page{padding:18px 0 28px}

/* ======= Topbar y navegación ======= */
.topbar{
  background:var(--bg2);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
}
.topbar .container{
  display:flex; align-items:center; gap:16px; padding:12px 16px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{height:28px;width:auto;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.brand-fallback{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.06);font-weight:700}

.mainnav{display:flex; gap:8px; align-items:center; flex:1}
.navlink{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--text);border:1px solid transparent}
.navlink:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.navlink .ico{width:16px;height:16px;opacity:.9}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn-ghost.small{padding:6px 8px;border-radius:8px;background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-ghost.small:hover{background:rgba(255,255,255,.06)}
.btn-out{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--border)}
.btn-out:hover{outline:1px solid rgba(255,255,255,.1)}

/* ======= Comunes ======= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:var(--brand);color:#04140f;font-weight:600;border:1px solid transparent}
.btn:hover{filter:brightness(1.05)}
.chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(16,185,129,.12);color:#34d399;font-weight:700}

/* ======= Dashboard ======= */
.grid-dashboard{display:grid;gap:16px}
.dash-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.quick-grid{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.quick-card{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.quick-card:hover{outline:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.quick-card .ico.big{width:28px;height:28px;opacity:.95}

/* ======= Tablas básicas ======= */
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border)}
thead th{font-weight:600;color:var(--muted);text-transform:uppercase;font-size:12px;letter-spacing:.02em}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* ======= Footer ======= */
.site-footer{border-top:1px solid var(--border);padding:14px 0;margin-top:18px;opacity:.85}
.site-footer .container{display:flex;justify-content:space-between}

/* ======= Tema claro (auto o forzado) ======= */
@media (prefers-color-scheme: light) {
  :root:not(.theme-dark):not(.theme-light){
    --bg:#e9eef7; --bg2:#f2f5fb; --card:#ffffff; --text:#0b1220; --muted:#475569; --brand:#0f766e; --danger:#dc2626; --border:#dde3ee;
    background:#f6f8fc;
  }
}
.theme-light{
  --bg:#e9eef7; --bg2:#f2f5fb; --card:#ffffff; --text:#0b1220; --muted:#475569; --brand:#0f766e; --danger:#dc2626; --border:#dde3ee;
  background:#f6f8fc;
}
.theme-dark{ /* usa tokens por defecto */ }

/* Ajustes de contraste en claro */
.theme-light .navlink:hover{background:rgba(15,23,42,.05);border-color:var(--border)}
.theme-light .quick-card{background:#fff}
.theme-light .btn-ghost.small:hover{background:#eef2f7}
.theme-light .btn{ background: var(--brand); color:#053c31; }

/* ======= Responsive ======= */
@media (max-width:1100px){.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .dash-hero{flex-direction:column}
  .topbar .container{flex-wrap:wrap;gap:10px}
  .mainnav{flex-wrap:wrap}
  .quick-grid{grid-template-columns:1fr}
}