*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg) radial-gradient(1200px 520px at 50% -120px, var(--bg-glow), transparent 70%) no-repeat fixed; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
select, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell ---------- */
.shell { display: block; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-t) + 10px) calc(var(--gutter) + var(--safe-r)) 10px calc(var(--gutter) + var(--safe-l));
  background: rgba(7, 17, 26, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; min-height: 56px;
}
.topbar .back { min-width: 44px; min-height: 44px; margin-left: -8px; display: grid; place-items: center; border-radius: 12px; color: var(--ink-2); }
.topbar .back[hidden] { display: none; }
.topbar .title { font-weight: 650; font-size: 17px; letter-spacing: .01em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-eye { display: inline-flex; align-items: center; gap: 8px; }
.demo-pill {
  flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; padding: 5px 9px; border-radius: 999px;
  color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(230, 182, 90, .4);
}
.main { padding: 16px calc(var(--gutter) + var(--safe-r)) calc(var(--nav-h) + var(--safe-b) + 28px) calc(var(--gutter) + var(--safe-l)); max-width: 760px; margin: 0 auto; }
.view { animation: rise .22s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 4px calc(4px + var(--safe-r)) calc(4px + var(--safe-b)) calc(4px + var(--safe-l));
  background: rgba(8, 18, 28, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.nav a { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ink-3); border-radius: 12px; }
.nav a svg { width: 22px; height: 22px; }
.nav a[aria-current="page"] { color: var(--emerald); background: transparent; position: relative; }
.nav a[aria-current="page"]::before { content: ''; position: absolute; top: -5px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--emerald); }
.nav a.soon { opacity: .7; }
.side-brand, .side-note { display: none; }

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .nav {
    position: sticky; top: 0; height: 100dvh; grid-template-columns: 1fr; align-content: start; gap: 4px;
    padding: 20px 14px; border-top: 0; border-right: 1px solid var(--line); background: var(--s1);
  }
  .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 46px; padding: 0 14px; font-size: 15px; }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 14px 18px; font-weight: 700; letter-spacing: .12em; font-size: 14px; }
  .side-note { display: block; margin-top: auto; padding: 14px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); }
  .nav { display: flex; flex-direction: column; }
  .topbar { padding-left: 32px; padding-right: 32px; }
  .main { max-width: 1180px; padding: 28px 32px 48px; width: 100%; }
}

/* ---------- Cards / genéricos ---------- */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.card + .card, .stack > * + * { margin-top: 14px; }
.card.flat { box-shadow: none; background: var(--s2); }
.h2 { font-size: 20px; font-weight: 700; letter-spacing: -.005em; }
.h3 { font-size: 15px; font-weight: 650; color: var(--ink); }
.eyebrow { font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }

.banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--violet-soft); border: 1px solid rgba(151, 133, 236, .35); font-size: 14px; color: var(--ink);
}
.banner.gold { background: var(--gold-soft); border-color: rgba(230, 182, 90, .4); }
.banner.red { background: var(--red-soft); border-color: rgba(220, 104, 104, .4); }
.banner svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }

/* Badges de etiqueta: forma + icono + texto (no sólo color) */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 13px; font-weight: 750; letter-spacing: .06em; border: 1px solid; white-space: nowrap; }
.badge svg { width: 16px; height: 16px; flex: none; }
.badge.silver { color: var(--silver); background: rgba(181, 193, 209, .10); border-color: rgba(181, 193, 209, .45); }
.badge.gold { color: var(--gold); background: var(--gold-soft); border-color: rgba(230, 182, 90, .6); }
.badge.premium { color: #fff; background: linear-gradient(135deg, rgba(151, 133, 236, .45), rgba(230, 182, 90, .28)); border-color: var(--violet); box-shadow: 0 0 0 2px rgba(151, 133, 236, .18); }
.badge.unclassified { color: var(--ink-2); background: transparent; border-style: dashed; border-color: var(--line-strong); letter-spacing: .02em; font-weight: 650; }
.badge.lg { font-size: 15px; padding: 7px 14px 7px 10px; } .badge.lg svg { width: 20px; height: 20px; }
.tag { display: inline-flex; align-items: center; font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--s3); color: var(--ink-2); }
.tag.demo { color: var(--gold); background: var(--gold-soft); font-weight: 700; letter-spacing: .05em; }
.tag.na { color: var(--ink-3); background: transparent; border: 1px dashed var(--line-strong); font-weight: 650; letter-spacing: .04em; }

/* ---------- Controles ---------- */
.search {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  background: var(--s2); border: 1px solid var(--line); border-radius: 14px;
}
.search:focus-within { border-color: var(--violet); }
.search svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; align-self: stretch; min-height: 44px; background: none; border: 0; outline: 0; font-size: 16px; /* 16px evita zoom en iOS */ }
.search input::placeholder { color: var(--ink-3); }
.search .clear { min-width: 44px; min-height: 44px; margin-right: -12px; color: var(--ink-3); display: grid; place-items: center; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  background: var(--s2); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.chip[aria-pressed="true"], .chip[aria-selected="true"] { color: #fff; border-color: var(--blue); background: var(--blue); }
.chip:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.seg { display: flex; background: var(--s2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { flex: 1; min-height: 44px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0 8px; }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }
.select { width: 100%; min-height: 48px; background: var(--s2); border: 1px solid var(--line); border-radius: 14px; padding: 0 12px; font-size: 16px; }
.btn {
  min-height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--s3); border: 1px solid var(--line-strong);
}
.btn.primary { background: var(--blue); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn:active { transform: translateY(1px); }

/* ---------- Señales ---------- */
.sig { display: block; width: 100%; text-align: left; padding: 14px; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.sig:hover { border-color: var(--line-strong); }
.sig:active { transform: scale(.995); }
.sig + .sig { margin-top: 12px; }
.sig .id { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.sig .name { font-size: 18px; font-weight: 700; letter-spacing: -.005em; }
.sig .meta { display: flex; gap: 16px; margin-top: 12px; }
.sig .meta div { min-width: 0; }
.sig .k { font-size: 13px; color: var(--ink-3); }
.sig .v { font-size: 17px; font-weight: 700; }
.sig .foot { margin-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.spark { width: 112px; height: 36px; flex: none; }
.mult { text-align: right; }
.mult .v { color: var(--gold); font-size: 17px; font-weight: 700; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-2); }

@media (min-width: 720px) { .sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sig + .sig { margin-top: 0; } }
@media (min-width: 1280px) { .sigs.wide { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Ficha ---------- */
.hero { padding: 18px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--s2), var(--s1)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero .nm { font-size: 24px; font-weight: 750; letter-spacing: -.01em; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.kpi { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.kpi .k { font-size: 13px; color: var(--ink-3); }
.kpi .v { font-size: 22px; font-weight: 750; margin-top: 2px; }
.kpi .s { font-size: 13px; color: var(--ink-2); }
.subtabs { display: flex; gap: 2px; padding: 4px; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; margin: 14px 0; position: sticky; top: calc(var(--safe-t) + 56px); z-index: 10; }
.subtabs a { flex: 1 1 0; min-width: 0; min-height: 44px; display: grid; place-items: center; border-radius: 10px; font-size: 13px; font-weight: 650; color: var(--ink-2); text-align: center; padding: 0 2px; }
.subtabs a[aria-current="page"] { background: var(--blue); color: #fff; }
@media (min-width: 1024px) { .subtabs { top: 56px; } .subtabs a { font-size: 15px; } .kpis { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .split > aside { position: sticky; top: 130px; } }
.aside-only-desktop { display: none; } @media (min-width: 1024px) { .aside-only-desktop { display: block; } }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; }
.dot.f { background: var(--emerald); } .dot.u { background: var(--red); border-radius: 2px; } .dot.k { background: transparent; border: 2px dashed var(--ink-3); }
.sym { flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; }
.sym svg { width: 20px; height: 20px; }
.sym.f { color: var(--emerald); } .sym.u { color: var(--red); } .sym.k { color: var(--ink-3); }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: var(--s3); display: block; }
.pips i.on { background: currentColor; }

.phase { border-left: 3px solid var(--violet); padding-left: 12px; }
.phase.out { border-left-color: var(--gold); }
.zone-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.zone-title.t0 { color: var(--violet); } .zone-title.out { color: var(--gold); }

/* ---------- Gráfica ---------- */
.chartbox { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 8px 8px; }
.chartbox svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 8px 10px; }
.readout .k { font-size: 13px; color: var(--ink-3); } .readout .v { font-size: 16px; font-weight: 700; }
.ev-card { border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; background: var(--s2); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-2); padding: 8px 8px 0; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Wallets ---------- */
.wrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); text-align: left; }
.wrow + .wrow { margin-top: 10px; }
.wrow .av { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 700; background: var(--s3); }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wcell { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; min-width: 0; }
.wcell .k { font-size: 13px; color: var(--ink-3); } .wcell .v { font-size: 17px; font-weight: 700; margin-top: 2px; overflow-wrap: anywhere; }
.wcell.full { grid-column: 1 / -1; }

/* ---------- Laboratorio de etiquetas ---------- */
.lanes { display: grid; gap: 12px; }
@media (min-width: 720px) { .lanes { grid-template-columns: repeat(3, 1fr); } }
.lane { border-radius: var(--r-md); padding: 12px; border: 1px solid var(--line); background: var(--s2); }
.lane.f { border-top: 3px solid var(--emerald); } .lane.u { border-top: 3px solid var(--red); } .lane.k { border-top: 3px dashed var(--ink-3); }
.factor { display: block; width: 100%; text-align: left; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--line); }
.factor:first-of-type { border-top: 0; }
.meter { display: flex; align-items: center; gap: 12px; }
.meter .pips i { width: 26px; height: 10px; border-radius: 5px; }
.ladder { display: grid; gap: 10px; }
.ladder .step { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); }
.ladder .step.sel { border-color: var(--violet); }
.ladder .step > div { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.demo-pill .short { display: none; }
@media (max-width: 359px) { .demo-pill .full { display: none; } .demo-pill .short { display: inline; } .nav a { font-size: 12px; letter-spacing: -.02em; } }

/* ---------- Comparador ---------- */
.gcells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 720px) { .gcells { grid-template-columns: repeat(6, 1fr); } }
.gcells .chip { justify-content: center; padding: 0 6px; flex-direction: column; gap: 0; min-height: 56px; }
.gcells .chip small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp th, .cmp td { padding: 10px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; overflow-wrap: anywhere; }
.cmp th { color: var(--ink-3); font-weight: 600; font-size: 13px; width: 34%; }
.cmp td.a { color: var(--emerald); font-weight: 650; } .cmp td.b { color: var(--violet); font-weight: 650; }
.cmp thead th { border-top: 0; color: var(--ink); font-size: 14px; }
.barrow { display: grid; grid-template-columns: 52px 1fr 70px; gap: 10px; align-items: center; min-height: 34px; font-size: 14px; }
.bar { height: 10px; border-radius: 5px; background: var(--s3); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--violet); border-radius: 5px; }

/* ---------- En vivo ---------- */
.soon-box { text-align: center; padding: 48px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--s1); }
.soon-box .big { font-size: 22px; font-weight: 750; margin-top: 14px; }

details.fold { border-top: 1px solid var(--line); padding: 4px 0; }
details.fold summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; list-style: none; }
details.fold summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media (min-width: 1024px) {
  .topbar { grid-column: 2; grid-row: 1; }
  .nav { grid-column: 1; grid-row: 1 / span 2; }
  .main { grid-column: 2; grid-row: 2; }
  .aside-mobile { display: none; }
  .back { display: none !important; }
}
.hero.compact .nm { font-size: 20px; }
.subtabs a { letter-spacing: -.01em; }
@media (max-width: 359px) {
  .subtabs { padding: 3px; gap: 0; }
  .subtabs a { font-size: 12px; letter-spacing: -.04em; }
  .nav { padding-left: 0; padding-right: 0; }
  .nav a { font-size: 11.5px; letter-spacing: -.04em; padding: 0; }
}
.nav a, .subtabs a { overflow: hidden; }
@media (max-width: 479px) { .subtabs a { font-size: 12px; letter-spacing: -.03em; } }
@media (max-width: 359px) { .subtabs a { font-size: 11.5px; letter-spacing: -.05em; } }
@media (max-width: 359px) { .subtabs a { flex: 1 1 auto; padding: 0 3px; } }

/* ================= HF: sistema visual de alta fidelidad ================= */
.emerald { color: var(--emerald); } .red { color: var(--red); } .gold-t { color: var(--gold); }
.nav a.dsk { display: none; }
.brand { display: grid; place-items: center; }
body[data-root="0"] .brand { display: none; }
body[data-root="1"] .topbar .title { letter-spacing: .14em; font-weight: 750; }
.only-d { display: none; }
.side-brand small { display: block; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink-3); }
@media (min-width: 1024px) {
  .nav a.dsk { display: flex; }
  .only-m { display: none; } .only-d { display: block; }
  .topbar .brand, body[data-root="1"] .topbar .title { display: none; }
  .nav { grid-template-columns: none; }
}
.avatar { display: inline-grid; place-items: center; flex: none; color: rgba(255, 255, 255, .92); font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .4); }

.modeseg { display: flex; padding: 3px; gap: 3px; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; align-self: start; max-width: 340px; }
.modeseg button { flex: 1; min-height: 44px; padding: 0 18px; border-radius: 11px; font-weight: 650; color: var(--ink-2); }
.modeseg button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.count-chip { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: 14px; background: var(--s3); color: var(--ink-2); font-weight: 700; }
.iconbtn { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--s2); border: 1px solid var(--line); color: var(--ink-2); }
.iconbtn[aria-expanded="true"] { border-color: var(--blue); color: #fff; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; color: var(--ink-2); background: var(--s1); border: 1px solid var(--line-strong); }
.pill-n { font-size: 13px; opacity: .85; }
.pill.p-premium { border-color: rgba(123, 77, 240, .7); color: #CBBBFF; } .pill.p-gold { border-color: rgba(227, 169, 63, .7); color: var(--gold); } .pill.p-silver { border-color: rgba(181, 193, 209, .5); }
.pill[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill.p-premium[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); } .pill.p-gold[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #1d1405; }
.pill.p-silver[aria-pressed="true"] { background: #6f7f92; border-color: #6f7f92; } .pill.p-unclassified[aria-pressed="true"] { background: #3c4d5e; border-color: #3c4d5e; }

/* Fila de señal (móvil) */
.srow { position: relative; display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 14px 12px 14px 16px; margin-top: 10px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.srow::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-strong); }
.srow.lab-premium::before { background: var(--purple); } .srow.lab-gold::before { background: var(--gold); } .srow.lab-silver::before { background: var(--silver); }
.srow:active { transform: scale(.995); }
.srow-main { flex: 1; min-width: 0; }
.srow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sym-name { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
.srow-sub { font-size: 14px; color: var(--ink-2); margin-top: 1px; }
.srow-mc { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.srow-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.srow-meta span { display: inline-flex; align-items: center; gap: 4px; }
.srow-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 120px; }
.big-mult { font-size: 22px; font-weight: 800; color: var(--emerald); letter-spacing: -.01em; }
.badge { font-size: 12px; padding: 3px 9px 3px 7px; } .badge.lg { font-size: 15px; }
.badge.premium { background: var(--purple); border-color: #a58cff; color: #fff; box-shadow: none; }
.badge.gold { background: rgba(227, 169, 63, .16); }

/* Tabla de escritorio */
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.dtable th { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 12px 14px; background: var(--s2); }
.dtable td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.trow { cursor: pointer; } .trow:hover, .trow:focus-visible { background: rgba(75, 123, 245, .08); }
.dtable .spark { width: 96px; height: 30px; }

/* Ficha */
.fhead { display: flex; gap: 12px; align-items: center; }
.fhead-name { font-size: 24px; font-weight: 800; letter-spacing: .01em; }
.fhead-r { text-align: right; flex: none; }
.fhead-r .big-mult { font-size: 28px; }
.hero { background: linear-gradient(160deg, var(--s2), var(--s1)); }
.hero.compact { padding: 14px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat3 { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 8px; text-align: center; min-width: 0; }
.stat3-i { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--emerald-soft); color: var(--emerald); }
.stat3-v { font-size: 20px; font-weight: 800; margin-top: 4px; }
.stat3-k { font-size: 13px; color: var(--ink-2); } .stat3-s { font-size: 12px; color: var(--ink-3); }
.tiles6 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .tiles6 { grid-template-columns: repeat(3, 1fr); } }
.tile { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.tile .k { font-size: 13px; color: var(--ink-3); } .tile .v { font-size: 22px; font-weight: 800; margin-top: 2px; } .tile .s { font-size: 12px; color: var(--ink-3); }
.why-card { padding: 16px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(123, 77, 240, .28), rgba(123, 77, 240, .08)); border: 1px solid rgba(151, 133, 236, .45); }
.why-i { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(151, 133, 236, .25); color: #CBBBFF; }
.subtabs { background: var(--s1); }

/* Wallets */
.wrow2 { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--line); text-align: left; margin-top: 10px; }
.rank { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--s3); }
.grade { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--gold-soft); color: var(--gold); }
.grade.g5, .grade.g4 { background: var(--emerald-soft); color: var(--emerald); } .grade.g2, .grade.g1 { background: var(--red-soft); color: var(--red); }
.wr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; max-width: 112px; }
.contrib { font-size: 12px; font-weight: 700; text-align: right; } .c-favorable { color: var(--emerald); } .c-unfavorable { color: var(--red); } .c-neutral, .c-unknown { color: var(--ink-2); }

/* Etiqueta */
.seal { position: relative; display: grid; place-items: center; padding: 14px; background: radial-gradient(circle at 50% 40%, rgba(151, 133, 236, .16), transparent 62%), var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.seal-svg { width: min(230px, 62vw); height: auto; }
.seal-text { position: absolute; text-align: center; top: 50%; transform: translateY(-58%); }
.seal-k { font-size: 12px; color: var(--ink-2); } .seal-v { font-size: clamp(22px, 7vw, 30px); font-weight: 850; letter-spacing: .06em; }
.seal-v.premium { color: #fff; text-shadow: 0 0 18px rgba(151, 133, 236, .7); } .seal-v.gold { color: var(--gold); } .seal-v.silver { color: var(--silver); } .seal-v.unclassified { color: var(--ink-2); font-size: clamp(16px, 5vw, 20px); letter-spacing: .02em; }
.track { height: 10px; border-radius: 6px; background: var(--s3); overflow: hidden; }
.track > i { display: block; height: 100%; border-radius: 6px; }
.metric-bar .track { margin-top: 8px; } .metric-bar + .metric-bar { margin-top: 14px; }
.fbar { padding: 4px 0; } .fbar .track { margin-top: 6px; }
.fbar.favorable .track > i { background: linear-gradient(90deg, #1fb37c, var(--emerald)); }
.fbar.unfavorable .track > i { background: linear-gradient(90deg, #b13a45, var(--red)); }
.fbar.unknown .track { background: repeating-linear-gradient(45deg, var(--s3), var(--s3) 6px, rgba(255, 255, 255, .05) 6px, rgba(255, 255, 255, .05) 12px); }
.fbar-t { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .fbar-v { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* Gráfica: capas, eventos */
.layers { display: flex; flex-wrap: wrap; gap: 8px; }
.layer { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-3); background: var(--s1); border: 1px solid var(--line); }
.layer i { width: 10px; height: 10px; border-radius: 50%; opacity: .35; }
.layer[aria-pressed="true"] { color: var(--ink); border-color: var(--line-strong); background: var(--s2); } .layer[aria-pressed="true"] i { opacity: 1; }
.evtable { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.evrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 4px; border-top: 1px solid var(--line); text-align: left; font-size: 14px; }
.evtable .h3 + .evrow { border-top: 0; }
.evrow[aria-pressed="true"] { background: rgba(75, 123, 245, .12); border-radius: 8px; }
.edot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .edot.green { background: var(--emerald); } .edot.red { background: var(--red); } .edot.gold { background: var(--gold); }
.chartbox { background: linear-gradient(180deg, var(--s2), var(--s1)); }

@media (min-width: 1024px) { .main { max-width: 1240px; } .srow { margin-top: 0; } }
.chartbox.bare { background: none; border: 0; padding: 0; }
.multrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.srow .spark { width: 76px; height: 30px; } .srow-right { max-width: 90px; } .srow .big-mult { font-size: 20px; }
.fhead-name { font-size: 26px; }
.layers { flex-wrap: nowrap; gap: 6px; } .layer { padding: 0 10px; font-size: 13px; gap: 6px; flex: 1 1 auto; justify-content: center; }
.readout { padding-top: 0; }
.grade { white-space: nowrap; } .contrib { white-space: nowrap; } .wr-right { max-width: 84px; min-width: 64px; }
.wrow2 .grow { min-width: 0; } .wrow2 .grow > div:last-child { overflow-wrap: anywhere; }
.dsk-only { display: none; } @media (min-width: 1024px) { .dsk-only { display: block; } }
.cmp th { width: 44%; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.gcells .chip[aria-pressed="true"] small { color: rgba(255, 255, 255, .88); }
.stat3 { padding: 10px 6px; } .stat3-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.stat3-i { width: 26px; height: 26px; } .stat3-v { font-size: 19px; margin-top: 0; } .stat3-k { font-size: 12px; line-height: 1.25; margin-top: 2px; }
.hero { padding: 14px; } .fhead-name { font-size: 24px; }

/* ===== Navegación unificada: 5 entradas móvil / grupos en escritorio ===== */
.nav .dsk, .nav .nav-group { display: none; }
.nav-group { padding: 14px 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 1024px) {
  .nav .mob { display: none; }
  .nav a.dsk { display: flex; }
  .nav .nav-group.dsk { display: block; }
}
.intel-tabs { display: flex; gap: 6px; padding: 4px; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; }
.itab { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-size: 14px; font-weight: 650; color: var(--ink-2); line-height: 1.1; }
.itab small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.itab[aria-current="page"] { background: var(--blue); color: #fff; }
.itab.pend { color: var(--ink-3); }
.hub-card { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--line); }
.hub-card:hover { border-color: var(--line-strong); }
#wi-app { display: block; outline: none; }
/* Barra inferior: «Inteligencia» es la etiqueta más larga → columnas proporcionales */
@media (max-width: 1023px) {
  .nav { grid-template-columns: .92fr .95fr 1.45fr 1.05fr .75fr; }
  .nav a.mob { font-size: 12px; letter-spacing: -.035em; padding: 0 1px; }
}
@media (max-width: 359px) { .nav a.mob { font-size: 11.5px; letter-spacing: -.05em; } }
.nav a.dsk { white-space: nowrap; }
.nav a.dsk small { font-size: 12px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }

/* ================= PÍLDORAS · fidelidad a las referencias ================= */
/* Contenedores segmentados: barra en cápsula */
.seg, .subtabs, .intel-tabs, .modeseg {
  border-radius: 999px; padding: 4px; gap: 4px;
  background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2)); border: 1px solid var(--pill-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .25);
}
.seg button, .subtabs a, .itab, .modeseg button { border-radius: 999px; min-height: var(--pill-h); font-weight: 650; color: var(--ink-2); transition: background .16s, color .16s, box-shadow .16s, transform .12s; }
.seg button:active, .subtabs a:active, .itab:active, .modeseg button:active { transform: scale(.97); }
.seg button[aria-pressed="true"], .subtabs a[aria-current="page"], .itab[aria-current="page"], .modeseg button[aria-pressed="true"] {
  background: var(--blue-grad); color: #fff; box-shadow: var(--blue-shadow);
}
.seg button:disabled { opacity: .38; }
.itab.pend { color: var(--ink-3); } .itab small { opacity: .85; }
.subtabs { top: calc(var(--safe-t) + 56px); background: linear-gradient(180deg, rgba(14, 26, 37, .97), rgba(10, 20, 29, .97)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Píldoras sueltas (filtros, capas, chips) */
.pill, .chip, .layer {
  min-height: var(--pill-h); border-radius: 999px; padding: 0 18px; font-weight: 650; letter-spacing: .005em;
  background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2)); border: 1px solid var(--pill-edge); color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: background .16s, color .16s, box-shadow .16s, transform .12s;
}
.pill:active, .chip:active, .layer:active { transform: scale(.97); }
.pills, .chips, .layers { gap: 8px; }
.pill.p-premium { background: linear-gradient(180deg, rgba(123, 77, 240, .30), rgba(80, 50, 170, .20)); border-color: rgba(151, 133, 236, .45); color: #C9BBFF; }
.pill.p-gold { background: linear-gradient(180deg, rgba(227, 169, 63, .18), rgba(227, 169, 63, .07)); border-color: rgba(227, 169, 63, .45); color: var(--gold); }
.pill.p-silver { background: linear-gradient(180deg, rgba(181, 193, 209, .13), rgba(181, 193, 209, .05)); border-color: rgba(181, 193, 209, .40); color: #E4EBF3; }
.pill[aria-pressed="true"], .chip[aria-pressed="true"], .layer[aria-pressed="true"] { background: var(--blue-grad); border-color: transparent; color: #fff; box-shadow: var(--blue-shadow); }
.pill.p-premium[aria-pressed="true"] { background: linear-gradient(180deg, #8F66FF, #6A3FE6); box-shadow: 0 6px 16px rgba(106, 63, 230, .4), inset 0 1px 0 rgba(255, 255, 255, .28); }
.pill.p-gold[aria-pressed="true"] { background: linear-gradient(180deg, #F0BE5E, #D99A2B); color: #1D1405; box-shadow: 0 6px 16px rgba(217, 154, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pill.p-silver[aria-pressed="true"] { background: linear-gradient(180deg, #8A9BB0, #66778C); color: #fff; box-shadow: 0 6px 16px rgba(102, 119, 140, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.pill.p-unclassified[aria-pressed="true"] { background: linear-gradient(180deg, #52677C, #3C4D5E); color: #fff; }
.pill-n { font-weight: 600; opacity: .8; }
.layer i { width: 9px; height: 9px; }
.layer[aria-pressed="true"] i { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
/* Grupos de multiplicador (ref. 01): cuadrados redondeados, no cápsulas */
.gcells .chip { border-radius: 20px; background: linear-gradient(180deg, #101D29, #0B151E); }
.gcells .chip[aria-pressed="true"] { background: linear-gradient(180deg, #BBD3FF, #8FB2F5); color: #0B1A33; box-shadow: 0 6px 16px rgba(120, 160, 245, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.gcells .chip[aria-pressed="true"] small { color: rgba(11, 26, 51, .72); }
/* Badges: cápsula con más presencia */
.badge { border-radius: 999px; padding: 4px 12px 4px 9px; font-weight: 800; letter-spacing: .07em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.badge.premium { background: linear-gradient(180deg, #8F66FF, #6A3FE6); border-color: rgba(190, 170, 255, .6); box-shadow: 0 4px 12px rgba(106, 63, 230, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.badge.gold { background: linear-gradient(180deg, rgba(227, 169, 63, .24), rgba(227, 169, 63, .10)); border-color: rgba(227, 169, 63, .6); }
.badge.silver { background: linear-gradient(180deg, rgba(181, 193, 209, .18), rgba(181, 193, 209, .07)); }
.tag { border-radius: 999px; padding: 4px 11px; }
.count-chip { border-radius: 999px; }
/* Botones y buscador */
.btn { border-radius: 999px; padding: 0 22px; background: linear-gradient(180deg, #14283A, #0F1E2C); border-color: var(--pill-edge); }
.btn.primary { background: var(--blue-grad); box-shadow: var(--blue-shadow); border-color: transparent; }
.search { border-radius: 999px; padding-left: 18px; background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2)); border-color: var(--pill-edge); }
.iconbtn { border-radius: 50%; background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2)); border-color: var(--pill-edge); }
.select { border-radius: 999px; padding: 0 20px; background-color: var(--pill-bg); border-color: var(--pill-edge); }
.demo-pill { padding: 6px 12px; background: linear-gradient(180deg, rgba(227, 169, 63, .22), rgba(227, 169, 63, .08)); }
.hub-card, .evtable, .wrow2 { border-radius: 22px; }
.wrow2 .grade, .contrib { border-radius: 999px; padding: 2px 10px; }
.grade { background: var(--gold-soft); }
.nav a[aria-current="page"] { color: var(--emerald); }
.evrow[aria-pressed="true"] { border-radius: 999px; }
.legend span { padding: 2px 0; }
.stat3-v { white-space: nowrap; font-size: 18px; } .stat3-row { flex-wrap: nowrap; }
.subtabs a { font-size: 12.5px; }
@media (max-width: 359px) { .subtabs a { font-size: 11.5px; } }

/* Ajuste de geometría tras el sistema de píldoras (320–430 px) */
.layer { padding: 0 11px; gap: 6px; font-size: 13px; }
@media (max-width: 479px) {
  .subtabs { padding: 3px; gap: 2px; }
  .subtabs a { padding: 0 1px; font-size: 12px; letter-spacing: -.03em; }
  .seg { gap: 2px; padding: 3px; } .seg button { padding: 0 6px; }
}
@media (max-width: 359px) { .subtabs a { font-size: 11.5px; letter-spacing: -.045em; } .pill, .chip { padding: 0 14px; } }

/* Copia de forma de la ref. 02/01: segmento de la gráfica = rectángulo redondeado; multiplicadores = una fila compacta */
.seg[aria-label="Resolución"] { border-radius: 18px; }
.seg[aria-label="Resolución"] button { border-radius: 14px; }
.gcells { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gcells .chip { min-height: 54px; padding: 0 2px; border-radius: 16px; font-size: 14px; }
.gcells .chip small { font-size: 12px; }
@media (max-width: 359px) { .gcells { gap: 4px; } .gcells .chip { font-size: 13px; } }

/* Capas de la gráfica (ref. 02): indicador discreto punto + texto; activo = punto con halo, no relleno azul */
.layer[aria-pressed="true"] { background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2)); border-color: var(--line-strong); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.layer[aria-pressed="false"] { color: var(--ink-3); background: transparent; }
.layer[aria-pressed="true"] i { box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }

/* ===== Tipografía condensada: tamaños recalibrados (la fuente es ~12 % más estrecha y de x-height menor) ===== */
body { font-size: 17px; letter-spacing: .003em; }
.h2 { font-size: 23px; letter-spacing: 0; } .h3 { font-size: 16.5px; }
.eyebrow { font-size: 13px; letter-spacing: .09em; }
.fhead-name, .sym-name { letter-spacing: .01em; }
.big-mult { letter-spacing: 0; }
.pill, .chip, .layer, .seg button, .itab, .modeseg button { font-size: 15px; }
.subtabs a { font-size: 14px; letter-spacing: 0; }
@media (max-width: 479px) { .subtabs a { font-size: 13.5px; letter-spacing: 0; } }
@media (max-width: 359px) { .subtabs a { font-size: 12.5px; } .pill, .chip { font-size: 14px; } }
.nav a.mob { font-size: 12.5px; letter-spacing: 0; } @media (max-width: 359px) { .nav a.mob { font-size: 12px; } }
.srow-sub, .srow-mc, .srow-meta { font-size: 14px; } .kpi .k, .tile .k, .stat3-k { font-size: 13.5px; }
.tile .v, .kpi .v { font-size: 24px; } .stat3-v { font-size: 20px; }
.banner { font-size: 15px; }
.cmp th, .cmp td { font-size: 16px; }
.dtable td { font-size: 15.5px; } .dtable th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.seg button { min-width: 44px; }

/* ===== Jerarquía tipográfica recalibrada contra la referencia (títulos y métricas más presentes) ===== */
.topbar .title { font-size: 19px; }
.fhead-name { font-size: 30px; line-height: 1.05; }
.hero .muted, .fhead .muted { font-size: 15.5px; }
.multrow .big-mult { font-size: 32px; line-height: 1; }
.big-mult { font-size: 26px; } .srow .big-mult { font-size: 24px; }
.sym-name { font-size: 21px; }
.stat3-v { font-size: 23px; } .stat3-k { font-size: 14.5px; }
.tile .v, .kpi .v { font-size: 28px; } .tile .k { font-size: 14px; }
.readout .v { font-size: 19px; } .readout .k { font-size: 14px; }
.h2 { font-size: 26px; }
.badge { font-size: 13.5px; } .badge.lg { font-size: 16px; }
.seal-v { font-size: clamp(26px, 8vw, 34px); }
.nav a.dsk { font-size: 16px; } .nav-group { font-size: 12.5px; }
.legend { font-size: 14px; } .evrow { font-size: 15.5px; }
@media (min-width: 1024px) { .fhead-name { font-size: 32px; } .dtable td { font-size: 16px; } }

/* ===== Prototipo integral: identidad del grupo, Proyecto, Miki, Shadow y capas de etiquetas ===== */
.group-name { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--gold); }
.side-brand small.group-name { font-size: 12px; color: var(--gold); letter-spacing: .18em; }
.brand-hero .eyebrow { color: var(--gold); }
.layers2 { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.layer-k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.shadow-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .05em;
  color: #C9BBFF; border: 1px dashed rgba(151, 133, 236, .6); background: rgba(123, 77, 240, .10); }
.srow-top + .layers2, .srow-main > .layers2 { margin-top: 4px; }
.progress-big { font-size: 34px; font-weight: 700; line-height: 1; } .progress-big small { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.tag.hist { background: var(--gold-soft); color: var(--gold); font-weight: 700; }
.stage { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); }
.stage-completado { border-left: 3px solid var(--emerald); }
.stage-n { flex: none; min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--s3); font-weight: 700; font-size: 14px; padding: 0 8px; }
.st { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 12px 2px 9px; border-radius: 999px; font-size: 13.5px; font-weight: 650; white-space: nowrap; background: var(--s3); color: var(--ink-2); }
.st-completado { background: var(--emerald-soft); color: var(--emerald); } .st-esperando_miki { background: var(--gold-soft); color: var(--gold); }
.st-bloqueado { background: var(--red-soft); color: var(--red); } .st-por_confirmar { background: var(--violet-soft); color: #C9BBFF; }
.rv { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.rv-PENDING { background: var(--s3); color: var(--ink-2); } .rv-APPROVED { background: var(--emerald-soft); color: var(--emerald); } .rv-NOT_APPROVED { background: var(--red-soft); color: var(--red); }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hist li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--s2); border: 1px solid var(--line); }
.shadow-tag, .tag[class*="sh-"] { border: 1px dashed rgba(151, 133, 236, .6); color: #C9BBFF; background: rgba(123, 77, 240, .10); font-weight: 700; }
.tag.sh-negativo, .tag.sh-bloqueado { border-color: rgba(224, 80, 90, .55); color: var(--red); background: var(--red-soft); }
.tag.sh-congelado { border-color: rgba(227, 169, 63, .55); color: var(--gold); background: var(--gold-soft); }
.list li .stage-n { min-width: 40px; }
@media (max-width: 359px) { .st, .rv { font-size: 12.5px; padding: 2px 9px; } .progress-big { font-size: 30px; } }
.titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.topgroup { display: none; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--gold); line-height: 1.1; }
body[data-root="1"] .topgroup { display: block; }
@media (min-width: 1024px) { body[data-root="1"] .topgroup { display: none; } }
.topgroup { font-size: 11.5px; }

/* Fase 8: tablas de simulación — sin solapes en móvil; desplazamiento horizontal dentro de .tablewrap */
.tablewrap table.simtab{table-layout:auto;width:max-content;min-width:100%}
.tablewrap table.simtab th,.tablewrap table.simtab td{white-space:nowrap;padding:6px 10px;text-align:left;overflow:visible}