/* Estilos base */
:root{
  --bg:#0f172a; /* slate-900 */
  --card:#111827; /* gray-900 */
  --border:#1f2937; /* gray-800 */
  --text:#e5e7eb; /* gray-200 */
  --muted:#9ca3af; /* gray-400 */
  --primary:#6366f1; /* indigo-500 */
  --danger:#ef4444; /* red-500 */
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10}
.app-header h1{margin:0;font-size:18px;letter-spacing:.3px}
.container{max-width:980px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px}
.hidden{display:none}
.muted{color:var(--muted);margin-top:-6px}

/* Nav */
#top-nav{display:flex;flex-wrap:wrap;gap:8px}
.nav-btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.nav-btn.active{border-color:var(--primary);color:#fff}
.nav-btn.danger{border-color:var(--danger);color:#fff}

/* Forms */
label{display:block;margin:10px 0 6px}
input,select,button{font:inherit}
input,select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#0b1220;color:var(--text)}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.inline-form input,.inline-form select{flex:1 1 220px}
button.primary{background:var(--primary);border:1px solid var(--primary);color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer}

/* Lists & KPI */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#0b1220;border:1px solid var(--border);padding:14px;border-radius:10px}
.kpi-title{display:block;color:var(--muted);font-size:13px}
.kpi-value{font-size:22px;font-weight:700}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#0b1220;margin-bottom:8px}
.badge{padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.item-actions{display:flex;gap:6px}
.icon-btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:8px;cursor:pointer}

/* Footer */
.app-footer{color:var(--muted);text-align:center;padding:24px}

@media (max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}