:root{
  --bg:#0c1018; /* Contenido completo en la respuesta previa */
}

:root{
  --bg:#0c1018;
  --panel:#111826;
  --muted:#8aa0b8;
  --text:#e6edf6;
  --brand:#00a884;
  --accent:#2fb4ff;
  --card:#0e1622;
  --line:#1b2636;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text);
}

/* Topbar */
.topbar{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; background:#11192a; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:40px; height:40px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),#059277); color:#061416; font-weight:800;
}
.brand .meta{display:flex; flex-direction:column; line-height:1.05}
.brand .meta strong{font-size:1.05rem}
.brand .meta span{color:var(--muted); font-size:.85rem}
.session{display:flex; align-items:center; gap:10px; color:#cfe3ff}
.pill{border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:.78rem}
.pill.live{background:#06261f; border-color:#0b4034; color:#7be8c9}

/* Layout */
.layout{display:grid; grid-template-columns:280px 1fr; gap:16px; padding:16px}
.sidebar{
  background:#0f1827; border:1px solid var(--line); border-radius:12px; padding:14px; position:sticky; top:80px; height:max-content
}
.sidebar h2{margin:0 0 12px; font-size:1.1rem; color:#9dd5ff}
.field{display:block; margin:12px 0}
.field span{display:block; margin-bottom:6px; color:#cfe3ff; font-size:.92rem}
.field input[type="text"], .field select, .field input[type="number"]{
  width:100%; padding:10px; border-radius:10px; border:1px solid var(--line); background:#0b1320; color:var(--text)
}
.field input[type="range"]{width:100%}
.field small{display:block; color:#9bb0c9; margin-top:6px}
.checks{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.actions{display:flex; gap:8px; margin-top:12px}
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700;
  background:var(--brand); color:#041217; border:1px solid #066b58; cursor:pointer
}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}

/* Main panels */
.main{display:grid; grid-template-columns:1fr; gap:16px}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.panel-head h3{margin:0; font-size:1.05rem; color:#9dd5ff}
.panel .hint{color:#9bb0c9; font-size:.85rem}

/* Timeline */
.timeline{display:flex; align-items:flex-end; gap:8px; height:160px; margin-top:8px}
.timeline .bar{
  width:22px; background:var(--accent); border-radius:6px 6px 0 0; opacity:.9
}

/* Graph */
.graph{display:grid; gap:8px}
.graph-svg{width:100%; height:220px; background:#0e1622; border:1px solid var(--line); border-radius:10px}
.node{fill:var(--brand)}
.node.main{fill:#2fb4ff}
.legend{color:#9bb0c9; font-size:.9rem}
.legend .dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--brand); margin:0 6px}
.legend .dot.main{background:#2fb4ff}

/* Table */
.table{display:grid; gap:6px}
.thead, .trow{
  display:grid; grid-template-columns:120px 1fr 1fr 120px; gap:10px;
  padding:10px; border:1px solid var(--line); border-radius:10px; background:#0e1622
}
.thead{color:#a8c7ff; font-weight:700; background:#0f1a2a}
.trow .ok{color:#00c39a; font-weight:700}
.trow .score{color:#cfe38a; font-weight:700}

/* Two column end */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.sources{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.sources li{display:grid; grid-template-columns:220px 1fr; align-items:center; gap:10px}
.sources .bar{height:10px; border-radius:8px; background:#0b1320; border:1px solid var(--line)}
.sources .bar i{display:block; height:100%; border-radius:8px; background:var(--brand)}
.details{color:#cfe3ff; line-height:1.5}

/* Footer */
.footer{
  border-top:1px solid var(--line); background:#0f1624; color:#9bb0c9;
  padding:14px 20px; text-align:center; margin-top:12px
}

/* Responsive */
@media (max-width:1100px){
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
}