/* base.css — tipografías de marca, variables, topbar, layout, paneles, modal de copys */

/* ALIAS: «PP Fraktion Mono» es el mismo archivo que «PP Fraktion Sans».

   Los archivos detrás son PPFraktionMono-*.ttf, así que la fuente ES la
   mono, pero el @font-face de abajo la bautizó «Sans». docs/PLANTILLAS.md
   decía «PP Fraktion Mono» durante meses: cualquier plantilla escrita
   siguiendo el doc pedía una familia que no existía y caía a la fuente del
   sistema sin avisar de nada —un fallback tipográfico no da error, solo se
   ve distinto—.

   En vez de renombrar la familia y romper las plantillas que ya usan
   «Sans», se declaran las dos. Mismas URL, así que el navegador las
   descarga una sola vez. Los dos nombres funcionan y el nombre correcto
   en un spec nuevo es cualquiera de los dos. */
@font-face {
  font-family: 'PP Fraktion Mono';
  src: url('../assets/fuentes/PPFraktionMono-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'PP Fraktion Mono';
  src: url('../assets/fuentes/PPFraktionMono-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

/* ─── FUENTES PROPIAS · assets/fuentes/ (OFL, servidas desde nuestro dominio) ───
   Estos pesos salieron del enlace de Google Fonts en index.html: cada peso
   tiene una sola fuente para que no compitan dos @font-face iguales. Los
   demás pesos de Barlow (300, 400, 800, itálica) siguen llegando de
   Google. DM Mono es toda local; no existe en 700 y un 700 sale con el 500. */
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fuentes/Barlow-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fuentes/Barlow-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fuentes/Barlow-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('../assets/fuentes/Barlow-Black.ttf') format('truetype');
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../assets/fuentes/DMMono-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../assets/fuentes/DMMono-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}

/* ─── FUENTES DE MARCA · assets/fuentes/ ───
   ITC Avant Garde y PP Fraktion son archivos comerciales: se sirven desde
   el repo (antes, del bucket `fonts` de la base vieja) y por eso el repo
   tiene que seguir privado. */
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('../assets/fuentes/ITCAvantGardeStd-XLt.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('../assets/fuentes/ITCAvantGardeStd-Md.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('../assets/fuentes/ITCAvantGardeStd-Demi.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('../assets/fuentes/ITCAvantGardeStd-BoldObl.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
/* 700 recto. Hasta oct 2026 el único 700 era el BoldObl, así que todo
   título en 700 o 900 salía inclinado. Ahora 700/900 es Bold recto y la
   oblicua se pide con font-style: italic. */
@font-face {
  font-family: 'ITC Avant Garde Gothic';
  src: url('../assets/fuentes/ITCAvantGardeStd-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'PP Fraktion Sans';
  src: url('../assets/fuentes/PPFraktionMono-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'PP Fraktion Sans';
  src: url('../assets/fuentes/PPFraktionMono-Bold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'PP Fraktion Sans';
  src: url('../assets/fuentes/PPFraktionMono-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Sistema La Curaduría */
  --bg:      #070908;
  --bg2:     #0D110D;
  --surf:    #131813;
  --surf2:   #181E18;
  --coral:   #FF736C;
  --cyan:    #75E6F9;
  --green:   #00AA74;
  --yellow:  #F5C842;
  --pink:    #FF7D98;
  --purple:  #B57BFF;
  --cream:   #F0F4EC;
  --t2:      #C8DCC4;
  --t3:      #A8C8A4;
  --t4:      #7E9E7A;
  --bord:    #202820;
  --bord2:   #2A342A;
  /* Tipos */
  --type-artista:   #FF736C;
  --type-venue:     #75E6F9;
  --type-espacio:   #75E6F9;
  --type-gestor:    #00AA74;
  --type-colectivo: #F5C842;
  --type-medio:     #FF7D98;
  --type-radio:     #FF7D98;
  --type-booker:    #B57BFF;
  /* Categorías */
  --cat-perfil:     #75E6F9;
  --cat-agenda:     #FF736C;
  --cat-evento:     #FF736C;
  --cat-resena:     #00AA74;
  --cat-noticia:    #00AA74;
  --cat-galeria:    #00AA74;
  --cat-radio:      #FF7D98;
  --cat-reels:      #FF736C;
  --cat-story:      #FF736C;
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: 'PP Fraktion Sans', 'Barlow', sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── TOPBAR ─── */
.topbar {
  height: 44px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bord);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  flex-shrink: 0;
}
.topbar-logo svg { height: 18px; display: block; }
.topbar-sep { width: 1px; height: 16px; background: var(--bord2); }
.topbar-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--t4);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.status-row { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t4); transition: background 0.3s; }
.status-dot.connected { background: var(--green); }
.status-dot.loading { background: var(--yellow); animation: pulse 1s infinite; }
.status-dot.error { background: var(--coral); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
#statusText { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--t4); letter-spacing: 0.1em; }

/* ─── LAYOUT ─── */
.workspace { display: flex; flex: 1; overflow: hidden; }

/* ── PANEL IZQUIERDO ── */
.panel-left {
  width: 240px;
  min-width: 240px;
  background: var(--bg2);
  border-right: 1px solid var(--bord);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.panel-section {
  padding: 14px 14px;
  border-bottom: 1px solid var(--bord);
}
.panel-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--t4); text-transform: uppercase;
  margin-bottom: 10px;
}

/* Categorías */
.cat-list { display: flex; flex-direction: column; gap: 3px; }
.cat-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--t3);
  font-family: 'PP Fraktion Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.12s;
  display: flex; align-items: center; gap: 10px;
}
.cat-btn:hover { background: var(--surf); color: var(--cream); }
.cat-btn.active {
  background: var(--surf);
  color: var(--cream);
  border-color: var(--bord2);
}
.cat-btn .cat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cat-btn .cat-meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--t4);
  margin-left: auto;
  letter-spacing: 0.1em;
}

/* Select */
.select-wrap { position: relative; }
select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--bord2);
  border-radius: 6px;
  color: var(--cream);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 8px 26px 8px 10px;
  appearance: none; cursor: pointer; outline: none;
}
select:focus { border-color: var(--coral); }
.select-arrow {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--t4); pointer-events: none; font-size: 9px;
}

/* ── CENTRO ── */
.panel-center {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.center-toolbar {
  height: 64px;
  border-bottom: 1px solid var(--bord);
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
  flex-shrink: 0;
  background: var(--bg2);
  overflow-x: auto;
  overflow-y: hidden;
}
.slide-thumb {
  width: 56px; height: 56px;
  border-radius: 4px;
  background: var(--surf);
  border: 1px solid var(--bord2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.12s;
}
.slide-thumb:hover { border-color: var(--coral); }
.slide-thumb.active {
  border-color: var(--coral);
  background: rgba(255,115,108,0.08);
}
.slide-thumb-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: 0.1em;
}
.slide-thumb.active .slide-thumb-num { color: var(--coral); }
.slide-thumb-label {
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  color: var(--t4);
  white-space: nowrap;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.toolbar-spacer { flex: 1; min-width: 12px; }
.toolbar-info {
  display: flex; align-items: center; gap: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--t4);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.dim-badge {
  background: var(--bg);
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 9px;
}
.preview-area {
  flex: 1;
  overflow: auto;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #050605;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 20px 20px;
}
#previewContainer {
  transform-origin: top center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* ── PANEL DERECHO ── */
.panel-right {
  width: 280px;
  min-width: 280px;
  background: var(--bg2);
  border-left: 1px solid var(--bord);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.fields-area {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.fields-section {
  border-bottom: 1px solid var(--bord);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.fields-section:last-child { border-bottom: none; }
.field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.field-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--t4); text-transform: uppercase;
}
.field input, .field textarea {
  background: var(--bg);
  border: 1px solid var(--bord2);
  border-radius: 4px;
  color: var(--cream);
  font-family: 'PP Fraktion Sans', sans-serif;
  font-size: 11px;
  padding: 7px 9px;
  outline: none;
  resize: vertical;
  transition: border-color 0.12s;
}
.field input:focus, .field textarea:focus { border-color: var(--coral); }
.field textarea { min-height: 60px; line-height: 1.4; }
.field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 10px;
}
.field-row .field { margin-bottom: 0; }

/* Botones acción */
.actions-area {
  padding: 12px 14px;
  border-top: 1px solid var(--bord);
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
  background: var(--bg2);
}
.btn {
  padding: 9px;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; cursor: pointer;
  text-transform: uppercase;
  transition: all 0.12s;
  border: none;
  width: 100%;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--bord2);
  color: var(--t3);
}
.btn-outline:hover { border-color: var(--coral); color: var(--coral); }
.btn-primary { background: var(--coral); color: var(--bg); }
.btn-primary:hover { background: #ff5a52; }
.btn-primary:disabled { background: var(--bord2); color: var(--t4); cursor: not-allowed; }
.btn-mini {
  display: inline-block;
  background: var(--surf);
  border: 1px solid var(--bord2);
  border-radius: 4px;
  color: var(--t3);
  font-family: 'DM Mono', monospace;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 8px; cursor: pointer;
  transition: all 0.12s;
}
.btn-mini:hover { border-color: var(--coral); color: var(--coral); }

/* Loading & Empty */
#loadingOverlay {
  position: fixed; inset: 0;
  background: rgba(7,9,8,0.94);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 999; gap: 14px;
}
.spinner {
  width: 28px; height: 28px;
  border: 1.5px solid var(--bord2);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--t4);
  letter-spacing: 0.12em;
}
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  opacity: 0.4;
  padding: 60px 20px;
  text-align: center;
}
.empty-state-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--t4);
  line-height: 1.7; letter-spacing: 0.06em;
}
.warn-box {
  background: rgba(245,200,66,0.07);
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 6px;
  padding: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: var(--yellow);
  line-height: 1.6;
  margin-top: 8px;
}

/* ── Modal de copys ── */
.copys-overlay {
  position: fixed; inset: 0;
  background: rgba(7,9,8,0.85);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 40px;
}
.copys-overlay.open { display: flex; }
.copys-modal {
  background: var(--bg2);
  border: 1px solid var(--bord2);
  border-radius: 8px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.copys-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--bord);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.copys-title {
  font-family: 'ITC Avant Garde Gothic', 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.copys-cat {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--coral);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}
.copys-close {
  background: transparent;
  border: 1px solid var(--bord2);
  color: var(--t3);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.copys-close:hover { border-color: var(--coral); color: var(--coral); }
.copys-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}
.copys-group {
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
}
.copys-group-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--coral);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
}
.copys-field {
  margin-bottom: 10px;
}
.copys-field-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--t4);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.copys-field input,
.copys-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--bord2);
  border-radius: 4px;
  color: var(--cream);
  font-family: 'PP Fraktion Sans', sans-serif;
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
}
.copys-field textarea { min-height: 60px; resize: vertical; line-height: 1.4; }
.copys-field input:focus, .copys-field textarea:focus { border-color: var(--coral); }
.copys-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--bord);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.copys-footer button { flex: 1; }
.copys-list-item {
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 8px;
}
.copys-list-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--coral);
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

/* Scrollbar dentro del modal */
.copys-body::-webkit-scrollbar { width: 4px; }
.copys-body::-webkit-scrollbar-thumb { background: var(--bord2); }

.cat-sub-btn {
  background: transparent;
  border: none;
  color: var(--t4);
  font-family: 'PP Fraktion Sans', sans-serif;
  font-size: 11px; font-weight: 400;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.12s;
  width: 100%;
}
.cat-sub-btn:hover { color: var(--cream); background: var(--surf); }
.cat-sub-btn.active { color: var(--cream); background: var(--surf2); font-weight: 600; }

/* ── NAVEGACIÓN TOPBAR ── */
.nav-tabs {
  display: flex; align-items: center; gap: 2px;
  margin-left: 16px;
}
.nav-tab {
  font-family: 'DM Mono', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--t4);
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s;
}
.nav-tab:hover { color: var(--cream); background: var(--surf); }
.nav-tab.active { color: var(--cream); background: var(--surf); }

/* ── VISTAS PRINCIPALES ── */
#view-generador { display: flex; flex: 1; overflow: hidden; }
#view-plan      { display: none; flex: 1; overflow: hidden; }


/* ═══════════════════════════════════════════════════════════
   INTERFAZ v2 · pasos numerados, lista con buscador, ajustes, caption
   ═══════════════════════════════════════════════════════════ */
.panel-left { width: 272px; min-width: 272px; }
.panel-right { width: 300px; min-width: 300px; }
.panel-label em { font-style: normal; color: var(--coral); margin-right: 6px; }
.panel-right-cab { padding-bottom: 0; border-bottom: 0; }
.panel-right-cab .panel-label { margin-bottom: 0; }
.hint {
  font-family: 'DM Mono', monospace; font-size: 9px; line-height: 1.6;
  color: var(--t4); letter-spacing: 0.04em; margin: 8px 0 0;
}
.lnk {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.08em;
  color: var(--t4); text-decoration: underline; text-underline-offset: 3px; margin-top: 8px;
}
.lnk:hover { color: var(--coral); }

/* lista */
.panel-lista { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#listaWrap { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.buscar {
  width: 100%; background: var(--bg); border: 1px solid var(--bord2); border-radius: 6px;
  color: var(--cream); font-family: 'PP Fraktion Sans', sans-serif; font-size: 12px;
  padding: 9px 11px; outline: none; transition: border-color .12s;
}
.buscar:focus { border-color: var(--coral); }
.buscar::placeholder { color: var(--t4); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  background: transparent; border: 1px solid var(--bord2); border-radius: 20px;
  color: var(--t3); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.04em;
  padding: 4px 9px; cursor: pointer; transition: all .12s; text-transform: lowercase;
}
.chip i { font-style: normal; color: var(--t4); margin-left: 3px; }
.chip:hover { border-color: var(--t3); color: var(--cream); }
.chip.on { background: var(--cream); color: var(--bg); border-color: var(--cream); }
.chip.on i { color: var(--bg); opacity: .6; }
.chip-foto { margin-left: auto; }
.lista { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }
.fila {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 7px 8px; cursor: pointer; transition: background .1s; color: var(--cream);
}
.fila:hover { background: var(--surf); }
.fila.on { background: var(--surf); border-color: var(--bord2); }
.fila.pasado { opacity: .45; }
.fila-foto { width: 6px; height: 6px; border-radius: 50%; background: var(--bord2); flex-shrink: 0; }
.fila-foto.si { background: var(--green); }
.fila-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.fila-txt b { font-family: 'PP Fraktion Sans', sans-serif; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-txt small { font-family: 'DM Mono', monospace; font-size: 8.5px; color: var(--t4); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-pie { margin-top: 2px; }

/* ajustes */
.rango { display: grid; grid-template-columns: 44px 1fr 36px; align-items: center; gap: 8px; margin-bottom: 8px; }
.rango span { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--t3); letter-spacing: 0.06em; }
.rango output { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--t4); text-align: right; }
.rango input[type=range] { width: 100%; accent-color: var(--coral); height: 2px; cursor: pointer; }

/* caption */
.caption textarea {
  width: 100%; min-height: 150px; background: var(--bg); border: 1px solid var(--bord2); border-radius: 6px;
  color: var(--cream); font-family: 'PP Fraktion Sans', sans-serif; font-size: 11.5px; line-height: 1.5;
  padding: 9px 10px; outline: none; resize: vertical;
}
.caption textarea:focus { border-color: var(--coral); }
.caption-acciones { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.caption-acciones .btn { width: auto; padding: 8px 12px; }
.caption-acciones .lnk { margin-top: 0; }

/* El panel izquierdo es una columna: categorías (fijo) + lista (crece).
   Sin flex-shrink:0 en lo fijo, la lista se montaba sobre lo de abajo. */
.panel-left > .panel-section { flex-shrink: 0; }
.panel-left > .panel-lista { flex: 1 1 auto; min-height: 0; border-bottom: 0; }
.panel-left > #warnSection { flex-shrink: 0; }
.lista { min-height: 0; }
.btn-copys { margin-bottom: 4px; }
.chips { max-height: 92px; overflow-y: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

/* La lista necesita altura real aunque la pantalla sea baja: si las
   categorías y los chips se la comen, que scrollee el panel entero. */
/* 240px fijos desbordaban el panel en pantallas bajas: los chips quedaban
   debajo del buscador y el pie salía por abajo. Ahora scrollea el panel
   entero si hace falta, con la lista ocupando lo que queda. */
.panel-left { overflow-y: auto; }
.panel-lista { flex: 1 0 auto; }
#listaWrap { flex: 1 1 auto; }
.lista { flex: 1 1 auto; min-height: 160px; max-height: 60vh; }
.chips { flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-bottom: 2px; }
.chip { white-space: nowrap; flex-shrink: 0; }
.chip-foto { margin-left: 0; }

/* ── Chips: arreglo ─────────────────────────────────────────────────
   En una columna flex, todo lo que no diga lo contrario puede encogerse.
   La lista tiene min-height y no cede, así que el navegador aplastaba
   .chips hasta 2px de alto: los filtros «no se veían» porque no tenían
   dónde. Buscador, chips y pie no se encogen; sólo la lista. */
.buscar, .chips, .lista-pie { flex: 0 0 auto; }
.chips {
  flex-wrap: wrap; overflow: visible; max-height: none;
  gap: 5px; padding: 2px 0 4px;
}
.chip {
  font-size: 10px; letter-spacing: 0.02em; padding: 5px 10px;
  text-transform: none; line-height: 1;
  border-color: var(--bord2); color: var(--t2);
}
.chip i { color: var(--t4); }
.chip.on { background: var(--coral); border-color: var(--coral); color: var(--bg); }
.chip.on i { color: var(--bg); opacity: .7; }
.chip-foto { border-style: dashed; }
.chip-foto.on { border-style: solid; }
.lista { min-height: 120px; }

/* La regla base de .chip lleva text-transform:lowercase y una regla
   heredada pone uppercase con más especificidad: se fija aquí explícito. */
.chips .chip, .chips .chip i { text-transform: none !important; }
/* En pantallas bajas el pie caía fuera del panel: va pegado a la lista,
   dentro del mismo scroll, y la lista cede antes que él. */
.lista { min-height: 96px; }
.lista-pie { margin-top: 4px; }

/* El pie vive dentro de la lista scrolleable, como última fila: así nunca
   queda fuera del panel, pase lo que pase con la altura. */
.lista-pie { position: sticky; bottom: 0; background: var(--bg2); padding: 6px 0 0; margin: 0; }
#listaWrap .lista { padding-bottom: 0; }

/* Más lista, menos aire: a 708px de alto quedaban dos filas visibles. */
.panel-left > .panel-section:first-child { padding-bottom: 8px; }
.cat-btn { padding: 7px 12px; }
.cat-sub-btn { padding: 5px 10px; }
.panel-lista { padding-top: 10px; }
.buscar { padding: 7px 10px; }
.chips { padding: 0 0 2px; gap: 4px; }
.chip { padding: 4px 9px; }
.lista { min-height: 140px; }
.lista-pie { padding-top: 5px; }

/* ── Panel izquierdo compacto cuando ya hay lista ────────────────────
   Las subcategorías que no son la activa se ocultan; la activa queda
   marcada bajo su categoría. Un clic en cualquier categoría las despliega
   otra vez (toggleCat ya lo hace). */
.panel-left.con-lista .cat-btn { padding: 5px 12px; font-size: 11.5px; }
/* Sólo se ocultan las subs de la categoría ACTIVA que no están elegidas.
   Las de una categoría que el usuario abre con clic tienen que verse, si
   no no hay forma de cambiar de sub desde el modo compacto. */
.panel-left.con-lista .subs-compactas .cat-sub-btn:not(.active) { display: none; }
.panel-left.con-lista .cat-sub-btn.active { padding: 4px 10px; }
.panel-left.con-lista > .panel-section:first-child { padding-bottom: 6px; }
.panel-left.con-lista .cat-list { gap: 1px; }
.panel-left.con-lista .lista { min-height: 220px; }