/* ════════════════════════════════════════════════════════════════
   ADVANCED TOOLS MODULES IV — Settings
   Mismo prefijo .atpm- + .atps- (settings-specific) para los
   elementos propios del módulo.
   ════════════════════════════════════════════════════════════════ */

/* ── Sub-navegación entre secciones ──────────────────────────── */
.atps-subnav{
  display:flex;
  gap:3px;
  padding:3px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.atps-subnav::-webkit-scrollbar{ display:none }
.atps-subnav-item{
  flex:1 1 auto;
  min-width:0;
  padding:7px 9px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text3);
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:4px;
  transition:.15s;
  text-align:center;
  white-space:nowrap;
}
.atps-subnav-item:hover{
  color:var(--text);
  background:var(--bg);
}
.atps-subnav-item.atps-active{
  background:rgba(232,184,75,.12);
  color:var(--gold2);
  border-color:rgba(232,184,75,.4);
}

/* ── Sección (panel de una pestaña) ──────────────────────────── */
.atps-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:atpmFadeIn .2s ease forwards;
}
.atps-section-title{
  font-family:var(--ff-cinzel);
  font-size:11px;
  letter-spacing:1.6px;
  color:var(--text);
  text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:1px solid var(--border2);
  margin-top:4px;
}

/* ── Filas de settings ───────────────────────────────────────── */
.atps-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:6px;
  transition:.15s;
}
.atps-row:hover{ border-color:rgba(232,184,75,.25) }
.atps-row-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.atps-row-title{
  font-family:var(--ff-cinzel);
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--text);
  text-transform:uppercase;
  line-height:1.2;
}
.atps-row-sub{
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text3);
  line-height:1.35;
}
.atps-row-control{
  flex-shrink:0;
  display:flex;
  align-items:center;
}

/* Cuando el control es full-width (textarea, input largo) */
.atps-row-vertical{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.atps-row-vertical .atps-row-control{ width:100% }

/* ── Inputs y selects ────────────────────────────────────────── */
.atps-input,
.atps-select{
  background:var(--bg);
  border:1px solid var(--border2);
  color:var(--text);
  font-family:var(--ff-mono);
  font-size:12px;
  padding:6px 10px;
  border-radius:4px;
  outline:none;
  transition:border-color .15s;
  width:100%;
  box-sizing:border-box;
}
.atps-input:focus,
.atps-select:focus{ border-color:var(--gold) }
.atps-input::placeholder{ color:var(--text3) }
.atps-input-sm{ width:90px }
.atps-input-md{ width:160px }

.atps-input-key{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:.5px;
  width:100%;
}

/* Toggle (reusa estilo del módulo Version History) */
.atps-toggle{
  position:relative;
  width:36px;height:20px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:12px;
  cursor:pointer;
  flex-shrink:0;
  transition:.15s;
}
.atps-toggle::after{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text3);
  transition:.2s;
}
.atps-toggle.atps-on{
  background:rgba(232,184,75,.15);
  border-color:var(--gold);
}
.atps-toggle.atps-on::after{
  left:18px;
  background:var(--gold2);
}

/* Slider */
.atps-slider-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  width:170px;
}
.atps-slider{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:2px;
  outline:none;
  cursor:pointer;
}
.atps-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;height:14px;
  background:var(--gold2);
  border:1px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
  transition:transform .1s;
}
.atps-slider::-webkit-slider-thumb:hover{ transform:scale(1.15) }
.atps-slider::-moz-range-thumb{
  width:14px;height:14px;
  background:var(--gold2);
  border:1px solid var(--gold);
  border-radius:50%;
  cursor:pointer;
}
.atps-slider-val{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--gold2);
  width:36px;
  text-align:right;
}

/* Botones de segmento (theme: dark/midnight/sepia) */
.atps-segments{
  display:flex;
  gap:0;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:5px;
  padding:2px;
}
.atps-segment{
  flex:1;
  padding:6px 10px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text3);
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:3px;
  transition:.15s;
  white-space:nowrap;
}
.atps-segment:hover{ color:var(--text) }
.atps-segment.atps-active{
  background:rgba(232,184,75,.15);
  color:var(--gold2);
  border-color:rgba(232,184,75,.35);
}

/* Eye toggle (mostrar/ocultar password) */
.atps-input-wrap{
  position:relative;
  width:100%;
}
.atps-eye{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:var(--text3);
  font-size:12px;
  cursor:pointer;
  padding:4px;
  line-height:1;
}
.atps-eye:hover{ color:var(--gold2) }

/* Status pill (e.g., "API connected") */
.atps-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:10px;
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  border:1px solid var(--border2);
  background:var(--bg);
  color:var(--text3);
}
.atps-pill.atps-good{ color:#4ac870; border-color:rgba(74,200,112,.4) }
.atps-pill.atps-warn{ color:var(--crimson); border-color:rgba(232,74,96,.4) }
.atps-pill-dot{
  width:5px;height:5px;
  border-radius:50%;
  background:currentColor;
}

/* Shortcuts table */
.atps-shortcuts-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
}
.atps-shortcut{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  background:var(--bg3);
  border:1px solid var(--border2);
  border-radius:4px;
}
.atps-shortcut-keys{
  flex-shrink:0;
  min-width:115px;
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--gold2);
  letter-spacing:.5px;
}
.atps-shortcut-keys kbd{
  display:inline-block;
  padding:1px 6px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:3px;
  font-family:inherit;
  font-size:9px;
  color:var(--text2);
  margin-right:3px;
}
.atps-shortcut-desc{
  flex:1;
  font-family:var(--ff-crimson);
  font-size:11px;
  color:var(--text2);
}
.atps-shortcut-group{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--text3);
  text-transform:uppercase;
  margin:6px 0 2px;
  padding:0 4px;
}

/* Sección Reset (peligrosa) */
.atps-danger-section{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed rgba(232,74,96,.3);
  border-radius:6px;
  background:rgba(232,74,96,.03);
}
.atps-danger-section .atps-row{
  background:transparent;
  border:none;
  padding:0;
}
.atps-danger-title{
  font-family:var(--ff-cinzel);
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--crimson);
  text-transform:uppercase;
  margin-bottom:6px;
}

/* Indicador de "guardado" */
.atps-saved-flash{
  position:absolute;
  top:8px;right:36px;
  font-family:var(--ff-cinzel);
  font-size:8px;
  letter-spacing:1.5px;
  color:#4ac870;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.atps-saved-flash.atps-show{ opacity:.9 }

/* Footer info */
.atps-footer-info{
  font-family:var(--ff-mono);
  font-size:9px;
  color:var(--text3);
  padding:8px 10px;
  text-align:center;
  border-top:1px dashed var(--border2);
  margin-top:6px;
  letter-spacing:.5px;
}

/* ── Corpus stats (sección Alyx Learning) ─────────────────────── */
.atps-corpus-stats{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  margin-top:6px;
  border-top:1px dashed var(--border2);
  border-radius:4px;
  background:rgba(107,227,168,.04);
  border-left:2px solid rgba(107,227,168,.30);
}
.atps-corpus-head{
  font-family:var(--ff-mono);
  font-size:11px;
  color:var(--text2);
  line-height:1.6;
}
.atps-corpus-num{
  color:#6be3a8;
  font-weight:700;
  padding:0 2px;
}
.atps-corpus-table{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--ff-mono);
  font-size:10px;
  margin-top:4px;
}
.atps-corpus-row{
  display:grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr 0.8fr 0.7fr;
  gap:8px;
  padding:4px 8px;
  align-items:center;
  border-radius:3px;
}
.atps-corpus-row:nth-child(even){
  background:rgba(255,255,255,.02);
}
.atps-corpus-row-head{
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:9px;
  background:rgba(107,227,168,.08);
  border-bottom:1px solid rgba(107,227,168,.18);
}
.atps-corpus-style{
  color:var(--gold2);
  font-weight:600;
  text-transform:lowercase;
}
.atps-corpus-empty{
  font-style:italic;
  color:var(--text3);
  font-size:11px;
  padding:8px 0;
  text-align:center;
}
.atps-corpus-preview-title{
  font-family:var(--ff-mono);
  font-size:10px;
  color:var(--text3);
  margin-top:6px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.atps-corpus-preview{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:4px;
}
.atps-corpus-preview-item{
  font-size:11px;
  color:var(--text2);
  line-height:1.5;
  padding:3px 6px;
  border-left:2px solid rgba(107,227,168,.25);
  background:rgba(255,255,255,.02);
  border-radius:0 3px 3px 0;
}
.atps-corpus-count{
  display:inline-block;
  font-family:var(--ff-mono);
  font-size:9px;
  color:#6be3a8;
  background:rgba(107,227,168,.12);
  border:1px solid rgba(107,227,168,.28);
  padding:0 4px;
  border-radius:3px;
  margin-right:6px;
  vertical-align:1px;
}

/* ── Hooks de tema aplicados SOLO al panel + módulos ATP ──────── */
/* IMPORTANTE: los temas anulan variables --bg / --gold solo dentro
   del scope del panel ATP. La app principal (sequencer, inspector,
   topbar) NO se ve afectada — solo el panel lateral y sus módulos. */
.atp-panel[data-atp-theme="midnight"],
:root[data-atp-theme="midnight"] .atp-panel,
:root[data-atp-theme="midnight"] .atpm-toast.atpm-shared{
  --bg: #0e0e16;
  --bg2: #14141c;
  --bg3: #1a1a26;
  --bg4: #23232f;
}
.atp-panel[data-atp-theme="sepia"],
:root[data-atp-theme="sepia"] .atp-panel,
:root[data-atp-theme="sepia"] .atpm-toast.atpm-shared{
  --bg: #1a1612;
  --bg2: #221d16;
  --bg3: #2a241c;
  --bg4: #332a1f;
  --gold: #d4a04a;
  --gold2: #e8b860;
}

/* Density: compacto reduce padding global de los módulos ATP */
:root[data-atp-density="compact"] .atpm,
:root[data-atp-density="compact"] .atps-section{
  gap:7px;
}
:root[data-atp-density="compact"] .atps-row,
:root[data-atp-density="compact"] .atpm-preset-card,
:root[data-atp-density="compact"] .atpm-version-card,
:root[data-atp-density="compact"] .atpm-idea-card{
  padding:7px 9px;
}
:root[data-atp-density="comfortable"] .atpm,
:root[data-atp-density="comfortable"] .atps-section{
  gap:14px;
}

/* Font scale */
:root[data-atp-fontscale="small"]    .atpm,
:root[data-atp-fontscale="small"]    .atps-section{ font-size:90% }
:root[data-atp-fontscale="large"]    .atpm,
:root[data-atp-fontscale="large"]    .atps-section{ font-size:110% }
:root[data-atp-fontscale="x-large"]  .atpm,
:root[data-atp-fontscale="x-large"]  .atps-section{ font-size:120% }

/* ════════════════════════════════════════════════════════════════
   ✦ TU VOCABULARIO — Modal de inspección del corpus Alyx
   ════════════════════════════════════════════════════════════════ */
.atps-vocab-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100000;
  padding:24px;
}
.atps-vocab-box{
  width:min(940px, 96vw);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:var(--bg2, #1a1820);
  border:1px solid var(--border, #3d3548);
  border-radius:10px;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
  overflow:hidden;
  font-family:var(--ff-text, system-ui, sans-serif);
}
.atps-vocab-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border, #3d3548);
  background:var(--bg3, #14111a);
}
.atps-vocab-title{
  font-family:var(--ff-cinzel, serif);
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent, #d4a574);
  flex:1;
}
.atps-vocab-count{
  color:var(--text3, #8a7d99);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.atps-vocab-close{
  width:28px; height:28px;
  border:1px solid var(--border, #3d3548);
  background:transparent;
  color:var(--text, #d8d2e0);
  cursor:pointer;
  border-radius:4px;
  font-size:14px;
  line-height:1;
}
.atps-vocab-close:hover{ background:var(--bg, #0e0c14) }

/* Toolbar: tabs de estilo + sort */
.atps-vocab-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 18px;
  border-bottom:1px solid var(--border2, #2a2530);
  flex-wrap:wrap;
}
.atps-vocab-tabs, .atps-vocab-sorts{
  display:flex; gap:4px;
}
.atps-vocab-tab, .atps-vocab-sort{
  padding:6px 11px;
  border:1px solid var(--border2, #2a2530);
  background:transparent;
  color:var(--text3, #8a7d99);
  cursor:pointer;
  border-radius:4px;
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-family:var(--ff-cinzel, serif);
  transition:.15s;
}
.atps-vocab-tab:hover, .atps-vocab-sort:hover{ color:var(--text) }
.atps-vocab-tab-active, .atps-vocab-sort-active{
  color:var(--accent, #d4a574);
  border-color:var(--accent, #d4a574);
  background:rgba(212,165,116,0.08);
}

/* Toolbar 2: filtro de texto + toggle no promovidos */
.atps-vocab-toolbar2{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 18px;
  border-bottom:1px solid var(--border2, #2a2530);
  flex-wrap:wrap;
}
.atps-vocab-filter{
  flex:1;
  min-width:200px;
  padding:7px 10px;
  background:var(--bg3, #14111a);
  border:1px solid var(--border2, #2a2530);
  border-radius:4px;
  color:var(--text);
  font-size:12px;
  font-family:inherit;
}
.atps-vocab-filter:focus{
  outline:none;
  border-color:var(--accent, #d4a574);
}
.atps-vocab-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text3, #8a7d99);
  font-size:11px;
  cursor:pointer;
  user-select:none;
}
.atps-vocab-toggle input{ cursor:pointer }

/* Lista */
.atps-vocab-list{
  flex:1;
  overflow-y:auto;
  padding:6px 0;
}
.atps-vocab-empty{
  padding:48px 18px;
  text-align:center;
  color:var(--text3, #8a7d99);
  font-style:italic;
  font-size:12px;
}
.atps-vocab-row{
  display:grid;
  grid-template-columns: 24px 1fr 110px 130px 60px 1fr 32px;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  font-size:12px;
  transition:background .12s;
}
.atps-vocab-row:hover{ background:rgba(255,255,255,0.025) }
.atps-vocab-promoted{
  color:var(--accent, #d4a574);
  text-align:center;
  font-size:14px;
}
.atps-vocab-unpromoted .atps-vocab-promoted{
  color:var(--text3, #8a7d99);
  opacity:0.4;
}
.atps-vocab-unpromoted{ opacity:0.55 }
.atps-vocab-text{
  color:var(--text, #d8d2e0);
  font-family:var(--ff-text, system-ui);
  word-break:break-word;
}
.atps-vocab-stat{
  color:var(--text3, #8a7d99);
  font-variant-numeric:tabular-nums;
  font-size:11px;
  white-space:nowrap;
}
.atps-vocab-good{ color:#6fcf97 }
.atps-vocab-bad{ color:#cf6f6f }
.atps-vocab-tags{
  color:var(--text3, #8a7d99);
  font-size:10px;
  font-style:italic;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.atps-vocab-del{
  width:26px; height:26px;
  border:1px solid var(--border2, #2a2530);
  background:transparent;
  color:var(--text3, #8a7d99);
  cursor:pointer;
  border-radius:4px;
  font-size:12px;
  line-height:1;
  transition:.15s;
}
.atps-vocab-del:hover{
  color:#cf6f6f;
  border-color:#cf6f6f;
  background:rgba(207,111,111,0.08);
}

/* Footer */
.atps-vocab-footer{
  padding:9px 18px;
  border-top:1px solid var(--border, #3d3548);
  background:var(--bg3, #14111a);
}
.atps-vocab-hint{
  color:var(--text3, #8a7d99);
  font-size:10px;
  letter-spacing:0.5px;
}

/* Responsive: en pantallas pequeñas, simplificar grid */
@media (max-width: 720px){
  .atps-vocab-row{
    grid-template-columns: 24px 1fr 32px;
    grid-template-rows: auto auto;
    row-gap:4px;
  }
  .atps-vocab-text{ grid-column: 2 / 3 }
  .atps-vocab-stat,
  .atps-vocab-tags{
    grid-column: 2 / 3;
    font-size:10px;
  }
  .atps-vocab-del{ grid-row: 1 / 3 }
}