/* ================================================================
   MERCADO VIRAL — HUD oscuro. Mobile-first.
   Fondo #0d1117 · acento teal #3dd7c4 · Chakra Petch + JetBrains Mono
   ================================================================ */
:root{
  --bg:#0d1117; --panel:#131a24; --panel-2:#0f151d; --line:#1f2a37;
  --teal:#3dd7c4; --teal-dim:#1c6b62; --text:#c9d4e0; --muted:#7d8b9c;
  --hi:#3dd7c4; --mid:#e3b341; --lo:#f2665e;
  --red:#f2665e; --yellow:#e3b341; --green:#3dd7c4;
  --disp:'Chakra Petch',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:14px; line-height:1.5;
  background-image:radial-gradient(circle at 20% -10%, rgba(61,215,196,.06), transparent 40%);
}
a{color:var(--teal); text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp); letter-spacing:.5px; margin:.2em 0}

/* ---------- Header ---------- */
.hud-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0f161f,#0d1117);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:38px; height:38px; border-radius:8px}
.logo-sm{width:26px; height:26px; border-radius:6px; opacity:.8}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:var(--disp); font-weight:700; letter-spacing:1px; color:#fff; font-size:14px}
.brand-sub{font-size:10px; color:var(--muted); letter-spacing:1.5px}
.version-badge{
  font-family:var(--disp); font-size:11px; color:var(--teal);
  border:1px solid var(--teal-dim); border-radius:20px; padding:3px 10px; background:rgba(61,215,196,.07);
}

/* ---------- Nav ---------- */
.hud-nav{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:8px 12px; border-bottom:1px solid var(--line); background:var(--panel-2);
  position:sticky; top:63px; z-index:9;
}
.hud-nav a{
  font-family:var(--disp); font-size:13px; padding:6px 12px; border-radius:6px;
  color:var(--muted); border:1px solid transparent;
}
.hud-nav a:hover{color:var(--text)}
.hud-nav a.active{color:var(--teal); border-color:var(--teal-dim); background:rgba(61,215,196,.06)}
.agent-pill{margin-left:auto; font-size:11px; padding:3px 9px; border-radius:20px; letter-spacing:.5px}
.agent-pill.on{color:var(--green); border:1px solid var(--teal-dim); background:rgba(61,215,196,.08)}
.agent-pill.off{color:var(--muted); border:1px solid var(--line)}

/* ---------- Main ---------- */
.hud-main{max-width:920px; margin:0 auto; padding:18px 14px 60px}
.view-head h1{font-size:22px; color:#fff}
.subtitle{color:var(--muted); font-size:12.5px; margin-top:2px}
.back{display:inline-block; margin-bottom:8px; font-family:var(--disp); font-size:12px; color:var(--muted)}

/* ---------- Filtros / chips ---------- */
.filterbar{display:flex; gap:8px; margin:14px 0}
.chip{
  font-family:var(--disp); font-size:12px; padding:6px 14px; border-radius:20px;
  border:1px solid var(--line); color:var(--muted); cursor:pointer;
}
.chip.sel{color:var(--teal); border-color:var(--teal); background:rgba(61,215,196,.08)}

/* ---------- Radar cards ---------- */
.radar-list{display:flex; flex-direction:column; gap:8px}
.niche-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.niche-card summary{
  display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none;
}
.niche-card summary::-webkit-details-marker{display:none}
.rank{font-family:var(--disp); color:var(--muted); font-size:12px; width:18px; text-align:right}
.idx{
  font-family:var(--disp); font-weight:700; font-size:20px; min-width:44px; text-align:center;
  border-radius:8px; padding:4px 0;
}
.idx-hi{color:#052; color:var(--green); background:rgba(61,215,196,.12); border:1px solid var(--teal-dim)}
.idx-mid{color:var(--mid); background:rgba(227,179,65,.10); border:1px solid #6b571c}
.idx-lo{color:var(--lo); background:rgba(242,102,94,.10); border:1px solid #6b2a27}
.niche-name{flex:1; font-family:var(--disp); font-size:14px; color:#eaf1f8}
.type-tag{font-family:var(--mono); font-size:9px; padding:2px 6px; border-radius:4px; margin-left:6px; letter-spacing:1px}
.type-physical{color:#9db4c9; background:#1a2330; border:1px solid var(--line)}
.type-digital{color:var(--teal); background:rgba(61,215,196,.08); border:1px solid var(--teal-dim)}
.flag{font-size:9px; padding:2px 6px; border-radius:4px; margin-left:6px; letter-spacing:.5px}
.flag-red{color:var(--red); border:1px solid #6b2a27; background:rgba(242,102,94,.10)}
.flag-yellow{color:var(--yellow); border:1px solid #6b571c; background:rgba(227,179,65,.10)}
.flag-resell{color:var(--teal); border:1px solid var(--teal-dim); background:rgba(61,215,196,.08)}
.chip-resell.sel{color:#0d1117; background:var(--teal); border-color:var(--teal)}
.chev{color:var(--muted); font-size:12px; transition:transform .2s}
details[open] .chev{transform:rotate(180deg)}
.card-body{padding:0 14px 14px; border-top:1px solid var(--line)}

/* ---------- Sub-scores / barras ---------- */
.subscores{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.sub-top{display:flex; justify-content:space-between; align-items:baseline}
.sub-label{font-family:var(--disp); font-size:12.5px; color:#dbe6f1}
.sub-val{font-size:12px; color:var(--teal)}
.sub-val small{color:var(--muted); font-size:10px; margin-left:3px}
.bar{height:7px; background:#0c1219; border-radius:5px; overflow:hidden; margin:5px 0 4px; border:1px solid var(--line)}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--teal-dim),var(--teal)); border-radius:5px}
.sub-expl{font-size:11px; color:var(--muted); line-height:1.45}
.ficha-link{display:inline-block; margin-top:14px; font-family:var(--disp); font-size:12.5px}

/* ---------- Compliance banner ---------- */
.compliance-banner{
  margin:14px 0; padding:12px 14px; border-radius:8px; font-family:var(--disp); font-size:13px;
}
.compliance-banner.red{color:#ffd9d6; background:rgba(242,102,94,.10); border:1px solid var(--red)}
.compliance-banner.yellow{color:#ffe9bd; background:rgba(227,179,65,.10); border:1px solid var(--yellow)}
.compliance-banner ul{margin:8px 0 0; padding-left:18px; font-family:var(--mono); font-size:11.5px; color:var(--text)}
.compliance-banner .triggers{margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--muted)}

/* ---------- Comparador ---------- */
.verdict{border:1px solid var(--teal-dim); border-radius:12px; padding:16px; margin:16px 0;
  background:linear-gradient(180deg,rgba(61,215,196,.05),transparent)}
.verdict-badge{font-family:var(--disp); font-weight:700; color:var(--teal); letter-spacing:1px; font-size:15px}
.verdict-arg{color:#e6eef6; margin:10px 0}
.verdict-cols{display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px}
.verdict-cols h4{font-size:12px; color:var(--muted); letter-spacing:1px}
.verdict-cols ul{margin:6px 0; padding-left:18px; font-size:12.5px}
.first-move{margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:13px}
.vs-grid{display:grid; grid-template-columns:1fr; gap:12px}
.vs-col{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px}
.vs-col.winner{border-color:var(--teal); box-shadow:0 0 0 1px var(--teal-dim) inset}
.vs-col h3{font-size:14px; color:#fff}
.big-metric{font-family:var(--disp); font-size:38px; font-weight:700; color:var(--teal); line-height:1}
.big-metric small{display:block; font-size:10px; color:var(--muted); font-weight:400; letter-spacing:1px}
.metric-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.metric-row span{color:var(--muted)}
.metric-top{margin-top:12px; display:flex; flex-direction:column; gap:2px; font-size:12.5px}
.metric-top span{color:var(--muted); font-size:11px}
.metric-top em{color:var(--muted); font-style:normal; font-size:11px}

/* ---------- Ficha ---------- */
.ficha-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px}
.panel h3{font-size:13px; color:var(--teal); letter-spacing:1px; margin-bottom:12px}
.panel.full{margin-top:14px}
.big-idx{font-family:var(--disp); font-size:46px; font-weight:700; line-height:1; margin-bottom:14px}
.big-idx small{font-size:14px; color:var(--muted)}
.kv{margin-bottom:12px}
.kv span{display:block; font-size:11px; color:var(--muted); letter-spacing:1px; margin-bottom:2px}
.kv p{margin:0; font-size:13px; color:#e6eef6}
.hooks span{font-size:11px; color:var(--muted); letter-spacing:1px}
.hooks ol{margin:6px 0; padding-left:20px; font-size:13px}
.hooks li{margin-bottom:6px; color:#e6eef6}
.agent-off{font-size:12.5px; color:var(--muted); background:var(--panel-2); border:1px dashed var(--line);
  border-radius:8px; padding:12px}
.agent-off code{color:var(--teal)}
.plan-head{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px}
.calendar{display:grid; grid-template-columns:1fr; gap:8px}
.cal-day{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px}
.cal-n{font-family:var(--disp); color:var(--teal); font-size:12px; margin-right:8px}
.cal-plat{font-size:10px; color:var(--muted); letter-spacing:1px}
.cal-fmt{display:block; font-size:11px; color:var(--muted); margin-top:2px}
.cal-day p{margin:6px 0 0; font-size:12.5px; color:#e6eef6}

/* ---------- Fuentes ---------- */
.refresh-row{display:flex; align-items:center; gap:12px; margin:14px 0}
#refreshBtn{font-family:var(--disp); background:rgba(61,215,196,.08); color:var(--teal);
  border:1px solid var(--teal-dim); border-radius:8px; padding:8px 16px; cursor:pointer; font-size:13px}
#refreshBtn:disabled{opacity:.5; cursor:default}
.refresh-msg{font-size:12px; color:var(--muted)}
.agg-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0}
.agg-card{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px}
.agg-src{font-family:var(--disp); color:#eaf1f8; font-size:13px}
.agg-nums{display:flex; gap:10px; margin:6px 0; font-size:12px}
.agg-when{font-size:10.5px; color:var(--muted)}
.ok{color:var(--green)} .fail{color:var(--red)}
.src-table{width:100%; border-collapse:collapse; margin-top:12px; font-size:11.5px}
.src-table th{text-align:left; color:var(--muted); font-family:var(--disp); font-weight:600;
  padding:8px 6px; border-bottom:1px solid var(--line); letter-spacing:.5px}
.src-table td{padding:7px 6px; border-bottom:1px solid var(--panel-2)}
.src-table .mono{color:var(--muted)}
.row-fail{background:rgba(242,102,94,.04)}
.empty{color:var(--muted); text-align:center; padding:18px}

/* ---------- Footer ---------- */
.hud-footer{
  display:flex; align-items:center; gap:12px; max-width:920px; margin:0 auto;
  padding:18px 14px 30px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px;
}
.hud-footer strong{color:#c9d4e0; font-family:var(--disp); letter-spacing:.5px}
.disclaimer{display:block; margin-top:4px; font-size:10.5px; color:#5b6673}

/* ---------- Desktop ---------- */
@media(min-width:720px){
  .verdict-cols{grid-template-columns:1fr 1fr}
  .vs-grid{grid-template-columns:1fr 1fr}
  .ficha-grid{grid-template-columns:1fr 1fr}
  .calendar{grid-template-columns:1fr 1fr}
  .agg-grid{grid-template-columns:repeat(3,1fr)}
}