/* ════════════════════════════════════════════════════
   04-ui-resultados.css — Barras, tabs de emoción, top60, geo
   ════════════════════════════════════════════════════ */

/* ── Emotion sub-tabs ────────────────────────────── */

.em-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.em-tab {
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--muted); font: 10px/1 var(--mono); letter-spacing: .08em;
  padding: 5px 10px; cursor: pointer; border-radius: 2px; transition: all .15s;
}
.em-tab:hover  { color: var(--text); }
.em-tab.active { color: #fff; border-color: currentColor; }

/* ── Bar rows ────────────────────────────────────── */

.bar-list { display: flex; flex-direction: column; gap: 7px; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(0,160px) 1fr 56px;
  align-items: center; gap: 10px;
}
.bar-label {
  text-align: right; color: var(--text); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px;
}
.bar-track { background: var(--bg3); height: 6px; border-radius: 1px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 1px; transition: width .6s ease; }
.bar-val   { font-size: 11px; color: var(--muted); }

.sent-row .bar-track { height: 12px; }
.sent-row .bar-label { font-size: 11px; letter-spacing: .10em; }

.rank-num { color: var(--muted); font-size: 10px; min-width: 20px; display: inline-block; }

/* ── TOP 60 grid ─────────────────────────────────── */

.kw-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.kw-chip {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 2px;
  display: flex; gap: 8px; align-items: center; transition: border-color .2s;
}
.kw-chip:hover { border-color: #444; }
.kw-word  { color: var(--text); letter-spacing: .06em; }
.kw-count { color: var(--muted); font-size: 10px; }

/* ── Extraídos · controles de selector de feed ──── */

#extracted-controls {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
#extracted-feed-sel { min-width: 280px; max-width: 100%; }
#extracted-meta {
  font: 10px/1 var(--mono); letter-spacing: .08em; color: var(--muted);
}

/* ── POR FEED · tarjetas (Paso 3) ────────────────── */

#byfeed-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
#byfeed-controls .cfg-input { min-width: 0; flex: 0 1 180px; }
#byfeed-search { flex: 1 1 240px; }
#byfeed-meta {
  font: 10px/1 var(--mono); letter-spacing: .08em; color: var(--muted);
  margin-left: auto;
}

#byfeed-list { display: flex; flex-direction: column; gap: 12px; }

.byfeed-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 2px; padding: 10px 14px;
}
.byfeed-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.byfeed-name {
  color: #fff; font: normal 11px/1.2 var(--mono);
  letter-spacing: .10em; text-transform: uppercase;
}
.byfeed-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.byfeed-tag {
  font: 9px/1 var(--mono); letter-spacing: .08em;
  color: var(--muted); padding: 3px 7px;
  background: var(--bg3); border-radius: 1px;
}
.byfeed-chips {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  padding-top: 4px;
}
.byfeed-chip {
  color: var(--text); letter-spacing: .04em;
  padding: 2px 6px; background: var(--bg3); border-radius: 1px;
  display: inline-flex; align-items: baseline; gap: 5px;
  white-space: nowrap;
}
.byfeed-chip em {
  font-style: normal; font-size: 9px; color: var(--muted);
}

/* ── Geo / continentes ───────────────────────────── */

#continent-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.cont-tab {
  background: var(--bg2); border: 1px solid var(--border); color: var(--muted);
  font: 10px/1 var(--mono); letter-spacing: .08em; padding: 5px 12px;
  cursor: pointer; border-radius: 2px; transition: all .15s;
}
.cont-tab:hover  { color: var(--text); border-color: #444; }
.cont-tab.active { color: #fff; border-color: #fff; }

#geo-content { display: flex; flex-wrap: wrap; gap: 20px; }
.geo-block { flex: 1; min-width: 180px; }
.geo-block h3 {
  font: normal 10px/1 var(--mono); letter-spacing: .14em; color: #fff;
  margin-bottom: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 8px;
}
.geo-feeds { font-size: 9px; color: var(--muted); }
.geo-block .bar-row { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) 34px; }
.geo-block .bar-label { font-size: 10px; }

/* ── Toast ───────────────────────────────────────── */

#toast {
  position: fixed; bottom: 26px; right: 26px;
  background: var(--bg3); border: 1px solid var(--border);
  font: 11px/1 var(--mono); letter-spacing: .10em; color: var(--text);
  padding: 10px 18px; border-radius: 2px;
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 999;
}
#toast.show { opacity: 1; }

.no-data { color: var(--muted); font-size: 11px; padding: 28px 0; letter-spacing: .10em; }