/* ════════════════════════════════════════════════════
   06-ui-isobaras.css — Chips top60, editor de isobaras
   ════════════════════════════════════════════════════ */

/* ── Header del panel ────────────────────────────── */

.iso-panel-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.iso-panel-top .section-title { margin-bottom: 0; }
.iso-pool-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Chips del top 60 ────────────────────────────── */

#kw-pool-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }

.kw-pool-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border: 1px solid #1a1a1a; border-radius: 2px;
  cursor: pointer; font: 10px/1 var(--mono); color: #383838;
  letter-spacing: .06em; transition: all .12s; user-select: none;
}
.kw-pool-chip:hover { border-color: #333; color: #666; }
.kw-pool-chip.active { border-color: rgba(0,255,154,0.35); color: rgba(0,255,154,0.75); }
.kw-pool-chip.active:hover { border-color: var(--green); color: var(--green); }

.kw-pool-rank  { font-size: 9px; color: #252525; min-width: 14px; }
.kw-pool-word  { letter-spacing: .06em; }
.kw-pool-count { font-size: 9px; color: #252525; }

.section-divider { height: 1px; background: #111; margin: 16px 0; }

/* ── Buscador de isobaras ────────────────────────── */

#iso-cfg-search-wrap { margin-bottom: 10px; }
#iso-cfg-search {
  width: 100%; background: #0f0f0f; border: 1px solid #1e1e1e;
  border-radius: 2px; color: var(--text); font: 11px/1 var(--mono);
  letter-spacing: .10em; padding: 7px 10px; outline: none;
  text-transform: uppercase; transition: border-color .15s;
}
#iso-cfg-search::placeholder { color: #282828; }
#iso-cfg-search:focus { border-color: #333; }

/* ── Bloques de isobara ──────────────────────────── */

#iso-cfg-list { display: flex; flex-direction: column; }

.iso-block {
  padding: 10px 12px 11px 12px;
  border-bottom: 1px solid #111;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.iso-block:hover { background: #0d0d0d; }

.iso-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.iso-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; opacity: 0.80; }
.iso-num    { font: 700 10px/1 var(--mono); letter-spacing: .12em; color: #383838; min-width: 22px; }
.iso-label  { font: 10px/1 var(--mono); letter-spacing: .06em; color: #252525; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── Filas de palabras ───────────────────────────── */

.iso-words { display: flex; flex-direction: column; gap: 4px; }

.word-row { display: flex; align-items: center; gap: 5px; }
.word-text {
  flex: 1; background: #0f0f0f; border: 1px solid #1c1c1c;
  color: var(--text); font: 11px/1 var(--mono); letter-spacing: .06em;
  padding: 5px 8px; border-radius: 2px; outline: none;
  text-transform: uppercase; transition: border-color .15s;
}
.word-text:focus { border-color: #2e2e2e; }
.word-size {
  width: 48px; background: #0f0f0f; border: 1px solid #1c1c1c;
  color: #888; font: 11px/1 var(--mono); padding: 5px 6px;
  border-radius: 2px; outline: none; text-align: right; transition: border-color .15s;
}
.word-size:focus { border-color: #2e2e2e; }
.word-del {
  background: none; border: none; color: #242424; font-size: 13px;
  cursor: pointer; line-height: 1; padding: 2px 3px; transition: color .15s; flex-shrink: 0;
}
.word-del:hover { color: var(--accent); }

.iso-add {
  background: none; border: 1px dashed #181818; color: #282828;
  font: 10px/1 var(--mono); letter-spacing: .10em; padding: 5px 10px;
  border-radius: 2px; cursor: pointer; width: 100%;
  transition: color .15s, border-color .15s; margin-top: 2px;
}
.iso-add:hover { color: #555; border-color: #2e2e2e; }