html{ scroll-behavior: smooth; }

:root{
  --topbarH: 74px;
  --bg0:#070a14;
  --bg1:#0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.50);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 26px;
  --gap: 16px;
  --max: 1200px;

  --a: #7c5cff;   /* accent A */
  --b: #18d3ff;   /* accent B */
  --c: #2ee59d;   /* ok */
  --w: #ffcc66;   /* warn */
  --d: #ff4d6d;   /* danger */

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:root[data-theme="light"]{
  --bg0:#eef2ff;
  --bg1:#f7fafc;
  --card: rgba(0,0,0,.04);
  --card2: rgba(0,0,0,.06);
  --stroke: rgba(0,0,0,.08);
  --text: rgba(0,0,0,.88);
  --muted: rgba(0,0,0,.60);
  --muted2: rgba(0,0,0,.46);
  --shadow: 0 18px 50px rgba(0,0,0,.14);
}

/* ---------- Skin: Reddit-ish (simple, denso, “feed-first”) ---------- */
:root[data-skin="reddit"]{
  --bg0:#0b0b0c;
  --bg1:#1a1a1b;
  --card: rgba(39,39,41,.96);
  --card2: rgba(45,45,48,.96);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);
  --muted2: rgba(255,255,255,.52);
  --shadow: 0 10px 26px rgba(0,0,0,.35);
  --radius: 12px;
  --radius2: 14px;
  --gap: 12px;

  /* Reddit vibes: naranja + azul links */
  --a: #ff4500;
  --b: #0079d3;
  --c: #46d160;
  --w: #ffb000;
  --d: #ff585b;
}

:root[data-skin="reddit"][data-theme="light"]{
  --bg0:#ffffff;
  --bg1:#dae0e6;
  --card: rgba(255,255,255,.98);
  --card2: rgba(246,247,248,.98);
  --stroke: rgba(0,0,0,.12);
  --text: rgba(28,28,28,.92);
  --muted: rgba(28,28,28,.62);
  --muted2: rgba(28,28,28,.50);
  --shadow: 0 12px 26px rgba(0,0,0,.12);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.28), transparent 55%),
              radial-gradient(1000px 650px at 70% 25%, rgba(24,211,255,.22), transparent 50%),
              radial-gradient(900px 600px at 40% 80%, rgba(46,229,157,.10), transparent 52%),
              linear-gradient(160deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Reddit skin: fondo plano y legible */
:root[data-skin="reddit"] body{
  background: linear-gradient(180deg, var(--bg1), var(--bg1));
}
:root[data-skin="reddit"] .bgCanvas{ opacity: .15; }
:root[data-skin="reddit"] .glow{ opacity: .06; animation: none; }

.link{ color: var(--b); text-decoration: underline; text-underline-offset: 2px; }

a{ color: inherit; text-decoration:none; }
strong{ font-weight: 700; }

.bg{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.bgCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.glow{
  position:absolute; width:520px; height:520px; filter: blur(70px);
  opacity:.35; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.7), transparent 55%);
  animation: float 10s ease-in-out infinite;
}
.glowA{ left: -120px; top:-120px; }
.glowB{
  right:-160px; bottom:-160px;
  background: radial-gradient(circle at 30% 30%, rgba(24,211,255,.7), transparent 55%);
  animation-duration: 13s;
}

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(60px,30px) scale(1.05); }
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index: 90;
  display:flex; flex-wrap: wrap; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.08));
  border-bottom: 1px solid var(--stroke);
}


/* Navigation bar (dentro de la topbar) */
.navBar{
  flex: 0 0 100%;
  width: 100%;
  display:flex;
  gap: 10px;
  align-items:center;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--stroke);
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.navBar::-webkit-scrollbar{ height: 10px; }
.navLink{
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 13px;
  text-decoration:none;
  white-space:nowrap;
}
.navLink:hover{ background: rgba(255,255,255,.08); }
.navLink:active{ transform: translateY(1px); }

/* Loading status bar (arranque) */
.loadTop{
  position:absolute;
  left:0; right:0; top:0;
  pointer-events:none;
}
.loadTopTrack{
  height:3px;
  background: rgba(255,255,255,.10);
}
:root[data-theme="light"] .loadTopTrack{ background: rgba(0,0,0,.10); }
.loadTopFill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--a), var(--b), var(--c));
  transition: width .25s ease;
}
.loadTopText{
  position:absolute;
  right: 12px;
  top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  opacity: .95;
  transition: opacity .35s ease, transform .35s ease;
}
:root[data-theme="light"] .loadTopText{ background: rgba(255,255,255,.75); }
.loadTop.done .loadTopText{ opacity: 0; transform: translateY(-4px); }
.loadTop.done .loadTopTrack{ opacity: .35; transition: opacity .35s ease; }
.loadTop.hidden{ display:none; }



.topTrafficBar{
  flex: 1 0 100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding-top: 6px;
}
.topTrafficLabel{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .2px;
  user-select:none;
}
.topTrafficBar .traffic{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}
.topTrafficBar .trafficItem{
  padding: 4px 8px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.topTrafficBar .trafficName{ font-size: 12px; }
.topTrafficBar .trafficSub{ font-size: 11px; color: var(--muted); }

@media (max-width: 720px){
  .topTrafficLabel{ display:inline; font-size: 11px; opacity: .9; }
  .topTrafficBar{ padding-top: 4px; }
  .topTrafficBar .trafficItem{ padding: 3px 7px; }
}
:root[data-theme="light"] .topbar{
  background: linear-gradient(to bottom, rgba(255,255,255,.78), rgba(255,255,255,.52));
}

.brand{ display:flex; gap: 12px; align-items:center; min-width: 220px; }
.brandLogo{ width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--shadow); }
.brandTitle{ font-weight: 800; letter-spacing: .2px; }
.brandSub{ font-size: 13px; color: var(--muted); margin-top: 2px; }

.topbarRight{ display:flex; align-items:center; gap: 10px; }
.chip{
  display:flex; align-items:center; gap: 10px;
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-family: var(--mono);
  font-size: 12px;
}
.dot{ width:10px; height:10px; border-radius: 50%; display:inline-block; }
.dotLive{ background: var(--c); box-shadow: 0 0 0 0 rgba(46,229,157,.55); animation: pulseDot 1.8s ease infinite; }
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(46,229,157,.55); }
  65%{ box-shadow: 0 0 0 10px rgba(46,229,157,0); }
  100%{ box-shadow: 0 0 0 0 rgba(46,229,157,0); }
}

.btn{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
.btn:active{ transform: translateY(0px); }
.btn.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(24,211,255,.80));
  border-color: rgba(255,255,255,.18);
}
.btn.ghost{ background: rgba(255,255,255,.03); }
.btn.small{ padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.btnIcon{ font-size: 14px; opacity:.9; }
.btnText{ font-size: 13px; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(22px + var(--topbarH)) 16px 40px;
}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
  margin: 8px 0 18px;
}
.heroLeft, .heroRight{ display:flex; flex-direction:column; gap: 16px; }
.hero h1{
  margin: 4px 0 2px;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: -.6px;
  line-height: 1.05;
}
.muted{ color: var(--muted); }
.hero p{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
}
.heroActions{ display:flex; gap: 10px; flex-wrap: wrap; }

.heroBadges{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.badge{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 10px 12px;
}
.badgeK{ font-size: 12px; color: var(--muted2); }
.badgeV{ font-family: var(--mono); font-size: 14px; margin-top: 4px; }

.heroCard{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: var(--radius2);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}
.heroCardTop{ display:flex; justify-content:space-between; align-items:flex-start; gap: 12px; margin-bottom: 8px; }
.kpiLabel{ font-size: 12px; color: var(--muted2); }
.kpiValue{ font-family: var(--mono); font-size: 24px; letter-spacing: -.2px; margin-top: 6px; }
.unit{ font-size: 12px; color: var(--muted); margin-left: 6px; }

.miniLegend{ display:flex; flex-direction:column; gap: 8px; font-size: 12px; color: var(--muted); }
.miniLegendItem{ display:flex; gap: 8px; align-items:center; }
.swatch{ width: 12px; height: 12px; border-radius: 4px; display:inline-block; }
.sA{ background: rgba(124,92,255,.95); }
.sB{ background: rgba(24,211,255,.9); }

.note{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius2);
  padding: 14px;
}
.noteTitle{ font-weight: 750; font-size: 13px; margin-bottom: 8px; }
.note p{ margin:0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--gap);
}
/* ---------- Mapa del tablero (guía) ---------- */
.dashMap{
  margin: 0 0 16px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border-radius: var(--radius2);
  padding: 14px;
  box-shadow: 0 12px 44px rgba(0,0,0,.18);
}
.dashMapTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.dashMapTitle{
  margin: 2px 0 6px;
  font-size: 18px;
  letter-spacing: -.2px;
}
.dashMapSub{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 92ch;
}
.kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.2;
}

.dashLegendRow{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted2);
}
.dashLegendItem{ display:flex; align-items:center; gap: 8px; }
.dotLegend{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
}
.dotLegend.ok{ background: var(--c); }
.dotLegend.warn{ background: var(--w); }
.dotLegend.retry{ background: rgba(255,204,102,.85); box-shadow: inset 0 0 0 2px rgba(0,0,0,.14); }
.dotLegend.bad{ background: var(--d); }

.dashMapGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mapBlock{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  padding: 10px 10px 8px;
}
.mapTitle{
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .2px;
}
.mapLinks{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mapLinks a{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 6px 9px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  text-decoration:none;
  user-select:none;
}
.mapLinks a:hover{ background: rgba(255,255,255,.07); }

#tablero{ scroll-margin-top: calc(var(--topbarH) + 18px); }
.card{ scroll-margin-top: calc(var(--topbarH) + 64px); }

@media (max-width: 980px){
  .dashMapGrid{ grid-template-columns: 1fr; }
}

.card{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  overflow:hidden;
  position:relative;
  content-visibility: auto;
  contain-intrinsic-size: 800px 420px;
}
.card:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(800px 320px at 20% 20%, rgba(124,92,255,.10), transparent 40%),
              radial-gradient(600px 320px at 80% 30%, rgba(24,211,255,.10), transparent 45%);
  opacity:.9;
  pointer-events:none;
}
.card > *{ position:relative; }
.cardHeader{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 10px;
  margin-bottom: 8px;
}
.cardTitle{ font-weight: 800; letter-spacing:.2px; }
.cardSub{ font-size: 12px; color: var(--muted2); margin-top: 4px; }
.pill{
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46,229,157,.35);
  background: rgba(46,229,157,.10);
  color: rgba(46,229,157,.95);
}
.pill.neutral{
  border-color: rgba(124,92,255,.35);
  background: rgba(124,92,255,.10);
  color: rgba(124,92,255,.95);
}
.pill.warn{
  border-color: rgba(255,204,102,.40);
  background: rgba(255,204,102,.10);
  color: rgba(255,204,102,.98);
}
.pill.bad{
  border-color: rgba(255,77,109,.45);
  background: rgba(255,77,109,.12);
  color: rgba(255,77,109,.98);
}

.cardUpdated{
  margin-top: 4px;
  opacity: .90;
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.updMsg{ font-family: var(--mono); font-size: 11px; color: var(--muted2); }
.updMsg.ok{ color: var(--muted2); }
.updMsg.stale{ color: rgba(255,203,151,.95); }
.updMsg.err{ color: rgba(255,122,122,.95); }
.updMsg.retry{ color: rgba(255,203,151,.95); }

.retryBtn{
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
}
.retryBtn:hover{ background: rgba(255,255,255,.06); }
.retryBtn:active{ transform: translateY(1px); }

.updSkel{
  height: 10px;
  min-width: 84px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.updSkel:after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: shimmer 1.2s infinite;
}

.cardFooter{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.metaK{ font-size: 11px; color: var(--muted2); }
.metaV{ font-family: var(--mono); font-size: 13px; margin-top: 3px; }

.span2{ grid-column: span 2; }

canvas{ width: 100%; display:block; border-radius: 12px; }
.bigNumber{
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: -.2px;
}

.divider{
  height:1px; background: var(--stroke);
  margin: 10px 0 8px;
}

.traffic{ display:flex; flex-direction:column; gap: 10px; padding: 4px 2px 4px; }
.trafficItem{ display:flex; gap: 10px; align-items:center; }
.trafficDot{ width:12px; height:12px; border-radius: 50%; }
.trafficDot.ok{ background: var(--c); box-shadow: 0 0 0 0 rgba(46,229,157,.35); }
.trafficDot.warn{ background: var(--w); box-shadow: 0 0 0 0 rgba(255,204,102,.35); }
.trafficDot.bad{ background: var(--d); box-shadow: 0 0 0 0 rgba(255,77,109,.35); }
.trafficName{ font-size: 13px; font-weight: 700; }
.trafficSub{ font-size: 12px; color: var(--muted2); margin-top: 2px; }
.tinyList{
  display:flex; flex-direction:column; gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-height: 112px;
}

/* ---------- Sismos (CR): que el gráfico quepa en un solo vistazo ---------- */
#card-quakes{
  display:flex;
  flex-direction:column;
  /* El card se adapta al viewport. El contenido “largo” (lista) scrollea adentro. */
  max-height: calc(100vh - var(--topbarH) - 24px);
}
#card-quakes .cardHeader,
#card-quakes .cardFooter{ flex: 0 0 auto; }
#card-quakes #chartBars{ flex: 0 0 auto; height: clamp(140px, 22vh, 180px); }
#card-quakes #quakesList{
  flex: 1 1 auto;
  min-height: 0; /* necesario para que el overflow funcione en flex */
  overflow:auto;
  padding-right: 6px;
}

@media (max-width: 740px){
  #card-quakes{ max-height: calc(100vh - var(--topbarH) - 16px); }
  #card-quakes #chartBars{ height: clamp(120px, 24vh, 170px); }
}

/* ---------- Charts “a la vista” (sin fullscreen) ---------- */
/* Idea: el canvas toma su alto del CSS (rect), y useCanvas() ajusta el buffer interno. */
:root{
  --hWiki: clamp(120px, 18vh, 160px);
  --hNewsPulse: clamp(84px, 14vh, 110px);
  --hHeatmap: clamp(120px, 18vh, 170px);
  --hTrends: clamp(110px, 17vh, 150px);
  --hMomentum: clamp(110px, 17vh, 150px);
  --hSources: clamp(86px, 14vh, 120px);
}
:root[data-density="compact"]{
  --hWiki: clamp(110px, 16vh, 145px);
  --hNewsPulse: clamp(78px, 12vh, 100px);
  --hHeatmap: clamp(110px, 16vh, 155px);
  --hTrends: clamp(100px, 15vh, 135px);
  --hMomentum: clamp(100px, 15vh, 135px);
  --hSources: clamp(78px, 12vh, 110px);
}

#chartLine{ height: var(--hWiki); }
#chartNewsPulse{ height: var(--hNewsPulse); }
#chartHeatmap{ height: var(--hHeatmap); }
#chartTrendsBars{ height: var(--hTrends); }
#chartMomentum{ height: var(--hMomentum); }
#chartSourcesBars{ height: var(--hSources); }

/* Cards con listas largas: que el canvas quede visible y el scroll pase adentro */
#card-headlines{
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - var(--topbarH) - 24px);
}
#card-headlines .cardHeader,
#card-headlines .miniViz{ flex: 0 0 auto; }
#card-headlines #headlines{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  padding-right: 6px;
}

#card-sources{
  display:flex;
  flex-direction:column;
  max-height: calc(100vh - var(--topbarH) - 24px);
}
#card-sources .cardHeader,
#card-sources #hnSourcesProgress,
#card-sources .miniViz{ flex: 0 0 auto; }
#card-sources #sourcesGrid{
  flex: 1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right: 6px;
}

@media (max-width: 740px){
  #card-headlines,
  #card-sources{
    max-height: calc(100vh - var(--topbarH) - 16px);
  }
}

.logRow{
  display:flex; justify-content:space-between; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.logT{ color: var(--muted2); }

.legend{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.legendItem{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  font-family: var(--mono);
  font-size: 12px;
}
.legendKey{ display:flex; align-items:center; gap: 10px; }
.legendSw{ width: 10px; height: 10px; border-radius: 3px; display:inline-block; }
.legendPct{ color: var(--muted); }

.tickerGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tickerItem{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.tickerK{ font-size: 12px; color: var(--muted2); }
.tickerV{ font-family: var(--mono); font-size: 18px; margin-top: 6px; letter-spacing: -.2px; display:flex; align-items:baseline; gap: 8px; }
.tiny{ font-size: 11px; color: var(--muted); }
.tiny.stale{ color: rgba(255,204,102,.95); }

.helpText{ margin-top: 10px; font-size: 12px; color: var(--muted2); line-height: 1.4; }

.headlines{
  display:flex; flex-direction:column;
  gap: 10px;
}

.headlinesBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 2px 2px 8px;
}
.seg{ display:inline-flex; gap:8px; flex-wrap:wrap; }
.segBtn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-size: 12px;
  user-select:none;
}
.segBtn:hover{ background: rgba(255,255,255,.06); }
.segBtn.active{
  background: rgba(124,92,255,.16);
  border-color: rgba(124,92,255,.28);
}
.hnSmall{ font-family: var(--mono); font-size: 11px; color: var(--muted2); }

.miniViz{
  margin-top: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 10px;
}
.miniViz canvas{
  width: 100%;
  display:block;
  border-radius: 12px;
}
.miniLegend{
  margin-top: 8px;
  display:grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted2);
}
.miniK{ opacity: .85; }
.miniV{ color: var(--text); opacity: .92; text-align:right; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 740px){
  .miniLegend{ grid-template-columns: auto 1fr auto 1fr; }
}

.sourcesWrap{ margin-top: 10px; max-height: 520px; overflow:auto; padding-right: 6px; }
.sourcesWrap.hidden{ display:none; }
.sourcesGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sourceBlock{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 10px 8px;
  overflow:hidden;
}
.sourceTop{ display:flex; align-items:flex-start; justify-content:space-between; gap: 8px; margin-bottom: 8px; }
.sourceName{ font-weight: 800; font-size: 12px; line-height: 1.2; }
.sourceMeta{ font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-top: 4px; }
.sourceList{ margin:0; padding-left: 18px; display:flex; flex-direction:column; gap: 6px; }
.sourceList li{ font-size: 12px; line-height: 1.35; color: var(--text); }
.sourceList a:hover{ text-decoration: underline; text-underline-offset: 2px; }
.sourceItemMeta{ font-family: var(--mono); font-size: 10px; color: var(--muted2); margin-top: 2px; }

@media (max-width: 860px){
  .sourcesGrid{ grid-template-columns: 1fr; }
  .sourcesWrap{ max-height: 540px; }
}
.hItem{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
}
.hTitle{ font-weight: 750; font-size: 13px; line-height: 1.35; }
.hMeta{ font-family: var(--mono); font-size: 11px; color: var(--muted2); margin-top: 5px; }
.hBadge{
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(24,211,255,.28);
  background: rgba(24,211,255,.08);
  color: rgba(24,211,255,.95);
  white-space:nowrap;
}
.skeleton{
  position:relative; overflow:hidden;
}
.skeleton:after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

/* Metric loading / stale UI */
.metricWrap{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; }
.metricLoading{ padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--muted2); }
.metricError .metricMain{ font-variant-numeric: tabular-nums; }
.metricSub{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted2);
  white-space:nowrap;
}
.metricSubText{ opacity:.95; }
.metricSep{ opacity:.65; }
.badgeMini{
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
}
.badgeMini.stale{
  border-color: rgba(255,163,71,.35);
  background: rgba(255,163,71,.10);
  color: rgba(255,203,151,.95);
}
.retryMini{
  appearance:none;
  border: 0;
  background: transparent;
  color: rgba(24,211,255,.95);
  font-family: var(--mono);
  font-size: 10px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.retryMini:disabled{
  opacity:.6;
  cursor: default;
  text-decoration: none;
}
.tagLoading{ padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.06); }
.unitTiny{ margin-left: 4px; opacity:.7; font-family: var(--mono); font-size: 11px; }



.footer{
  margin-top: 18px;
  border-top: 1px solid var(--stroke);
  padding-top: 14px;
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
}
.footerTitle{ font-weight: 800; }
.footerSub{ font-size: 12px; color: var(--muted2); margin-top: 4px; }
.footerRight{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Density modes */
:root[data-density="compact"]{
  --gap: 12px;
}
:root[data-density="compact"] .card{ padding: 10px; }
:root[data-density="compact"] .heroBadges{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-density="compact"] .tickerGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-density="compact"] .kpiValue{ font-size: 22px; }
:root[data-density="compact"] .cardFooter{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .span2{ grid-column: auto; }
  .tickerGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroBadges{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .glow, .dotLive{ animation:none!important; }
  .btn{ transition:none!important; }
}


/* ---------- Portales (Deep dive por tarjeta) ---------- */
.card[role="button"]{ cursor:pointer; }
.card[role="button"]:focus{ outline:none; box-shadow: 0 0 0 2px rgba(124,92,255,.35); }
/* Hint visual sutil para indicar "dame otro click" */
.card.awaitSecondClick{ box-shadow: 0 0 0 2px rgba(124,92,255,.18); }

.portalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
  z-index: 999;
}
.portalOverlay.hidden{ display:none; }

.portalDrawer{
  width: min(760px, 96vw);
  height: 100%;
  background: rgba(7,10,20,.92);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -20px 0 60px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media (max-width: 720px){
  .portalDrawer{ width: 100vw; border-left:none; }
}

.portalHeader{
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.portalHeaderLeft{ min-width: 0; }
.portalTitle{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.portalSub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.portalHeaderRight{ display:flex; align-items:center; gap: 10px; }

.portalTabs{
  display:flex;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 4px;
}
.tabBtn{
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor:pointer;
}
.tabBtn.active{
  background: rgba(124,92,255,.22);
  color: var(--text);
}

.iconBtn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}

.portalContent{
  padding: 12px 14px 18px;
  overflow:auto;
  flex: 1;
}

.portalSection{ margin-top: 12px; }
.portalSectionHeader{
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.portalChart, .portalMap{
  width: 100%;
  height: clamp(160px, 26vh, 220px);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}

.portalExtras{ display:flex; flex-direction:column; gap: 12px; }
.portalTapeList{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.portalRow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  font-size: 12px;
}
.portalRow .k{ color: var(--muted); }
.portalRow .v{ color: var(--text); font-variant-numeric: tabular-nums; }

.portalControls{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin-bottom: 8px;
}
.control{ font-size: 12px; color: var(--muted); display:flex; align-items:center; gap: 8px; }
.control input[type="range"]{ width: 140px; }
.controlVal{ font-variant-numeric: tabular-nums; color: var(--text); }

.portalList{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.portalBox{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.portalNote{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.portalSources{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.portalSources a{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration:none;
  font-size: 12px;
}
.portalSources a span{ color: var(--muted); font-size: 11px; }

.hidden{ display:none !important; }

body.modalOpen{ overflow:hidden; }


/* Headlines sections (e.g., Epic freebies) */
.hSection{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 2px 2px 0;
  margin-top: 2px;
}
.hSection + .hItem{ margin-top: 2px; }
.hBadge.epic{
  border-color: rgba(150, 120, 255, .35);
  background: rgba(150, 120, 255, .10);
  color: rgba(210, 200, 255, .95);
}


/* -------- Jugabilidad: playbar, pins, cmdk, replay -------- */
.playbar{
  position: sticky;
  top: calc(var(--topbarH) - 4px);
  z-index: 40;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  margin: 8px 0 12px 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(10,14,28,.55);
  backdrop-filter: blur(10px);
}

.replayBox{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 260px;
}

.playLabel{
  font-size: 12px;
  color: var(--muted);
  margin-right: 4px;
}

#replaySlider{
  width: 160px;
}

.playValue{
  font-size: 12px;
  color: var(--text);
  min-width: 56px;
  text-align:right;
}

.replayPanel{
  margin-top: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(10,14,28,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.replayPanelTop{ min-width: 220px; }
.replayPanelTitle{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
}
.replayPanelSub{ font-size: 12px; margin-top: 2px; }

.pinsTray, .movesTray{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.pinsTray{
  flex: 1;
  justify-content:flex-start;
  min-width: 180px;
}

.pinChip, .moveChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  user-select:none;
}
.pinChip:hover, .moveChip:hover{ background: rgba(255,255,255,.07); }

.pinChip .x{
  opacity:.7;
  font-weight:700;
}
.pinChip .x:hover{ opacity:1; }

.card.hot{
  outline: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(255,255,255,.06);
}

.rotHidden{ display:none !important; }

/* Command palette */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 80;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: 90px 14px 14px 14px;
}
.overlay.hidden{ display:none; }

.cmdk{
  width: min(680px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,28,.92);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  overflow:hidden;
}

.cmdkTop{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#cmdkInput{
  flex:1;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
#cmdkInput:focus{ border-color: rgba(255,255,255,.22); }

.cmdkHint{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.cmdkList{
  max-height: 360px;
  overflow:auto;
}

.cmdkItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
  cursor:pointer;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cmdkItem:hover{ background: rgba(255,255,255,.05); }
.cmdkItem.active{ background: rgba(255,255,255,.08); }

.cmdkMain{ min-width:0; }
.cmdkTitle{
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.cmdkSub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.cmdkKey{
  font-size: 11px;
  color: var(--muted2);
  white-space:nowrap;
}

@media (max-width: 720px){
  .playbar{ top: 62px; padding: 10px 8px; }
  .replayBox{ min-width: 220px; }
  #replaySlider{ width: 120px; }
}

.dotWarn{ background: var(--warn); box-shadow: 0 0 0 0 rgba(255,179,71,.45); animation: pulseDot 1.8s ease infinite; }

/* Reorder (drag) */
.dragHandle{ cursor: grab; }
.dragHandle:active{ cursor: grabbing; }
.card.dragging{ opacity: .65; }
.card.dropTarget{ outline: 2px dashed rgba(255,255,255,.16); outline-offset: -6px; }
.pinChip.dragging{ opacity:.6; }


/* --- Clima total --- */
.wxGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.wxMini{
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 8px 8px 10px;
  overflow:hidden;
  position:relative;
}
.wxMini:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 140px at 20% 30%, rgba(24,211,255,.07), transparent 45%),
              radial-gradient(520px 140px at 80% 20%, rgba(124,92,255,.06), transparent 45%);
  opacity:.9;
  pointer-events:none;
}
.wxLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.wxVal{ color: var(--text); }
.wxFooter .metaV{ font-family: var(--mono); }

@media (max-width: 820px){
  .wxGrid{ grid-template-columns: 1fr; }
}

/* --- Tiempo tic-toc --- */
.timeGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.timeMini{
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  padding: 8px 8px 10px;
  overflow:hidden;
  position:relative;
}
.timeMini:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 140px at 20% 30%, rgba(255,255,255,.06), transparent 45%),
              radial-gradient(520px 140px at 80% 20%, rgba(124,92,255,.06), transparent 45%);
  opacity:.9;
  pointer-events:none;
}
.timeLabel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.timeVal{ color: var(--text); }

.timeCharts{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.timeFooter .kv .v{ font-family: var(--mono); }

@media (max-width: 920px){
  .timeGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .timeCharts{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .timeGrid{ grid-template-columns: 1fr; }
}

/* --- Anomaly engine --- */
.anomList{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 160px;
}
.anomItem{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 8px 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.anomBadge{
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  white-space:nowrap;
}
.anomBody{ flex:1; min-width:0; }
.anomTitle{
  font-weight: 700;
  margin: 0 0 2px;
  font-size: 13px;
}
.anomDesc{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.anomHot{ border-color: rgba(255,95,133,.35); }
.anomHot .anomBadge{ border-color: rgba(255,95,133,.35); }
.anomWarn{ border-color: rgba(255,195,0,.35); }
.anomWarn .anomBadge{ border-color: rgba(255,195,0,.35); }


/* Fixed topbar: keep anchors visible */
section, [id]{ scroll-margin-top: calc(var(--topbarH) + 14px); }


/* Back to top (floating) */
.toTop{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.toTop:hover{ background: rgba(255,255,255,.10); }
.toTop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}


/* ---- Mi Wiki (personal) ---- */
.cardHeaderRight{ display:flex; align-items:center; gap:10px; }

.wikiCard{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px 12px 10px;
}
.wikiCardTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.wikiCardTitle{ font-weight: 900; letter-spacing: -.2px; }
.wikiCardSummary{ margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }

.wikiTags{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.tagChip{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  cursor:pointer;
  user-select:none;
}
.tagChip:hover{ background: rgba(255,255,255,.07); }

.wikiQuick{ margin-top: 12px; }
.wikiQuickTitle{ font-size: 12px; color: var(--muted2); margin-bottom: 6px; }
.wikiQuickList{ display:flex; flex-wrap:wrap; gap:8px; }
.wikiLinkBtn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  cursor:pointer;
  text-align:left;
  min-width: 180px;
}
.wikiLinkBtn:hover{ background: rgba(255,255,255,.07); }
.wikiLinkBtn small{ display:block; font-size: 11px; color: var(--muted2); margin-top: 2px; }

.wikiPortal{ display:flex; flex-direction:column; gap: 10px; }
.wikiPortalTop{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.wikiSearch{
  flex: 1;
  min-width: 220px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: var(--font);
  outline:none;
}
.wikiSearch:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 4px rgba(124,92,255,.12);
}

.wikiPortalBody{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
  align-items:start;
}
.wikiNav{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 10px 10px 12px;
  max-height: 62vh;
  overflow:auto;
}
.wikiNavTitle{
  font-size: 12px;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 10px 6px 6px;
}
.wikiNavItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  cursor:pointer;
}
.wikiNavItem:hover{ background: rgba(255,255,255,.05); }
.wikiNavItem.active{
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.25);
}
.wikiNavItem .k{ font-size: 13px; font-weight: 750; }
.wikiNavItem .v{ font-family: var(--mono); font-size: 11px; color: var(--muted); }

.wikiPages{ margin-top: 6px; }
.wikiPageRow{
  padding: 8px 10px;
  border-radius: 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.wikiPageRow:hover{ background: rgba(255,255,255,.05); }
.wikiPageRow.active{
  background: rgba(24,211,255,.10);
  border: 1px solid rgba(24,211,255,.22);
}
.wikiPageRow .t{ font-size: 13px; font-weight: 800; }
.wikiPageRow .s{
  font-size: 12px;
  color: var(--muted);
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.wikiArticle{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px 14px 12px;
  max-height: 62vh;
  overflow:auto;
}
.wikiArticleTitle{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
.wikiArticleMeta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: var(--muted2);
  font-size: 12px;
  margin-bottom: 10px;
}
.wikiBody{ color: var(--text); font-size: 14px; line-height: 1.55; }
.wikiBody p{ margin: 10px 0; }
.wikiBody ul{ margin: 10px 0 10px 18px; }
.wikiBody code{
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
}

.wikiNotes{
  margin-top: 14px;
  border-top: 1px dashed var(--stroke);
  padding-top: 12px;
}
.wikiNotesTitle{
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 6px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wikiNotes textarea{
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--font);
}
.wikiNotes textarea:focus{
  outline:none;
  border-color: rgba(24,211,255,.55);
  box-shadow: 0 0 0 4px rgba(24,211,255,.10);
}

.wikiRelated{ margin-top: 12px; }
.wikiRelatedTitle{
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 6px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wikiRelatedList{ display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 860px){
  .wikiPortalBody{ grid-template-columns: 1fr; }
  .wikiNav, .wikiArticle{ max-height: none; }
}



/* --- Global state (arriba) --- */
.globalState{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.globalBody{ display:flex; flex-direction:column; gap: 2px; }
.globalTop, .globalSub{ display:flex; gap: 8px; align-items:baseline; }
.globalKey{ font-family: var(--mono); font-size: 10px; color: var(--muted2); }
.globalVal{ font-family: var(--mono); font-size: 11px; color: var(--text); }
.globalPill{
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}
.globalPill.ok{
  border-color: rgba(46,229,157,.25);
  background: rgba(46,229,157,.10);
  color: rgba(189,255,227,.98);
}
.globalPill.warn{
  border-color: rgba(255,163,71,.35);
  background: rgba(255,163,71,.10);
  color: rgba(255,203,151,.98);
}
.globalPill.bad{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.12);
  color: rgba(255,190,190,.98);
}
.globalPill.retry{
  border-color: rgba(255,203,151,.30);
  background: rgba(255,203,151,.08);
  color: rgba(255,231,205,.98);
}

.trafficNum{
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--muted2);
  margin-left: 6px;
}
.trafficNum.ok{
  border-color: rgba(46,229,157,.18);
  background: rgba(46,229,157,.06);
  color: rgba(189,255,227,.95);
}
.trafficNum.warn{
  border-color: rgba(255,163,71,.30);
  background: rgba(255,163,71,.08);
  color: rgba(255,203,151,.95);
}
.trafficNum.bad{
  border-color: rgba(255,90,90,.30);
  background: rgba(255,90,90,.08);
  color: rgba(255,190,190,.95);
}

/* En móvil mantenemos TODO visible (sin ocultar estado global). */

/* --- Top semáforo hints --- */
.topTrafficHint{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted2);
  padding: 6px 10px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}

/* --- Logs card --- */
.logControls{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 10px;
}
.logBtn{
  appearance:none;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.logBtn:hover{ background: rgba(255,255,255,.06); }
.logBtn.danger{
  border-color: rgba(255,80,80,.35);
  background: rgba(255,80,80,.08);
}
.logFilter{
  flex: 1 1 240px;
  min-width: 220px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  outline: none;
}
.logChk{
  display:flex;
  align-items:center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  padding: 6px 10px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
#logList{
  max-height: 320px;
  overflow:auto;
  padding-right: 4px;
}
.logRow{
  align-items:flex-start;
}
.logRow .logMsg{
  white-space: pre-wrap;
  word-break: break-word;
}
.logMeta{
  text-align:right;
  min-width: 130px;
  color: var(--muted2);
}
.logLvl{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  margin-bottom: 4px;
  font-size: 11px;
}
.logLvl.ok{ background: rgba(0,255,170,.08); border-color: rgba(0,255,170,.2); }
.logLvl.warn{ background: rgba(255,200,0,.10); border-color: rgba(255,200,0,.25); }
.logLvl.err{ background: rgba(255,80,80,.10); border-color: rgba(255,80,80,.25); }
.logLvl.info{ background: rgba(120,170,255,.10); border-color: rgba(120,170,255,.25); }

/* ------------------------------------------------------------
   Tooltips (consistentes; no dependen del tooltip nativo)
------------------------------------------------------------ */
.tooltip{
  position: fixed;
  z-index: 999;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}
.tooltip.show{
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Ubicación exacta (chip + card)
------------------------------------------------------------ */
.locChip{
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
:root[data-skin="reddit"][data-theme="light"] .locChip{ background: rgba(0,0,0,.03); }
.locChip:hover{ background: rgba(255,255,255,.07); }
.locIcon{ opacity: .92; }

.geoGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.geoRow{
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}
:root[data-skin="reddit"] .geoRow{ background: var(--card2); }
.geoK{ font-size: 11px; color: var(--muted2); margin-bottom: 6px; }
.geoV{ font-family: var(--mono); font-size: 13px; word-break: break-word; }
@media (max-width: 720px){
  .geoGrid{ grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Reddit-ish overrides (layout + estética)
------------------------------------------------------------ */
:root[data-skin="reddit"] .topbar{
  backdrop-filter: none;
  background: var(--card);
  padding: 12px 12px;
}
:root[data-skin="reddit"] .brandLogo{ box-shadow: none; border: 1px solid var(--stroke); }
:root[data-skin="reddit"] .btn,
:root[data-skin="reddit"] .chip{
  border-radius: 10px;
  background: var(--card2);
}
:root[data-skin="reddit"] .btn:hover{ background: rgba(255,255,255,.10); transform: none; }
:root[data-skin="reddit"][data-theme="light"] .btn:hover{ background: rgba(0,0,0,.04); }
:root[data-skin="reddit"] .btn.primary{
  background: linear-gradient(135deg, rgba(255,69,0,.98), rgba(0,121,211,.78));
  border-color: rgba(255,255,255,.14);
}
:root[data-skin="reddit"] .card,
:root[data-skin="reddit"] .heroCard,
:root[data-skin="reddit"] .dashMap,
:root[data-skin="reddit"] .note{
  background: var(--card);
  box-shadow: none;
}
:root[data-skin="reddit"] .card{ border-radius: var(--radius); }
:root[data-skin="reddit"] .dashMap{ border-radius: var(--radius); }
:root[data-skin="reddit"] .heroCard{ border-radius: var(--radius); }
:root[data-skin="reddit"] .pill{ border-radius: 999px; }

@media (max-width: 720px){
  .topbarRight{ max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbarRight::-webkit-scrollbar{ height: 6px; }
  .topbarRight::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }
  :root[data-theme="light"] .topbarRight::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.14); }
}


/* --- Tops panel --- */
#card-tops .topsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
#card-tops .topsBlock{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: calc(var(--radius) - 4px);
  padding: 10px;
  min-height: 0;
}
#card-tops .topsH{
  font-weight: 800;
  letter-spacing: .2px;
}
#card-tops .topsMeta{
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}
#card-tops .topsTwo{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
#card-tops .topsSmallH{
  font-size: 12px;
  color: var(--muted2);
  font-weight: 800;
}
#card-tops .topsList{
  margin: 8px 0 0;
  padding-left: 18px;
  overflow:auto;
  max-height: 300px;
}
#card-tops .topsList.small{
  max-height: 190px;
}
#card-tops .topsLi{
  margin: 0 0 6px;
}
#card-tops .topsA{
  display:inline-block;
  color: inherit;
  text-decoration: none;
}
#card-tops .topsA:hover{
  text-decoration: underline;
}
#card-tops .topsSub{
  font-size: 12px;
  color: var(--muted2);
  margin-left: 2px;
}
#card-tops .topsFoot{
  margin-top: 10px;
  font-size: 12px;
}

@media (max-width: 740px){
  #card-tops .topsGrid{ grid-template-columns: 1fr; }
  #card-tops .topsList{ max-height: 240px; }
  #card-tops .topsList.small{ max-height: 200px; }
}


/* --- Mobile: topbar compact pero con TODO visible (sin esconder nada) --- */
@media (max-width: 720px){
  .topbar{
    padding: 8px 10px 6px;
    row-gap: 6px;
  }

  /* Brand más compacto */
  .brand{ min-width: 0; gap: 8px; }
  .brandLogo{ width: 32px; height: 32px; border-radius: 10px; }
  .brandTitle{ font-size: 14px; line-height: 1.05; }
  .brandSub{ font-size: 11px; line-height: 1.1; margin-top: 0; }

  /* Controles: una sola línea, scroll horizontal si no cabe */
  .topbarRight{
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .topbarRight::-webkit-scrollbar{ height: 8px; }

  .chip{ padding: 6px 8px; gap: 8px; font-size: 11px; }
  .btn{ padding: 7px 9px; font-size: 12px; }
  .btnIcon{ font-size: 12px; }
  .btnText{ font-size: 12px; }

  /* Semáforo: una sola tira, scroll horizontal */
  .topTrafficBar{
    flex: 0 0 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .topTrafficBar > *{ flex: 0 0 auto; }
  .topTrafficLabel{ font-size: 11px; }

  /* Estado global: compacto en una línea (scroll si no cabe) */
  .globalState{ padding: 5px 8px; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .globalBody{ flex-direction: row; gap: 10px; align-items: center; }
  .globalTop, .globalSub{ gap: 6px; }
  .globalKey{ font-size: 9px; }
  .globalVal{ font-size: 10px; }
  .globalPill{ padding: 5px 8px; font-size: 10px; }

  /* Chips del semáforo más compactas */
  .topTrafficBar .trafficItem{ padding: 3px 7px; }
  .topTrafficBar .trafficName{ font-size: 11px; }
  .topTrafficBar .trafficSub{ font-size: 10px; }

  /* Nav: una tira compacta */
  .navBar{
    padding-top: 6px;
    margin-top: 6px;
    gap: 8px;
  }
  .navLink{ padding: 6px 9px; font-size: 12px; border-radius: 10px; }
}