/* AQUINTA Control Panel - UI PRO (sin librerías) */
:root{
  --bg:#070b18;
  --panel:#0c132b;
  --card:#0f1a3a;
  --card2:#0b1533;
  --text:#eef3ff;
  --muted:#aeb9de;
  --line:rgba(255,255,255,.08);
  --acc:#7aa2ff;
  --acc2:#7ef0b6;
  --warn:#ffd37a;
  --bad:#ff8b8b;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius:18px;
  --font: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(122,162,255,.22), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(126,240,182,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(255,211,122,.10), transparent 55%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(7,11,24,.92), rgba(7,11,24,.72));
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(135deg, rgba(122,162,255,1), rgba(126,240,182,.95));
  display:flex;align-items:center;justify-content:center;
  color:#061026;font-weight:900;letter-spacing:.5px;
  box-shadow: 0 12px 22px rgba(0,0,0,.35);
}
.brand-name{font-weight:900}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}
.top-actions{display:flex;gap:12px;align-items:center}
.user-pill{
  display:flex;gap:10px;align-items:center;
  padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.04)
}
.user-name{font-weight:800}
.user-role{font-size:12px;color:var(--muted);padding-left:10px;border-left:1px solid var(--line)}
/* Layout */
.layout{display:grid;grid-template-columns:270px 1fr;min-height:calc(100vh - 70px)}
.sidebar{
  border-right:1px solid var(--line);
  padding:14px;
  background:linear-gradient(180deg, rgba(12,19,43,.75), rgba(12,19,43,.45));
}
.nav-group-title{
  font-size:11px;
  color:rgba(174,185,222,.8);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 10px 6px;
}
.nav{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:14px;
  color:rgba(174,185,222,.92);
  margin-bottom:8px;border:1px solid transparent;
  background:transparent;
}
.nav:hover{
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-color:rgba(255,255,255,.06);
}
.nav.active{
  background:linear-gradient(135deg, rgba(122,162,255,.18), rgba(126,240,182,.10));
  color:var(--text);
  border-color:rgba(122,162,255,.25);
}
.nav .ic{
  width:30px;height:30px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
/* Content */
.content{padding:18px 18px 44px}
.page-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.page-title{font-size:20px;font-weight:950;letter-spacing:.2px}
.page-sub{font-size:12px;color:var(--muted);margin-top:4px}
.footer{padding:14px 18px;color:rgba(174,185,222,.85);border-top:1px solid var(--line);background:rgba(7,11,24,.55)}
/* Cards */
.card{
  background:linear-gradient(180deg, rgba(15,26,58,.78), rgba(11,21,51,.78));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.card.soft{
  background:linear-gradient(180deg, rgba(15,26,58,.55), rgba(11,21,51,.55));
}
/* KPI tiles */
.kpi{
  position:relative;
  overflow:hidden;
  padding:16px 16px 14px;
}
.kpi:before{
  content:"";
  position:absolute;inset:-60px -60px auto auto;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, rgba(122,162,255,.22), transparent 65%);
  pointer-events:none;
}
.kpi .label{color:rgba(174,185,222,.9);font-size:12px}
.kpi .value{font-size:28px;font-weight:950;letter-spacing:.2px;margin-top:4px}
.kpi .hint{color:rgba(174,185,222,.78);font-size:12px;margin-top:6px}
/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(122,162,255,.22), rgba(126,240,182,.10));
  color:var(--text);font-weight:850;cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
/* Flash */
.flash{
  padding:12px 14px;border-radius:14px;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04)
}
.flash.success{border-color:rgba(126,240,182,.28);background:rgba(126,240,182,.10)}
.flash.warning{border-color:rgba(255,211,122,.28);background:rgba(255,211,122,.10)}
.flash.error{border-color:rgba(255,139,139,.28);background:rgba(255,139,139,.10)}
/* Tables */
.table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.02)
}
.table th,.table td{
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;font-size:13px
}
.table th{
  color:rgba(174,185,222,.9);
  text-align:left;font-weight:850;
  background:rgba(12,19,43,.55)
}
.table tr:last-child td{border-bottom:none}
/* Inputs */
label{font-size:12px;color:rgba(174,185,222,.9);display:block;margin:10px 0 6px}
input{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px
}
input:focus{outline:none;border-color:rgba(122,162,255,.35)}
/* Responsive */
@media (max-width:1100px){.layout{grid-template-columns:1fr}.sidebar{position:sticky;top:70px;display:flex;gap:10px;overflow:auto;white-space:nowrap;border-right:none;border-bottom:1px solid var(--line)}.nav{margin:0}}
.grid{display:grid;gap:14px}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:780px){.grid.cols-4,.grid.cols-2{grid-template-columns:1fr}}
hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:14px 0}
.p{color:rgba(174,185,222,.88);font-size:13px;line-height:1.55}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;border-radius:999px;padding:6px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:rgba(174,185,222,.95)}
.chip.good{border-color:rgba(126,240,182,.25);background:rgba(126,240,182,.10);color:rgba(126,240,182,.95)}
.chip.warn{border-color:rgba(255,211,122,.25);background:rgba(255,211,122,.10);color:rgba(255,211,122,.95)}
.chip.bad{border-color:rgba(255,139,139,.25);background:rgba(255,139,139,.10);color:rgba(255,139,139,.95)}