:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --primary:#1d4ed8;
  --primary2:#2563eb;
  --soft:#eaf0ff;
  --shadow:0 14px 35px rgba(2, 20, 58, .10);
  --sidebar1:#0b2a52;
  --sidebar2:#0a2446;
}
html[data-theme="oscuro"]{
  --bg:#0b1220;
  --card:#0f1a2e;
  --text:#e6edf7;
  --muted:#9bb0cf;
  --line:#1f2a44;
  --soft:#0f2a57;
  --shadow:0 14px 35px rgba(0,0,0,.35);
  --sidebar1:#071a33;
  --sidebar2:#06162c;
}
body{background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:280px; flex:0 0 280px;
  background: linear-gradient(180deg,var(--sidebar1),var(--sidebar2));
  padding:22px 18px;
  color:#e8f0ff;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.brand-iso{width:42px; height:42px; object-fit:contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));}
.brand-title{font-weight:700; letter-spacing:.3px;}
.clock-card{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px 14px;
  margin:14px 0 10px;
}
.clock-date{font-size:.92rem; opacity:.9;}
.clock-time{font-size:1.05rem; font-weight:700;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  color:#e8f0ff; text-decoration:none;
  padding:12px 14px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin:10px 0;
}
.nav-item:hover{background:rgba(255,255,255,.10);}
.badge-dot{width:10px;height:10px;border-radius:99px;background:#ef4444;margin-left:auto; box-shadow:0 0 0 4px rgba(239,68,68,.15);}
.user-card{
  margin-top:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px 14px;
}
.user-name{font-weight:800; margin-top:4px;}
.user-dept{font-size:.9rem; opacity:.9;}
.muted{color:var(--muted);}
.nav-group{margin-top:14px;}
.btn-soft{
  background: rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.40);
  color:#0b2a52;
  border-radius:14px;
  padding:12px 12px;
  font-weight:800;
  letter-spacing:.4px;
}
.btn-soft:hover{filter:brightness(.98);}
.btn-logout{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  border-radius:14px;
  padding:12px 12px;
  font-weight:700;
}
.main{flex:1; padding:18px 22px 34px;}
.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.theme-toggle{
  border:0; border-radius:999px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding:10px 14px;
  font-weight:700;
  color:var(--text);
}
.cardx{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.kpi{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.kpi .kcard{padding:14px 16px;}
.kpi .klabel{font-weight:700; color:var(--muted); font-size:.92rem;}
.kpi .kval{font-weight:900; font-size:1.55rem;}
.search-box{padding:14px 16px;}
.pills{display:flex; gap:10px; flex-wrap:wrap; padding:10px;}
.pill{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: transparent;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
}
.pill.active{background: var(--primary); color:#fff; border-color: transparent;}
.minuta-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
@media (max-width: 1400px){.minuta-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 1100px){.minuta-grid{grid-template-columns:repeat(2,1fr)} .kpi{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 780px){.sidebar{display:none} .minuta-grid{grid-template-columns:1fr} .kpi{grid-template-columns:1fr}}
.minuta-card{padding:16px;}
.minuta-title{font-weight:900; font-size:1.05rem; margin-bottom:12px;}
.minuta-meta{display:grid; grid-template-columns:120px 1fr; row-gap:8px; column-gap:10px; font-size:.92rem;}
.minuta-meta b{color:var(--text);}
.btn-primaryx{
  background: linear-gradient(180deg,var(--primary2),var(--primary));
  border:0;
  border-radius:12px;
  padding:11px 12px;
  font-weight:900;
  color:#fff;
}
.btn-primaryx:hover{filter:brightness(1.02);}