:root{
  --bg:#0d1418;
  --bg2:#121c22;
  --rail:#10181d;
  --paper:#ece6d9;
  --paper2:#f8f4ec;
  --line:rgba(20,26,30,.08);
  --ink:#171e23;
  --muted:#6a726f;
  --cyan:#2fd4d0;
  --cyan2:#0f7f8d;
  --lime:#b9ea50;
  --amber:#ffb35d;
  --slate:#85939d;
  --white:#ffffff;
  --shadow:0 18px 44px rgba(8,12,14,.15);
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0f171b,#101a1f);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink)}
button,input,select{font:inherit}
button{cursor:pointer}

.shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{
  background:linear-gradient(180deg,#0d1418 0%,#10191e 100%);
  color:#eff4f1;border-right:1px solid rgba(255,255,255,.06);padding:18px;display:flex;flex-direction:column;gap:16px
}
.brand{display:flex;gap:12px;align-items:center;padding:6px 2px 10px}
.brand-mark{
  width:52px;height:52px;border-radius:16px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.22) 0 10%, transparent 11%),
    radial-gradient(circle at 70% 70%, rgba(47,212,208,.7) 0 20%, transparent 21%),
    linear-gradient(135deg,#17232a,#0f1519);
  position:relative;
  box-shadow:0 14px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
}
.brand-mark::after{
  content:"";position:absolute;inset:11px;border:2px solid rgba(185,234,80,.8);border-radius:999px;
  clip-path:polygon(0 50%,100% 0,100% 100%);transform:rotate(18deg)
}
.brand h1{margin:0;font-size:18px;letter-spacing:.04em}
.brand span{font-size:11px;color:rgba(255,255,255,.58);letter-spacing:.16em;text-transform:uppercase}

.menu{display:flex;flex-direction:column;gap:8px}
.menu-btn,.side-action{
  border:none;border-radius:14px;padding:13px 14px;text-align:left;background:rgba(255,255,255,.04);color:#eef4f2;font-weight:700;transition:.2s ease
}
.menu-btn.active,.menu-btn:hover{background:linear-gradient(135deg,rgba(47,212,208,.16),rgba(185,234,80,.08));transform:translateX(3px)}
.side-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px
}
.title-mini{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.58)}
.side-card label{display:flex;gap:10px;align-items:center;font-size:14px;color:#e8efec}
.side-card input{accent-color:var(--cyan)}
.side-action{padding:11px 12px}
.side-action:hover{background:rgba(255,255,255,.08)}

.main{
  background:
    radial-gradient(circle at top right, rgba(47,212,208,.08), transparent 35%),
    radial-gradient(circle at bottom left, rgba(185,234,80,.06), transparent 28%),
    var(--paper);
  padding:18px 20px 20px;
}
.topbar,.control-dock,.panel,.metrics article,.scenario-cards article{
  background:rgba(255,255,255,.56);
  backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.topbar{
  border-radius:22px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px
}
.head-left{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#6b746f}
.topbar h2{margin:4px 0 0;font-size:30px;letter-spacing:-.04em}
.status-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:9px 12px;border-radius:999px;background:rgba(15,21,25,.08);font-size:12px;letter-spacing:.12em;color:#45515b;font-weight:700}
.pill.ok{background:#11181c;color:#eef4f1}
.pill.ok span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(185,234,80,.8);margin-right:8px}
.head-right{display:flex;gap:10px;flex-wrap:wrap}
.primary,.ghost,.pack button{
  border:none;border-radius:14px;padding:12px 16px;font-weight:700
}
.primary{background:linear-gradient(135deg,var(--cyan),#57f0ed);color:#0f171b}
.ghost,.pack button{background:rgba(15,21,25,.06);color:#1d252b;border:1px solid rgba(15,21,25,.08)}

.control-dock{
  margin-top:14px;border-radius:20px;padding:12px 14px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.4fr;gap:12px;align-items:end
}
.dock-block label{display:block;font-size:12px;color:#68716c;font-weight:700}
.dock-block select,.dock-block input[type="range"]{width:100%;margin-top:6px}
.dock-block select{
  border-radius:12px;border:1px solid rgba(20,26,30,.08);background:#fff;padding:11px 12px;color:#172026
}
.dock-block b{display:block;margin-top:6px;color:var(--cyan2)}
.timeline{min-width:220px}

.view{display:none;padding-top:16px}
.view.active{display:block}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.metrics article{border-radius:18px;padding:16px;position:relative;overflow:hidden}
.metrics article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cyan)}
.metrics article:nth-child(2)::before{background:var(--amber)}
.metrics article:nth-child(3)::before{background:var(--lime)}
.metrics article:nth-child(4)::before{background:var(--slate)}
.metrics span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#6b736e}
.metrics strong{display:block;margin-top:6px;font-size:29px;letter-spacing:-.04em}

.viewer-grid,.split{display:grid;grid-template-columns:minmax(620px,1fr) 330px;gap:16px}
.panel{border-radius:22px;overflow:hidden}
.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.panel-head.slim{padding-bottom:14px}
.panel-head.small-gap{margin-top:4px}
.sub{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#78807a;margin-bottom:4px}
.panel-head strong{font-size:17px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#51616b}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.lg-a{background:var(--cyan)} .lg-b{background:#868e94} .lg-c{background:#d6b480}

.viewer-wrap{position:relative;padding:0}
canvas{display:block;width:100%;background:transparent}
#canvasEscena{height:680px}
#canvasTerreno{height:620px}
#canvasPerfil{height:250px}
#canvasActivo{height:300px}
#canvasBarras,#canvasLinea{height:260px}

.camera-tools{
  position:absolute;right:16px;bottom:16px;display:grid;grid-template-columns:repeat(2,70px);gap:8px
}
.camera-tools button{
  border:none;border-radius:12px;padding:10px 8px;background:rgba(255,255,255,.92);box-shadow:0 8px 18px rgba(0,0,0,.14);font-weight:800;color:#182026
}

.side-panel{padding-bottom:16px}
.readout,.stats-box{padding:0 16px;display:grid;gap:10px}
.readout div,.stats-box div{
  background:rgba(15,21,25,.05);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px
}
.readout span,.stats-box span{font-size:13px;color:#6d756f}
.asset-list{padding:0 16px;display:grid;gap:10px}
.asset-btn{
  background:rgba(15,21,25,.05);border:1px solid rgba(15,21,25,.06);border-radius:14px;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center
}
.asset-btn strong{font-size:14px}
.asset-btn em{font-style:normal;color:#75807c;font-size:12px}

.asset-grid{padding:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.asset-card{
  background:rgba(255,255,255,.64);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer
}
.asset-thumb{height:165px;border-bottom:1px solid var(--line)}
.asset-info{padding:12px 14px}
.asset-info h4{margin:0;font-size:15px}
.asset-info p{margin:6px 0 0;color:#68706b;font-size:13px}

.scenario-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.scenario-cards article{border-radius:20px;padding:18px}
.scenario-cards h3{margin:0 0 10px;font-size:20px}
.scenario-cards p{margin:0 0 16px;color:#68706b;font-size:14px;line-height:1.45}
.stats-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats-2 div{background:rgba(15,21,25,.05);padding:12px;border-radius:14px}
.stats-2 span{display:block;font-size:12px;color:#6c746f}
.stats-2 strong{display:block;margin-top:5px}
.table-panel table{width:100%;border-collapse:collapse}
.table-panel th,.table-panel td{padding:14px 14px;border-bottom:1px solid var(--line);text-align:left}
.table-panel thead th{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#6c746f}
.state{display:inline-block;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700}
.state.ok{background:rgba(185,234,80,.18);color:#628118}
.state.rev{background:rgba(255,179,93,.18);color:#915f11}
.state.alt{background:rgba(255,110,110,.16);color:#a2382b}

.charts{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-card{background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:18px;padding:14px}
.chart-card.wide{grid-column:1/-1}
.chart-card h3{margin:0 0 12px;font-size:18px}
.log{display:grid;gap:10px}
.log div{display:flex;gap:16px;align-items:center;background:rgba(15,21,25,.05);border-radius:14px;padding:12px 14px}
.log span{min-width:58px;font-size:12px;font-weight:700;color:#727a75;letter-spacing:.08em}
.pack{padding:0 16px 16px;display:grid;gap:10px}
.pack button{text-align:left}

@media(max-width:1450px){
  .control-dock{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
  .viewer-grid,.split{grid-template-columns:1fr}
  .asset-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .control-dock{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .scenario-cards{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr}
  .asset-grid{grid-template-columns:1fr}
}