/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — loaded LAST to override every component CSS.
   Goals:
     • Real touch UX (44px targets, no tap delay, no stuck hovers)
     • Smooth (GPU-accelerated drawers, scroll snap, contain)
     • No layout breakage (safe-area insets, dynamic vh, overflow fences)
     • Looks good (backdrop blur, polished transitions, refined density)
   Breakpoint contract:
     ≤1024px = tablet/drawer mode (matches responsive.css)
      ≤768px = phone landscape
      ≤480px = phone portrait
   ═══════════════════════════════════════════════════════════════ */

/* ─── Root: dynamic viewport + safe-area + tap behavior ──────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --vh-fix: 100vh;
}
@supports (height: 100dvh) {
  :root { --vh-fix: 100dvh; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prevent ugly blue tap-highlight on every clickable element */
  -webkit-tap-highlight-color: transparent;
}

/* Faster taps + cleaner gesture intent on every interactive surface */
button, a, .btn, .tab, .sett-tab, .fchip, .kwsg, .pgsel, .cbtn,
.outreach-tab, .outreach-date-btn, .theme-opt, .dopt, .sa,
.mo-close, .pclose, .nav-burger, [onclick], [role="button"] {
  touch-action: manipulation;
}

/* Allow vertical pan inside main scrollables (tables, lists, panels) */
.tblwrap, .pbody, .sb, .pipeline, .outreach-wrap, .analyzer-wrap,
.analytics-wrap, .pcards, #blockedKanban, .imp-map-wrap, .mo-box {
  touch-action: pan-x pan-y;
}

/* ─── Reduced motion: respect user preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ≤1024px — TABLET / PHONE: drawer mode polish
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Layout: use dynamic viewport so iOS Safari URL bar doesn't crop */
  html, body { height: var(--vh-fix); }
  .layout {
    height: var(--vh-fix);
    min-height: var(--vh-fix);
    /* Honor notch on landscape phones */
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  /* Nav: respect notch top + GPU layer so it doesn't repaint with content */
  .nav {
    padding-top: var(--safe-top);
    height: calc(40px + var(--safe-top));
    will-change: transform;
    transform: translateZ(0);
  }

  /* Hamburger: bigger, friendlier tap target */
  .nav-burger {
    min-width: 36px;
    min-height: 36px;
    font-size: 18px;
    padding: 0 10px;
  }

  /* Sidebar drawer: account for notch top, smoother slide, contain repaints */
  .sb {
    top: calc(40px + var(--safe-top));
    height: calc(var(--vh-fix) - 40px - var(--safe-top));
    padding-bottom: calc(20px + var(--safe-bottom));
    will-change: transform;
    contain: layout paint;
    /* Slightly tighter, snappier easing */
    transition: transform .22s cubic-bezier(.32, .72, 0, 1) !important;
    overscroll-behavior: contain;
  }

  /* Backdrop: real blur on capable devices, fallback to dim */
  .sb-backdrop {
    background: rgba(8, 10, 14, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity .22s ease;
  }
  @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .sb-backdrop {
      background: rgba(8, 10, 14, 0.42);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }

  /* Side CRM panel: smoother slide + safe-area bottom + GPU */
  .panel {
    top: calc(40px + var(--safe-top)) !important;
    height: calc(var(--vh-fix) - 40px - var(--safe-top)) !important;
    will-change: transform;
    contain: layout paint;
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
    overscroll-behavior: contain;
  }
  .pbody { padding-bottom: calc(16px + var(--safe-bottom)); }

  /* Modals: GPU-accelerated, scroll-momentum, safe-area aware */
  .mo-box {
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-bottom: var(--safe-bottom);
  }

  /* Disable hover stuck-state on touch devices: only apply hover when fine pointer */
  .tab:hover, .btn:hover, .sett-tab:hover, .fchip:hover,
  .outreach-tab:hover, .theme-opt:hover, .dopt:hover {
    background: inherit;
  }

  /* Tabs: horizontal scroll with snap for nicer swiping */
  .tabs {
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; }

  /* Settings tabs: same scroll-snap treatment */
  .sett-tabs, .ptabs, .outreach-tabs {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sett-tabs::-webkit-scrollbar,
  .ptabs::-webkit-scrollbar,
  .outreach-tabs::-webkit-scrollbar { display: none; }
  .sett-tab, .ptab, .outreach-tab { scroll-snap-align: start; }

  /* Table wrappers: smooth iOS scroll + contain repaints + tighter scrollbar */
  .tblwrap, .pipeline, #blockedKanban, .imp-map-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .tblwrap::-webkit-scrollbar { height: 6px; }
  .tblwrap::-webkit-scrollbar-thumb {
    background: rgba(120, 130, 150, .4);
    border-radius: 3px;
  }

  /* Sticky table head: force GPU layer (iOS sticky bug) */
  .tblwrap thead th { transform: translateZ(0); }

  /* Compact tap targets — user explicitly asked for "social-network" sized
     controls, not Apple-HIG 44px. Down from 40 → 32 across the board so
     buttons/inputs match Twitter/IG visual density. */
  .nav-burger,
  .sb-cancel, .sb-go,
  .btn-primary, .btn-stop,
  .mo-close, .pclose,
  .pf-tab, .pact {
    min-height: 32px;
  }

  /* Nested flex containers: ensure children wrap & don't collapse below 280px.
     Closes the gap from CLAUDE.md "Tab wrap width bug". */
  .az-metrics, .outreach-channel-metrics, .outreach-kpi-row,
  .ana-kpi-row, .r-grid-stats, .r-grid-2col {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  .az-metric, .outreach-ch-metric, .outreach-kpi, .ana-kpi {
    min-width: 0;
    flex: 1 1 calc(50% - 6px);
  }

  /* Long text breaks instead of pushing layout */
  .pnm, .chnm, .chnm a, .pem, .pl, .pdesc,
  .outreach-contact-name, .dm-kol-name {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ≤768px — PHONE: tighter density + fixes
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* iOS rubberband on body when drawer/modal open is locked via JS body lock,
     but also lock here as a CSS belt-and-suspenders. */
  body.scroll-locked { overflow: hidden; position: fixed; width: 100%; }

  /* Toolbar: sticky search so user can filter while scrolling list/table */
  .toolbar {
    position: sticky;
    top: calc(40px + var(--safe-top));
    z-index: 5;
    background: var(--bg1, #11131a);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }

  /* Stats bar: don't truncate values, allow taller cells, refined typography */
  .sc { padding: 8px 10px; min-height: 44px; }
  .sv { font-size: 15px; line-height: 1.1; }
  .sl { letter-spacing: .25px; opacity: .75; }

  /* Sticky pagination at bottom (above safe-area) */
  .pgctrls {
    position: sticky;
    bottom: var(--safe-bottom);
    z-index: 4;
  }

  /* Logbar: hide entirely on phones — too noisy, frees vertical space */
  .logbar { display: none !important; }

  /* Hamburger: compact, social-network sized */
  .nav-burger {
    min-width: 32px;
    min-height: 30px;
    font-size: 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
  }
  .nav-burger:active {
    background: var(--bg3);
    transform: scale(.96);
    transition: transform .08s ease;
  }

  /* Brand: collapse to dot only on tight phones — saves nav space */
  .brand .bname { display: none; }

  /* Side panel & drawer take full viewport with safe-area support */
  .panel, .sb {
    width: min(420px, 100vw) !important;
  }
  .panel {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: none !important;
  }

  /* Modal close — compact circular tap area */
  .mo-close, .pclose {
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  /* Buttons — uniform 32px height across primary, ghost, stop. User
     wants symmetry so the entire row reads as a single visual rhythm
     instead of "primary buttons taller than the rest". */
  .btn, button {
    min-height: 32px;
    font-size: 12px;
  }
  .btn:active {
    transform: scale(.97);
    transition: transform .08s ease;
  }
  .btn-primary, .btn-stop, .sb-go {
    min-height: 32px;
    font-weight: 600;
  }

  /* Inputs — 32px height. iOS still respects the 16px font rule for no-zoom
     (we set the actual font in the per-component blocks below). */
  input, select, textarea {
    min-height: 32px;
    font-size: 13px;
    max-width: 100%;
    box-sizing: border-box;
  }
  textarea { min-height: 64px; }
  /* Native <select> dropdown anchors to the element. If the element runs to the
     right edge, the dropdown overflows the viewport (user saw this on Insights
     country picker). Cap select width so its dropdown stays on-screen.
     Note: browsers render the dropdown popup themselves and most ignore
     max-height on the popup — the height of the popup grows with item count.
     For long lists like the country picker we patch insights.js to truncate
     to top-N + "…" (see insChangeFilter) so the dropdown stays compact. */
  select { max-width: calc(100vw - 24px); }
  /* Insights country/lang dropdowns: shorter intrinsic height so iOS picker
     and Chrome dropdown both render in a more contained space */
  .ins-filter-bar select { font-size: 12px !important; }

  /* ───── FILTROS DRAWER · estética unificada (móvil) ─────
     Toda la barra lateral usa un único ritmo visual:
       • Block padding 14px, separator entre bloques.
       • Title 11px sans semibold (no más mono uppercase 8-10px ilegible).
       • .sa action links se ven como botones reales (28px, border, fondo).
       • Inputs 32×13/8/0-10 (canónico, ya estaba para search) ahora aplica
         también a config / métricas / exchange search.
       • Labels (.cfgl, .mlbl, .mval) suben a 10-11px sans.
       • Filter chips (.fchip) 28-32px tap target con 11px sans.
       • Exchange chips (.ec) y sus botones al/bl crecen para tappear bien. */
  .sblk { padding: 14px 14px; border-bottom: 1px solid var(--line); }
  .sblk .shd { margin-bottom: 10px; }
  .sblk .stit {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .sblk .sa {
    font-family: var(--sans) !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    border: 1px solid var(--line) !important;
    background: var(--bg2) !important;
    color: var(--text2) !important;
    height: 26px;
    cursor: pointer;
  }
  .sblk .sa:hover, .sblk .sa:active { background: var(--bg3) !important; color: var(--text) !important; }

  /* Config búsqueda — frame con padding limpio */
  .scfg { padding: 12px !important; border-radius: 10px !important; }
  .cfgr { margin-bottom: 10px !important; gap: 8px; min-height: 32px; align-items: center; }
  .cfgr:last-child { margin-bottom: 0 !important; }
  .cfgl {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    color: var(--text2) !important;
  }
  .cfgi {
    height: 32px !important;
    min-height: 32px !important;
    width: 90px !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    text-align: right;
    box-sizing: border-box;
  }
  /* Filter intensity dropdown — un poco más ancho */
  .cfgr select.cfgi { width: 140px !important; padding: 0 8px !important; text-align: left; }
  .cfgi-val { font-family: var(--mono) !important; font-size: 11px !important; color: var(--accent); }

  /* Métricas */
  .mblk { margin-bottom: 12px !important; }
  .mrow { margin-bottom: 6px !important; }
  .mlbl {
    font-family: var(--sans) !important;
    /* 13px sans regular: igual peso/tamaño que los inputs de abajo, así
       el ojo lee "label + value" como un único bloque visual. */
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text2) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  .mval {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    color: var(--text3) !important;
  }
  .nin {
    height: 34px !important;
    min-height: 34px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    text-align: center;
    box-sizing: border-box;
    line-height: 34px !important;
  }
  .mpair { gap: 6px !important; }
  .mwarn { font-size: 10px !important; padding: 6px 10px !important; border-radius: 6px !important; }

  /* Filter chips (idioma, país) — tap target 28px+ con sans 11px */
  .fchip {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    min-height: 28px;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center;
  }

  /* Exchange section */
  .exsrch {
    height: 32px !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  .ex-subhd {
    min-height: 32px;
    padding: 6px 10px !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    margin-bottom: 6px !important;
  }
  .ex-cnt { font-size: 9px !important; }
  .ec {
    min-height: 30px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    gap: 6px !important;
  }
  .ecnm { font-family: var(--sans) !important; font-size: 11px !important; color: var(--text) !important; }
  .ect { font-family: var(--mono) !important; font-size: 9px !important; padding: 2px 5px !important; border-radius: 4px !important; }
  .ecb {
    font-family: var(--sans) !important;
    font-size: 10px !important;
    padding: 4px 7px !important;
    min-height: 22px;
    min-width: 22px;
    border-radius: 4px !important;
  }

  /* Sidebar number/text inputs catch-all (dates, generic inputs) */
  .sb input[type="number"]:not(.cfgi):not(.nin),
  .sb input[type="text"]:not(.cfgi):not(.nin):not(.exsrch):not(.kwi):not(.r-kw-add-input),
  .sb input[type="date"],
  .sb select:not(.cfgi) {
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 8px;
    box-sizing: border-box;
  }

  /* Keyword reference rows (.kwr) — uniform 32px */
  .sb .kwr {
    min-height: 32px;
    padding: 0 8px !important;
    border-radius: 8px !important;
  }
  .sb .kwi { font-family: var(--sans) !important; font-size: 12px !important; }
  .sb .kdel { font-size: 16px !important; padding: 0 4px !important; }
  /* Liberar el tope de scroll de la kwlist en el drawer (era 120px) */
  .sb .kwlist { max-height: none !important; }

  /* Collapse chevron — el tap target nativo era 14×14 (sblk-chev). En móvil
     subimos a 32×32 para cumplir con el ritmo de tap. El SVG interno se
     mantiene en 12px para que visualmente no se note el padding extra. */
  .sblk-chev {
    width: 32px !important;
    height: 32px !important;
    margin-right: 4px !important;
  }

  /* Analytics / Insights inline-styled selects — los autores pusieron
     `style="font-size:9px;padding:2px 4px"` directamente, lo que genera
     selects de ~18px que no se pueden tappear. Forzamos el ritmo móvil. */
  #analyticsWrap select,
  #insightsWrap select {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }

  /* Modal padding estándar — 16px en TODOS los modales (recategorize, add KOL,
     panel overlay, etc). Antes había 14/20/12 mezclados. */
  .mo-box,
  #settingsModal > div,
  .outreach-overlay > div:not(.outreach-email-detail) {
    padding: 16px !important;
  }
  /* Empty-state — ritmo único en todos los lugares (analyzer, panel, audits,
     descartados, "sin resultados"). Si el elemento tiene clase .empty o un
     hijo .empty-t/.empty-s/.pempty, aplican estos tamaños. */
  .empty-t, .pempty-t {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }
  .empty-s, .pempty-s {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text3);
    line-height: 1.5;
  }
  .pempty {
    padding: 24px 16px !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    color: var(--text3) !important;
  }

  /* Date / number inputs renderizados inline (panel.js, campañas, CRM)
     que no tienen clase. Forzamos 32px para tappear bien. La regla
     respeta los inputs ya canónicos (.cfgi, .nin) excluyéndolos. */
  input[type="date"]:not(.cfgi):not(.nin),
  input[type="number"]:not(.cfgi):not(.nin):not(.crm-deal-metric-input):not(.camp-num) {
    min-height: 32px;
    font-size: 13px;
    padding: 0 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  /* CRM panel + campañas tenían tamaños custom — los traemos al ritmo */
  .crm-deal-metric-input, .camp-num {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    box-sizing: border-box;
  }

  /* ───── SEARCH INPUTS REZAGADOS · canon 32/13/8 ─────
     Cuatro clases que quedaron fuera de la unificación inicial porque viven
     en sub-paneles (X DM search, inbox search, picker search, IGBot composer
     picker). Mismo ritmo que .sin / .outreach-input para coherencia visual. */
  .xdm-search-input,
  .outreach-inbox-search input,
  .outreach-inbox-search,
  .outreach-picker-search,
  .igb-composer-input {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }

  /* ───── PANEL / OUTREACH INPUTS · canon 32px ─────
     Inputs de CRM, contact log, tag picker, email composer recipients,
     chat inputs — todos dispersos con sizes/paddings distintos. Mismo
     32px de alto para que cualquier formulario en cualquier panel se
     sienta uniforme al teclear. */
  .crm-ex-input,
  .ct-add-input,
  .email-compose-input,
  .mt-input,
  .tag-picker-input,
  .outreach-chat-input,
  .xdm-input {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    box-sizing: border-box;
  }
  /* xdm-input es el textarea principal del chat: respeta resize vertical */
  .xdm-input { min-height: 36px !important; padding: 8px 10px !important; }

  /* ───── LISTA · toolbar 4-en-1 (search arriba, 4 controles abajo) ─────
     Row 2: Avanzados · Estado · Acciones · Mostrar
     "Añadir KOL" vive dentro del dropdown ACCIONES (era redundante tener
     un botón suelto extra junto a Avanzados). */
  body.tab-list .toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  /* Hide phantom grid items that would steal a row (empty achips, hidden bulk-bar) */
  body.tab-list .toolbar .achips { display: none !important; }
  body.tab-list .toolbar .bulk-bar[style*="display: none"],
  body.tab-list .toolbar .bulk-bar[style*="display:none"] { display: none !important; }
  body.tab-list .toolbar .swrap { grid-column: 1 / -1; grid-row: 1; }
  body.tab-list .toolbar #toolbarFilters {
    grid-column: 1; grid-row: 2;
    width: 100%;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--bg2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    color: var(--text2) !important;
  }
  /* listStatusBar wraps Estado + Acciones — span 2 cols (forced to row 2)
     and let its inner 2-col grid fill them (each dropdown = 1 col). */
  body.tab-list #listStatusBar {
    grid-column: 2 / 4; grid-row: 2;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100%;
  }
  body.tab-list #listStatusBar .list-combined-row {
    flex-direction: row !important;
    display: grid !important;
    /* minmax(0, 1fr) for each col so children shrink instead of overflowing.
       Default auto/1fr lets the summary's min-content push the column wider
       than the parent — caused Acciones to render outside listStatusBar. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 100%;
    min-width: 0;
  }
  body.tab-list #listStatusBar .list-filters-collapse,
  body.tab-list #listStatusBar .list-actions-collapse {
    min-width: 0;
    width: 100%;
  }
  body.tab-list #listStatusBar .list-filters-collapse > summary,
  body.tab-list #listStatusBar .list-actions-collapse > summary {
    padding: 6px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase;
    height: 36px;
    display: flex !important;
    align-items: center;
  }
  body.tab-list .toolbar #pgCtrls {
    grid-column: 4; grid-row: 2;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 4px;
    align-items: center;
    justify-content: center;
    height: 36px;
  }
  body.tab-list .toolbar #pgCtrls .pglbl,
  body.tab-list .toolbar #pgCtrls .sortlbl { display: none; }
  /* Mostrar select: ancho mínimo cómodo + flecha visible — antes se cortaba
     a 1 columna del grid y se veía "ALL" garbled. Aplica también en Search
     porque la regla genérica `select { font-size: 16px !important }` de
     responsive.css crea un select de 16px-text en caja de 32px → el
     número se cortaba arriba/abajo. */
  body.tab-list .toolbar #pgCtrls #pgSize,
  body.tab-search .toolbar #pgCtrls #pgSize,
  .toolbar #pgCtrls #pgSize {
    width: auto;
    min-width: 56px;
    height: 36px !important;
    min-height: 36px;
    padding: 0 22px 0 10px !important;
    font-size: 13px !important;
    line-height: 36px;
    font-family: var(--sans);
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg2);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  /* Bulk bar (selection) sits below row 2 if visible */
  body.tab-list .toolbar .bulk-bar { grid-column: 1 / -1; }

  /* ───── Estado / Acciones dropdowns como POPOVER ─────
     Sin esto, abrir Estado expande la columna y empuja el layout. Como
     popover absoluto, el contenido flota encima del grid sin afectar a
     nadie más (ni a la tabla de KOLs debajo). */
  body.tab-list #listStatusBar .list-filters-collapse,
  body.tab-list #listStatusBar .list-actions-collapse {
    position: relative;
  }
  body.tab-list #listStatusBar .list-filters-collapse[open] > .list-filters-row,
  body.tab-list #listStatusBar .list-actions-collapse[open] > .list-actions-row {
    position: absolute !important;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    padding: 8px !important;
    /* Más ancho para que los labels "Calificado", "Negociando", "Trabajando"
       no se corten. Con 2 cols a 11px font cada chip queda ~120px. */
    min-width: 280px;
    max-width: calc(100vw - 16px);
  }
  /* Estado: dropdown a la izquierda (alineado al borde izquierdo del trigger) */
  body.tab-list #listStatusBar .list-filters-collapse[open] > .list-filters-row {
    left: 0; right: auto;
  }
  /* Acciones: dropdown a la derecha (alineado al borde derecho del trigger,
     porque está en la última columna de su grid 2x1) */
  body.tab-list #listStatusBar .list-actions-collapse[open] > .list-actions-row {
    right: 0; left: auto;
  }

  /* Pipeline cards — ESPEJO EXACTO de las dimensiones de Descartados kanban.
     User asked for the same look & feel, so values copied 1:1 from
     render.js's blocked card style:
       container padding 6px, gap 4px between cards
       card padding 8×10, header gap 8px, header mb 6px
       avatar 28×28, name 10px/600, sub 8px mono
     Pipeline has more rows (meta + contact pills + status) than Discarded
     but each individual element now matches its Discarded counterpart. */
  .pcards { padding: 6px !important; gap: 4px !important; }
  .pcard {
    padding: 8px 10px !important;
    flex-shrink: 0;
    height: auto;
  }
  .pcard > div:first-child {
    min-width: 0;
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  .pcard > div:first-child > div:first-child {
    width: 28px !important; height: 28px !important;
    font-size: 10px !important;
  }
  .pcard > div:nth-child(2) { margin-bottom: 5px !important; }
  .pcard-nm { font-size: 10px !important; font-weight: 600 !important; line-height: 1.3; }
  .pcard-kol { font-size: 8px !important; line-height: 1.25; }
  .pmeta { font-size: 8px !important; font-family: var(--mono) !important; }
  .pcard .pct { font-size: 8px; padding: 1px 5px; border-radius: 3px; }
  .pcard > div:last-child[style*="margin-top:4px"] {
    font-size: 8px !important;
    margin-top: 4px !important;
  }
  .pcard .sem, .pcard .pcard-xref { font-size: 8px; padding: 1px 5px; border-radius: 3px; }

  /* Hide the desktop-only "Cmd+click en cards…" hint on phone — talks about
     keyboard modifiers that don't apply to touch input. The class lives on
     the wrapper div (added by pipeline.js) so the rule is specific. */
  .pipe-desktop-tip { display: none !important; }

  /* Reminder banner buttons (Posponer 3d / Ignorar / Contactar) were 8px font
     with 2x6 padding — way under HIG tap target. Bump to comfortable size. */
  #reminderItems .log-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    min-height: 30px !important;
    border-radius: 6px;
  }

  /* Scroll indicator: subtle right-edge fade so users know more columns are
     hidden to the right. The pipeline-row already has overflow-x:auto. */
  .pipeline-row {
    position: relative;
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  }
  /* Stage column headers — más compactos (user pidió menos espacio interno).
     Padding 6×9 (era 9×10), psh-top sin gap inferior, descripción 9px junto
     al título sin margen extra. */
  .pstage .psh { padding: 6px 9px !important; }
  .pstage .psh-top { margin-bottom: 1px !important; }
  .pstage .psh-nm { font-size: 11px; }
  .pstage .psh-desc { font-size: 9px; line-height: 1.2; }
  /* Sort button matches the 32px button rhythm (was 1×5 padding inline,
     barely tappable). */
  .psh-sort {
    height: 28px;
    padding: 0 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }

  /* Per-stage sort menu — clamp to viewport. The menu is anchored via inline
     `top/left` from getBoundingClientRect, which can land off-screen when the
     anchor button sits near the right edge of a horizontally-scrolled column. */
  .pstage-sort-menu {
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    /* JS-set top/left override our left rule, but max() keeps it sane */
    left: clamp(8px, var(--anchor-left, 8px), calc(100vw - 100% - 8px)) !important;
  }

  /* Reminder banner — let the inner items list stay scroll-internal but tighten
     the overall banner so it doesn't eat half the viewport on phones. */
  #pipeWrap > div[style*="background:rgba(240,180,41,.08)"] {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    font-size: 10.5px !important;
  }
  #reminderItems { max-height: 120px !important; }

  /* Outreach kpi & metrics: 2 columns max, taller for legibility */
  .outreach-kpi { padding: 14px 12px; min-height: 76px; }
  .outreach-kpi-v { font-size: 22px; }
  .outreach-kpi-l { font-size: 9px; letter-spacing: .3px; }

  /* Analytics cards */
  .ana-card { border-radius: 14px; }
  .ana-kpi { padding: 14px 12px; min-height: 70px; }

  /* Theme menu: full-width sheet style (iOS feel) */
  .theme-menu {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(12px + var(--safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 14px;
    padding: 8px !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.45);
    animation: sheet-slide-up .22s cubic-bezier(.32,.72,0,1);
  }
  .theme-opt {
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 10px;
    min-height: 44px;
  }
  @keyframes sheet-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  /* Datos dropdown: same iOS-sheet styling when open */
  #datosDrop .dmenu.show, .dmenu.show {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(12px + var(--safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 14px;
    padding: 8px !important;
    animation: sheet-slide-up .22s cubic-bezier(.32,.72,0,1);
  }
  .dopt { padding: 12px 14px !important; font-size: 13px !important; min-height: 44px; }
  .dopt-hd { padding: 8px 14px 4px !important; }
}

/* "Mover" button removed per user feedback — they want real drag-and-drop on
   touch, not an explicit picker. The .pcard-move-btn class is left orphaned;
   it's a no-op now. Drag&drop on touch via Pointer Events polyfill is a
   separate piece of work; meanwhile cards still open the panel on tap and
   the user can change stage from the panel's status select. */
.pcard-move-btn { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  /* On touch we disable the grab cursor — there's no drag yet */
  .pcard { cursor: pointer; }
}

/* ═══════════════════════════════════════════════════════════════
   ≤480px — PHONE PORTRAIT: extra polish
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Brand dot only — full title hidden, save every pixel for tabs */
  .brand { padding: 0; gap: 4px; }
  .brand .bdot { width: 8px; height: 8px; }

  /* Tabs: scroll snap so each tab snaps cleanly into view on swipe */
  .tabs { scroll-snap-type: x mandatory; }
  .tab {
    padding: 0 10px;
    font-size: 11px;
    min-width: max-content;
    height: 40px;
  }
  .tc { font-size: 8px; padding: 1px 4px; }

  /* Settings modal: full-screen sheet feel */
  .mo-box, #settingsModal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--vh-fix);
    max-height: var(--vh-fix);
    border-radius: 0 !important;
    margin: 0 !important;
    padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom));
  }

  /* Side panel: full-screen, safe-area aware */
  .panel { padding-bottom: var(--safe-bottom); }

  /* Sidebar drawer slightly wider on tiny phones for legibility */
  .sb { width: min(300px, 90vw) !important; }

  /* Compact stats bar */
  .sbar { grid-template-columns: 1fr 1fr; }
  .sc { padding: 6px 8px; min-height: 36px; }
  .sv { font-size: 13px; }
  .sl { font-size: 7px; }

  /* Pagination — kept at the canonical 32px button height for consistency
     with the rest of the toolbar (was 28px which was below the rhythm). */
  .pgctrls { gap: 4px; align-items: center; }
  .pgctrls button { min-width: 32px; min-height: 32px; padding: 0 10px; }
  .pgsel {
    height: 32px;
    padding: 0 8px;
    min-width: 60px;
    box-sizing: border-box;
  }
  /* En Search / Analyzer / etc, "↓ subscribers" se solapaba con el "50".
     Acortamos el label y le damos línea propia para que no choque. */
  .pgctrls .pglbl { display: none; }
  .pgctrls .sortlbl {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Bulk actions wrap into 2 rows max */
  .bulk-bar {
    padding: 5px 8px;
    gap: 4px;
    border-radius: 8px;
  }

  /* KPI grids: 2-col */
  .outreach-kpi-row, .ana-kpi-row, .outreach-channel-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }

  /* Toolbar — search field full width, social-network sized */
  .toolbar { padding: 5px 6px; gap: 4px; }
  .swrap { flex: 1 1 100%; min-width: 0; }

  /* ───── CANONICAL SEARCH INPUT (mobile) ─────
     Every search/text input across all tabs uses the same 32×13px rhythm
     so the user never sees one tab's search look "different" from another.
     This consolidates: toolbar .sin, all analyzer search inputs, the
     outreach-input field, and the keyword quick-add input. */
  .sin,
  input.outreach-input,
  #analyzerSearch,
  #azYtSearch,
  #azDirectInput,
  .r-kw-add-input {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    box-sizing: border-box;
  }
  /* Toolbar search keeps its left-icon padding (the .sico ⌕ glyph) */
  .toolbar .sin { padding: 0 10px 0 28px !important; }

  /* Keyword quick-add `+` button — match the canonical 32px rhythm so it
     pairs visually with .r-kw-add-input (now also 32px via the rule above). */
  .r-kw-add-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
  }

  /* Settings field rows */
  .settings-field {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .settings-field:last-child { border-bottom: none; }

  /* Filter chips: bigger tap, equal spacing */
  .fchip {
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 11px;
  }

  /* Long emails / urls in list cards */
  .pem, .pl { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT TABLE ROWS on phones — user said "menos zoom" on Lista.
   Tighter padding + slightly smaller text without sacrificing tap area.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  table { font-size: 10.5px; min-width: 1500px; }
  th { padding: 6px 8px; font-size: 9px; }
  td { padding: 5px 8px; font-size: 10.5px; }
  .chcell { min-width: 120px; gap: 6px; }
  .chav { width: 28px; height: 28px; }
  .chnm { font-size: 11px; max-width: 130px; }
  .chhd { font-size: 8px; }
  .kolnm { font-size: 9.5px; max-width: 90px; }
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS FILTER BAR — uniform control sizing on phone.
   User reported buttons of different sizes & non-uniform letters.
   Force every interactive control in .ins-filter-bar to the same
   height/font so the row reads as a single visual rhythm.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Single column on phone — every native <select> gets full viewport width
     so its dropdown can't overflow right. (Native select dropdowns anchor
     to the element; if the element is at the right edge of viewport the
     dropdown spills off-screen, which is what the user reported.) */
  .ins-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 5px !important;
    padding: 6px !important;
    align-items: stretch;
  }
  .ins-filter-bar .ins-filter-label {
    grid-column: 1 / -1;
    font-size: 9px !important;
    padding-bottom: 2px;
  }
  .ins-filter-bar .ins-filter-select,
  .ins-filter-bar .ins-niche-box,
  .ins-filter-bar .ins-filter-btn {
    height: 30px !important;
    min-height: 30px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .ins-filter-bar .ins-niche-box {
    padding: 0 !important;
  }
  .ins-filter-bar .ins-niche-toggle,
  .ins-filter-bar .ins-niche-edit {
    height: 100%;
    font-size: 11px !important;
    padding: 0 8px !important;
  }
  .ins-filter-bar .ins-filter-match {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 9px !important;
    padding: 2px 0 !important;
  }
  /* Spacer pushes copy button to the right on desktop — drop on mobile */
  .ins-filter-bar > div[style*="flex:1"] { display: none !important; }
  .ins-filter-bar .ins-filter-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FINE POINTER (mouse): re-enable hover affordances cleanly
   Pairs with the no-hover overrides above so desktop UX isn't lost.
   ═══════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* (intentionally empty — desktop hover styles already live in component CSS;
     this query simply documents the intent and guards against future overrides) */
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE — apply to heavy/animated elements regardless of size
   IMPORTANT: never use `transform: translateZ(0)` here — .sb and .panel
   already use translateX(±100%) for drawer slide; an extra transform
   overrides it and makes them appear permanently open. Use `will-change`
   (GPU hint) and `backface-visibility` instead, which don't conflict.
   ═══════════════════════════════════════════════════════════════ */
.sb, .panel, .mo-box, .sb-backdrop {
  will-change: transform;
  backface-visibility: hidden;
}

/* Long card lists: contain layout/paint to avoid jank during scroll */
.pcards, #blockedKanban, .outreach-contact-list, .dm-kol-items, .tblwrap {
  contain: layout paint;
}

/* Avoid background-attachment: fixed (kills mobile scroll perf) — guard */
@media (max-width: 1024px) {
  body, .layout, .main { background-attachment: scroll !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FORM HARDENING — works on all sizes, lighter touch on phones
   ═══════════════════════════════════════════════════════════════ */
input, textarea, select {
  /* Avoid native iOS rounded look that fights theme */
  -webkit-appearance: none;
  appearance: none;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
}

/* Thin scrollbars in panels & lists on touch devices */
@media (pointer: coarse) {
  .sb, .pbody, .pcards, .outreach-contact-list, .dm-kol-items {
    scrollbar-width: thin;
  }
  .sb::-webkit-scrollbar,
  .pbody::-webkit-scrollbar,
  .pcards::-webkit-scrollbar,
  .outreach-contact-list::-webkit-scrollbar { width: 4px; }
  .sb::-webkit-scrollbar-thumb,
  .pbody::-webkit-scrollbar-thumb,
  .pcards::-webkit-scrollbar-thumb,
  .outreach-contact-list::-webkit-scrollbar-thumb {
    background: rgba(120, 130, 150, .35);
    border-radius: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS / MENUS — anchor safely on phones
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Generic dmenu fallback if not handled above */
  .dmenu {
    max-width: calc(100vw - 16px);
    word-wrap: break-word;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR COLLAPSE — manual toggle via the ☰ burger button.
   At >1024px the burger toggles `.no-sb` on `.layout`, reclaiming
   the sidebar's grid column. Persisted in localStorage by main.js.
   We rely on the existing `.no-sb` rule from layout.css (display:none + 1fr)
   so .main keeps its grid-column: 1 and the page never blanks.
   No transform/animation hacks — they conflict with the grid-column shift.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  /* Show burger as a desktop collapse control */
  .nav-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line2, var(--line));
    color: var(--text2);
    border-radius: var(--radius, 6px);
    padding: 0 9px;
    height: 26px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 6px;
    transition: background .15s, color .15s, transform .15s;
  }
  .nav-burger:hover { background: var(--bg3); color: var(--text); }
  .nav-burger:active { transform: scale(.96); }
  /* When user has collapsed, color the icon so the state is visible */
  body.sb-user-collapsed .nav-burger { color: var(--accent, #f0b429); }

  /* On tabs that auto-hide the sidebar (Analyzer / Outreach / Analytics /
     Insights), the burger has nothing to toggle — hide it. The body class
     `tab-no-sidebar` is set in state.js based on the current tab. */
  body.tab-no-sidebar .nav-burger { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PHONE LAYOUT FIXES — addresses user feedback on density:
   • Stats bar: forced 3-col × 2-row grid (was 2-col on small phones)
   • Pipeline toolbar: clean compact grid (was wrapping chaotically)
   • List filter chips: uniform 3-col grid (was cramped wrap)
   • List actions: collapsible <details> (free vertical space for the list)
   • Drawer: clear in-drawer close + bottom apply bar
   • Analyzer: 2-col platform + 2-col action grid (was wrapping ugly)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ───── Stats bar: 3 cols × 2 rows on every phone ───── */
  .sbar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0;
    overflow: hidden;
  }
  .sbar .sc {
    padding: 7px 6px;
    min-height: 50px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
  }
  .sbar .sc:nth-child(3n) { border-right: none; }
  .sbar .sc:nth-last-child(-n+3):not(.sc-right) { border-bottom: none; }
  .sbar .sv { font-size: 14px; line-height: 1.1; font-weight: 700; }
  .sbar .sl { font-size: 9px; letter-spacing: .3px; opacity: .7; margin-top: 1px; }
  .sbar .sc-db { display: none !important; }
  /* Save status row (.sc-right) sits below the 6-cell grid spanning all 3 cols */
  .sbar .sc-right {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--line);
    border-bottom: none;
    padding: 5px 8px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  /* ─── Pipeline toolbar — reglas legadas reemplazadas por el grid de
     4 dropdowns (.pipe-toolbar-row) más abajo. Mantenemos sólo la
     ocultación del select de período cuando estamos en Calendar view. */
  body.pipe-view-calendar #pipeRangoCollapse { display: none !important; }

  /* ───── List filters & actions: collapsible FILTROS + ACCIONES ─────
     Both wrapped in <details> on mobile so the user gets two clean dropdowns
     instead of an overflowing chip wall. The 12 filter chips + 6 action btns
     drop into matching 4-col / 2-col grids when expanded.
     On mobile: 2-col row so they sit side-by-side, matching the toolbar
     Filtros button height for visual symmetry. */
  .list-combined-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px !important;
    align-items: start !important;
    width: 100%;
  }

  /* FILTROS dropdown — same chrome as ACCIONES */
  .list-filters-collapse {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: visible;
    background: var(--bg2, rgba(255,255,255,0.02));
  }
  .list-filters-collapse summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
  }
  .list-filters-collapse summary::-webkit-details-marker { display: none; }
  .list-filters-collapse summary::after {
    content: '▾';
    font-size: 11px;
    transition: transform .2s ease;
    opacity: .6;
    margin-left: 4px;
  }
  .list-filters-collapse[open] summary::after { transform: rotate(180deg); }
  .list-filters-collapse[open] summary {
    border-bottom: 1px solid var(--line);
    background: var(--bg3, rgba(255,255,255,0.04));
  }
  .lc-sum-active {
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    text-align: right;
  }

  /* Filter chips: ahora 2-col grid en vez de 4 — el texto "Calificado",
     "Contactado", "Negociando", "Trabajando" se cortaba en 4 cols porque
     cada celda quedaba a ~58px. Con 2 cols cada chip tiene ~120px y los
     labels caben enteros sin elipsis. */
  .list-filters-collapse .list-filters-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    padding: 8px !important;
  }
  .list-filters-collapse .list-filters-row .fchip {
    height: 34px;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    justify-content: flex-start !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    gap: 6px !important;
  }
  .list-filters-collapse .list-filters-row .fchip svg {
    width: 12px; height: 12px; flex-shrink: 0;
  }
  /* "Sin scrape / Scrapeado" pair — siguen ocupando ambas columnas en la
     última fila para que se diferencien visualmente. */
  .list-filters-collapse .list-filters-row .list-filters-special {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--line);
    padding-top: 8px !important;
    margin-top: 2px !important;
  }
  .list-filters-collapse .list-filters-row .list-filters-special .fchip {
    grid-column: span 1;
    margin: 0 !important;
  }

  /* Actions wrapped in <details> by render.js — collapsed by default on phones */
  .list-actions-collapse {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: visible;
    background: var(--bg2, rgba(255,255,255,0.02));
  }
  .list-actions-collapse summary {
    list-style: none;
    cursor: pointer;
    padding: 9px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: .5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }
  .list-actions-collapse summary::-webkit-details-marker { display: none; }
  .list-actions-collapse summary::after {
    content: '▾';
    font-size: 11px;
    transition: transform .2s ease;
    opacity: .6;
  }
  .list-actions-collapse[open] summary::after { transform: rotate(180deg); }
  .list-actions-collapse[open] summary {
    border-bottom: 1px solid var(--line);
    background: var(--bg3, rgba(255,255,255,0.04));
  }
  .list-actions-collapse .list-actions-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    padding: 8px !important;
    margin-left: 0 !important;
  }
  .list-actions-collapse .list-actions-row .btn {
    margin: 0 !important;
    height: 38px;
    font-size: 11px !important;
    padding: 0 8px !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .list-actions-collapse .list-actions-row .btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* ───── Sidebar drawer: clear close button + apply bar + full height ─────
     layout.css line 324 sets `max-height: 250px` on .sb at ≤900px, intended
     for a stacked-grid sidebar; that fights with our fixed-position drawer
     and clips it. Force full height + un-cap max-height so all filters fit. */
  .sb {
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column;
    height: calc(var(--vh-fix) - 40px - var(--safe-top)) !important;
    max-height: calc(var(--vh-fix) - 40px - var(--safe-top)) !important;
    min-height: calc(var(--vh-fix) - 40px - var(--safe-top));
    bottom: 0 !important;
    overflow-y: auto;
  }
  /* Injected by main.js: header bar inside the drawer */
  .sb-mobile-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg1);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .sb-mobile-header-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text);
  }
  .sb-mobile-close {
    background: var(--bg3);
    border: 1px solid var(--line);
    color: var(--text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
  }
  .sb-mobile-close:active { transform: scale(.94); }
  /* Apply / done bar at bottom of drawer */
  .sb-mobile-applybar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + var(--safe-bottom));
    background: var(--bg1);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .sb-mobile-applybar .btn {
    flex: 1;
    height: 42px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
  }
  /* Sidebar inner blocks scroll between header and applybar */
  .sb > .sblk:first-of-type { margin-top: 0; }

  /* ───── Analyzer: 4-col platform row + 2-col action grid (uniform sizes) ─────
     User asked for "4 columnas y 3 filas" with all buttons same size. We render:
       Row 1 (4 cols): YouTube · Instagram · X · Todas
       Row 2 (2 cols): Analizar metricas (full width — primary CTA)
       Row 3 (2 cols): Análisis IA · Extraer keywords
       Row 4 (2 cols): Buscar similares · Usar como filtros
     All buttons share height/font/padding so the rhythm is symmetric. */
  /* Plataforma + Acciones: el styling ahora vive en analyzer.css con
     clases específicas (.az-platform-bar / .az-actions-grid). Solo
     aplicamos ajustes muy chicos para móvil, sin romper la grilla. */

  /* ───── Analyzer: thinner search bars matching the shared toolbar height
     so search inputs feel identical across every tab (symmetry rule). ───── */
  #analyzerWrap input.outreach-input,
  #analyzerWrap #azYtSearch,
  #analyzerWrap #azDirectInput,
  #analyzerWrap #analyzerSearch {
    height: 32px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }
  #analyzerWrap #azYtSearchBtn,
  #analyzerWrap #azDirectBtn {
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OUTREACH CHANNEL ROW + IGBot NAV (mobile)
   • Channel buttons (Email/X/IG/Telegram) → single 4-col row instead of
     wrapping to 2 rows. Frees vertical space; user explicitly requested.
   • IGBot top nav (Bots/Plantillas/Historial/Listas/Blacklist/Extensión)
     → 2 rows × 3 cols grid. Was a horizontal-scroll strip that cut off
     "Bots" on the left when scrolled to see "Blacklist".
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Channel selector mobile: grid 4 cols pero ahora con cards estilo
     az-platform-btn (icon top + label below). El styling base vive en
     outreach.css; aquí solo aseguramos 4 columnas exactas en móvil. */
  .outreach-channel-sel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100%;
  }

  .igb-nav {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }
  .igb-nav-btn {
    padding: 7px 4px !important;
    font-size: 11px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Auto-DM stats — 5 KPIs in a single row on mobile (user request).
     The previous flex-wrap created a 3+2 layout; grid forces all five
     side-by-side. Cells stay narrow but legible thanks to the mono font. */
  .igb-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    width: 100%;
    flex-wrap: nowrap !important;
  }
  .igb-kpi {
    min-width: 0 !important;
    padding: 6px 2px !important;
  }
  .igb-kpi-v { font-size: 14px !important; }
  .igb-kpi-l { font-size: 9px !important; letter-spacing: .2px !important; }

  /* Plantillas DM cards — single column, no min-width (was 280px, which
     overflowed the viewport on narrow phones and pushed the "X VARIANTES"
     badge past the right edge — user circled it). Plus the badge itself
     gets a tighter mobile size so it fits even on a 320px screen. */
  .igb-cards {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .igb-card {
    padding: 10px !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .igb-card-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .igb-card-name {
    font-size: 12px !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .igb-card-status {
    font-size: 9px !important;
    padding: 2px 6px !important;
    letter-spacing: 0 !important;
    flex-shrink: 0;
  }
  .igb-card-actions .igb-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }
}

@media (max-width: 768px) {
  #outreachWrap input:not([type="checkbox"]):not([type="radio"]),
  #outreachWrap select,
  #outreachWrap textarea:not(.compose-editable):not(.sig-editable),
  #outreachWrap .outreach-input {
    min-height: 36px;
    font-size: 13px;
    border-radius: 8px;
  }
  #outreachWrap .btn,
  #outreachWrap button:not(.outreach-tab):not(.compose-tool):not(.outreach-var-pill) {
    min-height: 36px;
    font-size: 12px;
    padding: 0 12px;
    border-radius: 8px;
    box-sizing: border-box;
  }
  /* Variable pills ({nombre}, {canal}, {subs}, {email}, {pais}) — quedaban
     enormes y con anchos distintos por la regla genérica de #outreachWrap.
     Forzamos chips compactos uniformes para que el row se lea como
     "botones de inserción" y no como acciones primarias. */
  #outreachWrap .outreach-vars {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-left: 0 !important;
  }
  #outreachWrap .outreach-var-pill {
    min-height: 26px !important;
    height: 26px;
    padding: 0 10px !important;
    font-size: 10px !important;
    line-height: 1;
    border-radius: 13px !important;
    flex: 0 0 auto;
  }
  /* Compose toolbar (B / I / U / Sans Serif / TT / color / align / link / img …)
     — every control gets the same height, padding and radius so the row reads
     as a uniform editor strip instead of mixed widget sizes. The previous
     defaults left selects taller than buttons because the generic mobile
     `select { min-height: 32px }` rule beat the toolbar's button height of 24px. */
  #outreachWrap .compose-toolbar {
    gap: 4px !important;
    padding: 5px 6px !important;
    flex-wrap: wrap;
  }
  #outreachWrap .compose-toolbar button,
  #outreachWrap .compose-toolbar select,
  #outreachWrap .compose-toolbar input[type="color"] {
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px;
    padding: 0 8px !important;
    font-size: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: var(--bg2);
    color: var(--text);
    box-sizing: border-box !important;
  }
  /* Selects need a bit more horizontal room for the chevron/value */
  #outreachWrap .compose-toolbar select {
    min-width: 80px;
    max-width: 130px;
    padding-right: 18px !important;
  }
  /* Color picker: compact square, no extra padding */
  #outreachWrap .compose-toolbar input[type="color"] {
    width: 32px !important;
    min-width: 32px;
    padding: 2px !important;
    cursor: pointer;
  }
  /* Hide the inline file input under the attach (📎) button */
  #outreachWrap .compose-toolbar input[type="file"] { display: none !important; }
  /* Separators stay thin */
  #outreachWrap .compose-toolbar-sep { height: 18px !important; margin: 0 2px !important; }
  /* Section labels — match in size so the form reads cleanly */
  #outreachWrap label,
  #outreachWrap .outreach-label,
  #outreachWrap .outreach-section-title {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STATS BAR TOGGLE — collapsible .sbar to free vertical space.
   The toggle pill is injected by main.js right above .sbar. Tapping
   adds `body.sbar-hidden`; persisted in localStorage as kol_sbar_hidden.
   Desktop: toggle is hidden (stats are part of the workflow there).
   ═══════════════════════════════════════════════════════════════ */
.sbar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg2);
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 5px 14px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  height: 24px;
  flex-shrink: 0;
}
.sbar-toggle:hover { background: var(--bg3); color: var(--text2); }
.sbar-toggle:active { transform: scale(.99); }
.sbar-toggle-chev {
  font-size: 8px;
  opacity: .65;
  transition: transform .2s ease;
}
body.sbar-hidden .sbar-toggle-chev { transform: rotate(180deg); }
@media (max-width: 1024px) {
  .sbar-toggle { display: flex !important; }
  body.sbar-hidden .sbar { display: none !important; }
}

/* Toolbar / search input: smaller height on phones — was 38px, now 32px */
@media (max-width: 768px) {
  .toolbar .sin {
    height: 32px;
    font-size: 13px !important;
    padding: 0 10px 0 26px !important;
    border-radius: 8px;
  }
  .toolbar .swrap { min-height: 32px; }
  .toolbar .sico { font-size: 10px; }
  /* Toolbar wrapper itself slightly tighter */
  .toolbar { padding: 5px 8px !important; }
}

/* ─── Phone portrait: even tighter density ─── */
@media (max-width: 480px) {
  .sbar .sv { font-size: 13px; }
  .sbar .sl { font-size: 7px; }
  .sbar .sc { padding: 6px 4px; min-height: 46px; }

  /* 5-col chip grid still works at 360px with 9px font */
  .list-filters-row .fchip { font-size: 9px !important; padding: 0 3px !important; }
}

/* Desktop: <details> wrappers are transparent, chips/actions inline as before */
@media (min-width: 769px) {
  .list-actions-collapse,
  .list-filters-collapse { display: contents; }
  .list-actions-collapse summary,
  .list-filters-collapse summary { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY: visible focus on touch keyboards / external kbds
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, .btn:focus-visible, .tab:focus-visible {
  outline-offset: 1px;
}

@media (max-width: 540px) {
  /* Modal "Añadir KOL manual" — en pantallas chicas el grid de 2 columnas
     hacía que los inputs se cortaran y forzaba scroll horizontal. Lo
     colapsamos a 1 columna para que cada campo ocupe el ancho completo y
     se vea legible sin desplazarse. */
  .addkol-modal {
    padding: 14px 14px 18px !important;
  }
  .addkol-modal .addkol-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .addkol-modal input,
  .addkol-modal select,
  .addkol-modal textarea {
    font-size: 14px !important;
    min-height: 38px;
  }
}

/* ─── Panel del KOL · header status row (Qualified / Discard / Delete) ─────
   La regla genérica `select { min-height:32px; font-size:13px }` agrandaba
   el select de pipe-status y lo hacía ver desproporcionado respecto a los
   botones "Descartar" / "Eliminar" (que tienen font-size:9px en desktop y
   son más compactos). Forzamos los tres a la misma altura/tipografía para
   que la fila del panel se vea como una unidad cohesiva. */
@media (max-width: 768px) {
  #sidePanel .pstsel,
  #sidePanel .btn-disc {
    height: 32px;
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    line-height: 32px;
    box-sizing: border-box;
  }
  #sidePanel .pstsel {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 26px !important;
    background-position: right 8px center;
  }
  #sidePanel .btn-disc {
    flex: 0 0 auto;
  }
}

/* ─── Panel del KOL · polish general de inputs/botones ─────────
   El panel reúne componentes con tamaños inconsistentes (la regla
   genérica `input,select { min-height:32px; font-size:13px }` los empuja
   todos hacia arriba pero deja paddings/bordes raros). Esta capa los
   alinea: misma altura, mismo radio, misma tipografía. Hace que el panel
   se lea como un sistema coherente en vez de "cuadritos sueltos". */
@media (max-width: 768px) {
  #sidePanel input[type="text"],
  #sidePanel input[type="email"],
  #sidePanel input[type="url"],
  #sidePanel input[type="tel"],
  #sidePanel input[type="number"],
  #sidePanel input[type="date"],
  #sidePanel select:not(.pstsel),
  #sidePanel textarea {
    height: 36px;
    min-height: 36px;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--line) !important;
    background: var(--bg2) !important;
    color: var(--text) !important;
    box-sizing: border-box;
    font-family: var(--sans);
  }
  #sidePanel textarea {
    height: auto;
    min-height: 64px;
    padding: 8px 10px !important;
    line-height: 1.45;
  }
  /* Calculator/Audit: inputs cortos (numéricos, fecha) usan font-mono */
  #sidePanel input[type="number"],
  #sidePanel input[type="date"],
  #sidePanel .audit-controls input,
  #sidePanel .conv-input {
    font-family: var(--mono) !important;
    font-size: 12px !important;
  }
  /* Botones secundarios dentro del panel — homogéneos */
  #sidePanel .paBtn,
  #sidePanel .log-btn {
    min-height: 32px;
    height: 32px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 8px;
  }
  /* Hace que el botón "▶ Analizar" del compliance audit no desborde */
  #sidePanel .audit-controls .audit-field-btn {
    height: 36px;
    font-size: 12px !important;
    padding: 0 14px !important;
  }
}

/* ─── Settings · tipografía coherente entre labels e inputs ────────
   Antes: labels en mono 9-11px y selects/inputs en `font-size:16px !important`
   con peso bold (heredado del user-agent), creando un contraste enorme y
   "boxes que parecen muy grandes para el texto que los rodea". Esta capa
   harmoniza el sistema:
   - labels: 13px sans regular (legibles, no hacen sombra al input)
   - inputs/selects: 14px sans regular (suficientemente grande para evitar
     zoom de iOS en taps largos sin parecer titulares)
   - mismo padding, mismo border-radius, misma altura (40px) → forman una
     fila consistente con el label arriba y el control abajo */
@media (max-width: 768px) {
  #settingsBody .settings-section { margin-bottom: 18px; padding-bottom: 14px; }
  #settingsBody .settings-title {
    font-size: 14px !important;
    font-weight: 600;
    margin-bottom: 4px;
    font-family: var(--sans);
  }
  #settingsBody .settings-desc {
    font-size: 11px !important;
    line-height: 1.5;
    color: var(--text3);
    margin-bottom: 10px;
    font-family: var(--sans);
  }
  #settingsBody .settings-label {
    font-size: 12px !important;
    font-weight: 500;
    color: var(--text2);
    font-family: var(--sans);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 4px;
  }
  /* Settings inputs/selects: tipo de display unificado.
     `font-size:14px` mantiene la tipografía cómoda sin parecer titulo,
     pero usamos `font-size:16px` solo en TEXT inputs para evitar el
     auto-zoom de iOS al hacer focus (selects no provocan zoom). */
  #settingsBody .settings-input,
  #settingsBody select.settings-input,
  #settingsBody textarea.settings-input {
    font-size: 14px !important;
    font-weight: 400;
    font-family: var(--sans) !important;
    height: 40px;
    min-height: 40px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: var(--text);
    box-sizing: border-box;
    line-height: 40px;
  }
  #settingsBody textarea.settings-input {
    height: auto;
    min-height: 80px;
    padding: 10px 12px !important;
    line-height: 1.5;
  }
  /* TEXT inputs (donde el usuario teclea) usan 16px para iOS no haga zoom */
  #settingsBody input[type="text"].settings-input,
  #settingsBody input[type="email"].settings-input,
  #settingsBody input[type="password"].settings-input,
  #settingsBody input[type="search"].settings-input,
  #settingsBody input[type="tel"].settings-input,
  #settingsBody input[type="url"].settings-input,
  #settingsBody input[type="number"].settings-input {
    font-size: 16px !important;
    line-height: 40px;
  }
  /* Save button alineado con la altura del input */
  #settingsBody .settings-save-btn,
  #settingsBody .settings-connect-btn {
    height: 40px;
    min-height: 40px !important;
    font-size: 12px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
  }
  /* Section status badge alineado con la nueva escala */
  #settingsBody .settings-status {
    font-size: 10px;
    padding: 2px 8px;
    vertical-align: 2px;
  }
}

/* ─── Sidebar de Filtros (.sb) · misma harmonización ───────────────
   El sidebar usa clase `aside.sb` (no `#sidebar`). Same approach que
   en Settings: labels y controles armonizados para que no haya saltos
   de tamaño entre el texto del label y el texto dentro del input. */
@media (max-width: 768px) {
  aside.sb .shd .stit,
  aside.sb .pl,
  aside.sb label {
    font-size: 12px !important;
    font-weight: 500;
    color: var(--text2);
    font-family: var(--sans);
    text-transform: none;
    letter-spacing: 0;
  }
  /* nin = inputs numéricos (Suscriptores min/max, Avg Views, etc).
     cfgi = inputs de configuración (max channels, intensidad).
     kwi  = keyword input. Todos al mismo sistema tipográfico. */
  aside.sb input.nin,
  aside.sb input.cfgi,
  aside.sb input.kwi,
  aside.sb input[type="number"],
  aside.sb select {
    font-size: 16px !important;
    font-weight: 500;
    font-family: var(--sans) !important;
    height: 34px;
    min-height: 34px;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--line);
    background: var(--bg2);
    color: var(--text);
    box-sizing: border-box;
    line-height: 34px;
    text-align: center;
  }
  aside.sb input.kwi { text-align: left; padding: 0 12px !important; }
  aside.sb input[type="text"],
  aside.sb input[type="search"] {
    font-size: 16px !important;
    height: 36px;
    min-height: 36px;
    padding: 0 12px !important;
    border-radius: 8px !important;
    text-align: left;
    font-family: var(--sans) !important;
    font-weight: 400;
  }
  /* Chips de filtros rápidos: tamaño parejo */
  aside.sb .fchip {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-family: var(--sans);
    font-weight: 500;
  }
}

/* ─── Tabs en desktop angosto: caben todas sin truncarse ──────────
   Entre 901px y 1400px (tablet landscape / laptop chico), las 8 tabs
   + Settings/Guardar/Datos no caben con los paddings por defecto y
   "Insights" se cortaba a "Ins". Apretamos padding+font solo en ese
   rango. Específicamente sobre `.tabs .tab` para vencer pro.css que
   define `.tab { font-size:13px; padding:0 14px; height:48px }`. */
@media (max-width: 1400px) and (min-width: 901px) {
  .tabs .tab {
    padding: 6px 10px !important;
    font-size: 11px !important;
    height: 44px !important;
    gap: 3px !important;
  }
  .tabs .tab .tc { font-size: 8px !important; padding: 1px 5px !important; }
}

/* ─── Mobile · ocultar bulk-bar de selección ──────────────────
   En móvil la barra "1 sel. → Status / Apply / Scrape / Enrich YT /
   Email / Discard sel." duplica las acciones que ya viven en el
   dropdown ACCIONES y empuja el layout. En PC se mantiene porque
   ahí sí cabe y es útil para selección masiva.
*/
@media (max-width: 1024px) {
  #bulkBar.bulk-bar { display: none !important; }
  body.tab-list .toolbar .bulk-bar,
  body.tab-search .toolbar .bulk-bar { display: none !important; }
}

/* ─── Mobile · LIST toolbar overflow fix ──────────────────────
   El active-label del summary ("STATUS A..") se truncaba feo cuando
   la columna era estrecha. Lo escondemos en pantallas pequeñas para
   que solo se vea "ESTADO" y "ACCIONES" — el contenido seleccionado
   se ve al abrir el dropdown. */
@media (max-width: 540px) {
  body.tab-list #listStatusBar .lc-sum-active { display: none !important; }
  body.tab-list #listStatusBar .list-filters-collapse > summary,
  body.tab-list #listStatusBar .list-actions-collapse > summary {
    justify-content: center !important;
    padding: 6px 6px !important;
    font-size: 10px !important;
  }
}

/* ─── Pipeline toolbar · 4 dropdowns idénticos al toolbar de Lista ──
   Filtros · Vista · Orden · Plataforma — mismo chrome que las cards
   "ESTADO" y "ACCIONES" del toolbar de Lista. */
.pipe-toolbar-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap: 6px !important;
  padding: 6px !important;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  align-items: stretch;
}
.pipe-tb-btn,
.pipe-tb-collapse > summary,
.pipe-tb-collapse.kb-plat-picker > summary {
  list-style: none;
  cursor: pointer;
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg1);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}
.pipe-tb-collapse > summary::-webkit-details-marker { display: none; }
.pipe-tb-collapse > summary::after {
  content: '▾';
  font-size: 11px;
  opacity: .6;
  margin-left: 4px;
  transition: transform .2s ease;
}
.pipe-tb-collapse[open] > summary::after { transform: rotate(180deg); }
.pipe-tb-collapse[open] > summary {
  background: var(--bg3, rgba(255,255,255,0.04));
}
.pipe-tb-active {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  text-align: right;
}
.pipe-tb-label {
  flex: 0 0 auto;
}
.pipe-tb-collapse {
  position: relative;
  background: transparent;
}
.pipe-tb-collapse[open] > .pipe-tb-menu,
.pipe-tb-collapse[open] > .kb-plat-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  padding: 8px;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipe-tb-collapse[open] > .pipe-tb-menu.pipe-tb-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.pipe-tb-opt {
  height: 32px;
  padding: 0 10px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.pipe-tb-opt.on {
  background: rgba(240,180,41,.10);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.pipe-tb-row-lbl {
  font-size: 9px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text3);
  padding: 0 2px;
  margin-top: 2px;
  margin-bottom: -2px;
}
/* ┌── Pipeline toolbar selects ──────────────────────────────────
   Reseteamos el chrome nativo (rompe la armonía visual con los otros
   dropdowns del toolbar) y pintamos nuestra propia caret. Necesitan
   !important porque hay reglas globales en modern.css con !important
   para inputs/selects que les meten padding y radius distintos.
   ────────────────────────────────────────────────────────────── */
select.pipe-tb-sel {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 26px 0 10px !important;
  background: var(--bg2) !important;
  color: var(--text);
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%),
                    linear-gradient(135deg, var(--text3) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  transition: border-color .15s, background-color .15s;
}
select.pipe-tb-sel:hover { border-color: var(--text3) !important; }
select.pipe-tb-sel:focus { border-color: var(--accent) !important; }
.pipe-tb-row-double {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.pipe-tb-dir {
  width: 40px;
  height: 32px;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--mono);
  line-height: 1;
}
.pipe-tb-custom-range {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pipe-tb-custom-range input[type="date"] {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.pipe-tb-count {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  margin-top: 2px;
}
.kb-plat-picker.pipe-tb-platform[data-filtered] > summary {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(240,180,41,.08) !important;
}
.kb-plat-picker.pipe-tb-platform[data-filtered] > summary .pipe-tb-active {
  color: var(--accent);
}

/* En PC: usar el mismo grid (4 cols) pero con padding más cómodo */
@media (min-width: 1025px) {
  .pipe-toolbar-row {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
}

/* Cuando estamos en Calendar view, ocultamos el dropdown de Orden/Rango
   (Calendar tiene su propia barra de período) → quedan 3 cols. */
body.pipe-view-calendar .pipe-toolbar-row {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
}
@media (max-width: 540px) {
  body.pipe-view-calendar .pipe-toolbar-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Móvil chico: 2 cols × 2 filas para que el texto quepa */
@media (max-width: 540px) {
  .pipe-toolbar-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .pipe-tb-active { display: none; }
  .pipe-tb-btn,
  .pipe-tb-collapse > summary {
    justify-content: center !important;
    font-size: 10px !important;
    padding: 0 6px !important;
  }
}