/* Base reset and typography */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.45;
}
:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.2; margin:0 0 .5rem}
h1{font-size:1.5rem}
h2{font-size:1.25rem}
h3{font-size:1.1rem}
small, .muted{color:var(--muted)}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 1rem;
}
.brand{display:flex; align-items:center; gap:.5rem}
.brand img{width:28px; height:28px}
.brand strong{font-weight:700}

.tabs{display:flex; gap:.25rem; margin-left:1rem}
.tab{
  padding:.5rem .75rem; border-radius:.75rem; border:1px solid transparent;
}
.tab[aria-current="page"], .tab:hover{
  background:var(--surface);
  border-color:var(--border);
}
.spacer{flex:1}
.filters{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.select{
  display:flex; align-items:center; gap:.5rem; background:var(--card);
  border:1px solid var(--border); border-radius:.75rem; padding:.25rem .5rem;
}
select{border:none; background:transparent; padding:.35rem .25rem; color:var(--text)}
label{font-size:.85rem; color:var(--muted)}

/* Layout */
.container{max-width:1180px; margin:1rem auto; padding:0 1rem}
.grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(12,1fr);
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
  padding:1rem;
}
.card:hover{box-shadow:0 10px 26px rgba(0,0,0,.06)}
.kpis .card{display:flex; flex-direction:column; gap:.35rem}
.kpi-title{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600}
.kpi-value{font-size:1.6rem; font-weight:800}
.kpi-sub{display:flex; gap:1rem; flex-wrap:wrap; font-size:.9rem}
.lamp{width:.65rem; height:.65rem; border-radius:999px; display:inline-block}
.status-ok{background:var(--ok)} .status-warn{background:var(--warn)} .status-crit{background:var(--crit)}
.badge{padding:.15rem .45rem; border-radius:.5rem; background:var(--surface); border:1px solid var(--border); font-size:.8rem}

.panel-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.legend{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.legend-item{display:flex; align-items:center; gap:.4rem; font-size:.9rem; color:var(--muted)}
.legend-swatch{width:.8rem; height:.8rem; border-radius:.2rem; display:inline-block}

.canvas-wrap{padding:.25rem; background:var(--panel); border:1px dashed var(--border); border-radius:.75rem}
canvas{width:100%; height:320px; display:block}

/* Table */
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem}
.table th, .table td{padding:.65rem .75rem; border-bottom:1px solid var(--border);}
.table th{ text-align:left; color:var(--muted); font-weight:600; background:var(--surface)}
.table tr:hover td{background:rgba(15,43,91,.03)}
.table .dot{width:.6rem; height:.6rem; border-radius:999px; display:inline-block; vertical-align:middle; margin-right:.35rem}

/* Comparatives (horizontal bars) */
.comp{display:grid; gap:.6rem}
.comp-row{display:grid; grid-template-columns:120px 1fr; align-items:center; gap:1rem}
.bar{
  position:relative; height:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; overflow:hidden;
}
.bar .meta{position:absolute; inset:0; background:color-mix(in oklab, var(--meta) 55%, white); opacity:.6}
.bar .real{position:absolute; inset:0; background:var(--real); width:0}

/* Skeleton loading */
.skeleton{position:relative; overflow:hidden}
.skeleton::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
  animation:shimmer 1.2s infinite; transform:translateX(-100%)
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Footer */
footer{color:var(--muted); padding:1rem; text-align:center}

/* Responsive */
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
@media (max-width: 1080px){ .col-4{grid-column:span 6} .col-8{grid-column:span 12} }
@media (max-width: 720px){ .grid{grid-template-columns:repeat(6,1fr)} .col-4,.col-6,.col-8{grid-column:span 6} }