/* ═══════════════════════════════════════════════════════════════
   POLISH — Rediseño visual KOL Finder Pro · v2 MINIMALISTA
   ═══════════════════════════════════════════════════════════════
   Capa estética FINAL (carga después de mobile.css → gana la cascada).
   Solo CSS, cero markup.

   DIRECCIÓN (feedback del usuario sobre v1: "se ve un asco… boxy"):
   Linear / Stripe / Vercel — limpio, TIPOGRÁFICO, aire. La jerarquía
   se construye con peso, tamaño y color — NUNCA con bordes + fondos +
   sombras simultáneos. Regla anti-caja aplicada en todo el archivo:
   ningún componente lleva borde + fondo + sombra a la vez; las cards
   grandes conservan UN hairline fino y nada más.

   REGLA DE COLOR del proyecto (intacta): solo oro #f0b429 · verde
   #22c55e · rojo #e45a52/#ef4444 + neutros. Tints = rgba() de esos.

   Motion: solo transform/opacity; transiciones ≤200ms; curvas de
   animation.md §3.2. prefers-reduced-motion apaga todo al final.
   ═══════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   0 · TOKENS PROPIOS
   ════════════════════════════════════════════════════════════ */
:root {
  --kf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* entradas/salidas */
  --kf-gold-rgb: 240, 180, 41;                     /* #f0b429 */
  --kf-hairline: rgba(255, 255, 255, .05);         /* hairline casi invisible */
}


/* ════════════════════════════════════════════════════════════
   1 · FONDO GLOBAL — limpio > decorativo
   v1 tenía film-grain + dos radiales oro (ensuciaba en monitores
   grandes). Ahora: UN solo radial oro al ~2% en la esquina superior
   — apenas una temperatura de color, no un patrón. El body no
   scrollea (overflow:hidden en base.css), el fondo es estable.
   ════════════════════════════════════════════════════════════ */
body {
  background:
    radial-gradient(1200px 600px at 85% -15%, rgba(var(--kf-gold-rgb), .02), transparent 60%),
    var(--bg0);
}
/* La vista Hoy traía background inline var(--bg0) que tapaba el gradiente
   global. !important: gana al atributo style="" (no hay otra vía CSS). */
#tab-hoy { background: transparent !important; }


/* ════════════════════════════════════════════════════════════
   2 · TIPOGRAFÍA — la jerarquía vive aquí (no en las cajas)
   Numeración tabular en TODAS las cifras (no "bailan" al refrescar),
   peso y tracking consistentes en números grandes y títulos.
   ════════════════════════════════════════════════════════════ */
.sv, .scv, .stv, .stat-val,
.ana-kpi-v, .outreach-kpi-v, .outreach-ch-metric-stats, .hoy-kpi-n,
.tv, .funnel-count, .contact-pct, .psh-cnt, .tc {
  font-variant-numeric: tabular-nums;
}
.ana-kpi-v, .outreach-kpi-v, .hoy-kpi-n, .sv {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ana-card-title, .az-card-title, .hoy-ctitle, .psectit, .crm-section-title {
  letter-spacing: -0.005em;
}


/* ════════════════════════════════════════════════════════════
   3 · HEADER / NAV — marca tipográfica + tabs pill quietas
   ════════════════════════════════════════════════════════════ */
/* Nav: hairline oro tenue bajo el borde; sin sombra pesada.
   !important en background/borde: glass.css los declara con
   !important — el backdrop-filter de glass se conserva. */
.nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(var(--kf-gold-rgb), .05);
}

/* Marca: tipografía pura (v1 tenía degradado de texto — chillón).
   Punto oro con ring tenue, sin glow. */
.brand .bdot {
  box-shadow: 0 0 0 3px rgba(var(--kf-gold-rgb), .10);
}
.brand .bname {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Tabs pill (se mantienen de v1 — no fueron criticadas): activo =
   tint oro + hairline interior, SIN glow exterior. Hover = velo neutro.
   !important: modern.css fija padding/color/background con !important. */
.tabs { align-items: center; }
.tabs .tab {
  height: 32px;
  align-self: center;
  padding: 0 13px !important;
  border-bottom-color: transparent;
  transition: background .16s var(--kf-ease-out), color .16s ease;
}
.tabs .tab:hover {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--text);
}
.tabs .tab.on {
  background: rgba(var(--kf-gold-rgb), .13) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--kf-gold-rgb), .25);
  color: var(--text) !important;
  border-bottom-color: transparent;
}

/* Cluster derecho: separación por aire + hairline muy tenue. */
.nr { gap: 8px; }
.nr::before {
  content: '';
  width: 1px;
  height: 20px;
  background: var(--kf-hairline);
  flex-shrink: 0;
  margin-right: 2px;
}


/* ════════════════════════════════════════════════════════════
   4 · STATS BAR — FILA TIPOGRÁFICA (adiós a las 7-8 cajas)
   v1 convirtió cada stat en mini-card con borde+fondo+sombra: el
   motivo principal del "se ve un asco". Ahora: número grande fuerte
   + label gris debajo, separación por ESPACIO y un hairline vertical
   casi invisible entre stats. Cero bordes, cero fondos, cero sombras,
   cero glow (los text-shadow de v1 también se van).
   ════════════════════════════════════════════════════════════ */
.sbar {
  gap: 0;
  padding: 4px 16px;
  background: transparent;
}
.sbar .sc {
  /* !important: glass.css mete fondo+borde+radius a .sc con !important;
     sin esto las cajas vuelven en todos los temas. */
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 4px 22px 4px 0;
  transition: none;
}
/* Hairline vertical tenue ENTRE stats (no alrededor de cada uno). */
.sbar .sc + .sc {
  border-left: 1px solid var(--kf-hairline) !important; /* gana al border:none !important de arriba por orden */
  padding-left: 22px;
}
.sbar .sv { line-height: 1.15; }
.sbar .sl { margin-top: 1px; }
/* Hover del stat clicable: nada de caja — solo levanta el texto. */
.sbar .sc-clickable { transition: opacity .14s ease; }
.sbar .sc-clickable:hover { background: none; opacity: .75; }

/* "DB SQLite" NO es un KPI de negocio: más pequeño y gris que los
   números principales (antes era una caja equivalente más). */
.sbar .sc-db .sv {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: 0;
}
.sbar .sc-db .sl { font-size: 0.625rem; }

/* Cuotas (Online / YT / AI / $): quietas, sin caja. .tokbar traía
   borde + fondo propios (layout.css) → se disuelven en texto. */
.sbar .sc-right {
  border: none !important;   /* glass.css usa !important en .sc */
  background: none !important;
  box-shadow: none !important;
}
.tokbar {
  border-color: transparent !important; /* idem glass.css */
  background: transparent !important;
  padding: 4px 4px;
}
.tok-lbl, .trst { color: var(--text3); }
.save-status { color: var(--text3); }


/* ════════════════════════════════════════════════════════════
   5 · BOTONES PRIMARIOS — planos, sin sombras oro llamativas
   v1: gradiente + sombra oro grande + inner-glow + lift. Ahora
   (Linear-style): oro casi plano, sombra neutra mínima, hover =
   brightness, sin lift (el press scale de layout.css se conserva).
   ════════════════════════════════════════════════════════════ */
.btn-primary, .btn.btn-primary, button[type="submit"]:not(.btn-ghost),
.btn-gold {
  background: linear-gradient(180deg, #f6c23e, #eeb218); /* oro casi plano, misma familia #f0b429 */
  color: #1b1300;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: filter .14s ease, transform .14s var(--kf-ease-out);
}
.btn-primary:hover, .btn.btn-primary:hover, .btn-gold:hover {
  opacity: 1;                            /* anula el opacity:.92 de modern.css */
  background: linear-gradient(180deg, #f8c94e, #f0b929);
  filter: none;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
/* Detener: rojo plano, misma quietud. */
.btn-stop {
  background: var(--red);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: filter .14s ease, transform .14s var(--kf-ease-out);
}
.btn-stop:hover { background: #f0554d; }

/* Focus visible con ring oro consistente en TODOS los controles
   accionables (WCAG + coherencia). Se mantiene de v1. */
.btn:focus-visible, .tab:focus-visible, .sett-tab:focus-visible,
.fchip:focus-visible, .dopt:focus-visible, .pgsel:focus-visible,
.qa-btn:focus-visible, .blk-col-del:focus-visible {
  outline: 2px solid rgba(var(--kf-gold-rgb), .60);
  outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════
   5.5 · TOOLBAR — GHOST QUIET (adiós a los botones-caja)
   FILTROS / VISTA / ORDEN / PLATAFORMA / AVANZADOS / ESTADO /
   ACCIONES / Mostrar / YOUTUBE·INSTAGRAM·X·REVISADOS: todos eran
   cajas con borde 1px + fondo. Ahora comparten UN lenguaje ghost:
   reposo transparente con texto gris · hover velo neutro 4% ·
   activo/abierto = texto oro + tint oro 8-10% sin borde grueso.
   Se conservan alturas (36px) y paddings → el layout no se mueve.

   !important solo donde components.css declaró border/background
   con !important (toolbar-filters-btn, pgsel, selects de blocked).
   ════════════════════════════════════════════════════════════ */
.pipe-tb-btn,
.pipe-tb-collapse > summary,
.pipe-tb-collapse.kb-plat-picker > summary,
.list-filters-collapse,
.list-actions-collapse,
.list-filters-collapse > summary,
.list-actions-collapse > summary,
.search-plat {
  border-color: transparent;
  background: transparent;
  transition: background .14s ease, color .14s ease;
}
/* "Avanzados" / "Revisados" y selects: border y/o background venían
   con !important en components.css — se neutralizan con !important. */
.toolbar .toolbar-filters-btn {
  border-color: transparent !important;
  background: transparent;
  transition: background .14s ease, color .14s ease;
}
/* Los <select> nativos necesitan ALGO de affordance de campo: se
   quedan con un hairline casi invisible, nunca una caja sólida. */
.toolbar .pgsel,
body.tab-blocked .toolbar #blockedReasonFilter,
body.tab-blocked .toolbar #blkSort,
body.tab-blocked .toolbar #blkMoveSel {
  border-color: var(--kf-hairline) !important;
  background: transparent !important;
}

/* Hover compartido: velo neutro, nada de bordes que "aparecen". */
.pipe-tb-btn:hover,
.pipe-tb-collapse > summary:hover,
.list-filters-collapse > summary:hover,
.list-actions-collapse > summary:hover,
.toolbar .toolbar-filters-btn:hover,
.search-plat:hover {
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  border-color: transparent;
}

/* Dropdown abierto = estado activo: tint oro suave + texto fuerte.
   (Los summaries [open] traían bg gris + border-bottom + radius
   asimétrico de components.css — se unifica al mismo tint oro.) */
.pipe-tb-collapse[open] > summary,
.list-filters-collapse[open] > summary,
.list-actions-collapse[open] > summary {
  background: rgba(var(--kf-gold-rgb), .09);
  border-bottom: none;
  border-radius: 10px;
  color: var(--text);
}

/* Toggle de plataforma seleccionado (YOUTUBE/IG/X): texto oro +
   tint oro 10%, SIN el borde oro grueso de candidates.css. */
.search-plat.on {
  background: rgba(var(--kf-gold-rgb), .10);
  border-color: transparent;
  color: var(--a2, var(--accent));
  font-weight: 700;
}

/* Chips de filtro (.fchip): activo = tint oro sin glow (v1 le puso
   box-shadow oro — fuera). El chip conserva su hairline propio. */
.fchip { transition: background .14s ease, color .14s ease, border-color .14s ease; }
.fchip:hover { background: rgba(255, 255, 255, .04); }
.fchip.on {
  background: rgba(var(--kf-gold-rgb), .10);
  border-color: rgba(var(--kf-gold-rgb), .30);
  color: var(--a2, var(--accent));
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════════
   6 · INPUTS — foco con ring oro (se mantiene de v1, no criticado)
   ════════════════════════════════════════════════════════════ */
.sin, .settings-input, .pgsel, .outreach-input,
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.sin:focus, .settings-input:focus, .pgsel:focus, .outreach-input:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  border-color: rgba(var(--kf-gold-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--kf-gold-rgb), .14);
  outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }


/* ════════════════════════════════════════════════════════════
   7 · KANBAN — headers de columna LIGEROS
   v1: versalitas 700 con tracking .04 + velo de fondo + count-pill
   con borde + glow en el punto → pesado. Ahora: peso 600, tracking
   .02em, sin velo, count como texto gris, punto sin halo.
   ════════════════════════════════════════════════════════════ */
.psh { border-bottom: 1px solid var(--line); }
.psh-nm {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text2);
}
.psh-cnt {
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
  color: var(--text3);
}

/* Cards: hover lift táctil con sombra MODERADA (v1 la infló). */
.pcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .30);
}
/* Ring de avatar casi invisible (disimula bordes de yt3 rotos). */
.pcard img, .chav, .blkav {
  box-shadow: 0 0 0 1px var(--kf-hairline);
}
.pcard-urg, .pcard-urg-warn, .pcard-urg-muted { border-radius: 6px; letter-spacing: .01em; }


/* ════════════════════════════════════════════════════════════
   8 · TABLA — data grid limpio (se mantiene de v1, no criticado)
   ════════════════════════════════════════════════════════════ */
thead tr {
  background: var(--bg1);
  border-bottom: 1px solid var(--line2);
}
/* Hover de fila: tint oro apenas perceptible. */
tbody tr:hover { background: rgba(var(--kf-gold-rgb), .03); }
tbody tr.rsel { background: rgba(var(--kf-gold-rgb), .06) !important; } /* gana al !important previo de table.css */
.bdg, .stpill, .enr-tag, .sem, .pct {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.chnm { letter-spacing: -0.005em; }


/* ════════════════════════════════════════════════════════════
   9 · CARDS — UN hairline y nada más
   v1: borde + gradiente + sombra + hover lift + glow (tres efectos
   simultáneos). Ahora: hairline fino, fondo plano, hover = solo el
   borde se tiñe de oro tenue. Sin sombras, sin lift, sin gradientes.
   ════════════════════════════════════════════════════════════ */
.ana-card, .az-card, .hoy-card,
.ana-kpi, .outreach-kpi, .hoy-kpi {
  border: 1px solid var(--line);
  background: var(--bg1);
  box-shadow: none;
  transition: border-color .16s ease;
}
.ana-card:hover, .az-card:hover, .hoy-card:hover,
.ana-kpi:hover, .outreach-kpi:hover, .hoy-kpi:hover {
  border-color: rgba(var(--kf-gold-rgb), .25);
  transform: none;
  box-shadow: none;
}
/* Barras del funnel: el color por etapa viene INLINE desde JS (respeta
   la paleta). Highlight superior mínimo vía background-image, que se
   compone sobre el color inline sin reemplazarlo. Sin glow. */
.funnel-bar, .contact-bar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%);
}


/* ════════════════════════════════════════════════════════════
   9.5 · EMPTY STATES — quietos
   ════════════════════════════════════════════════════════════ */
.empty-icon {
  filter: drop-shadow(0 0 10px rgba(var(--kf-gold-rgb), .12));
}
.empty-t { letter-spacing: -0.01em; }
.pempty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  margin: 4px;
  line-height: 1.6;
}
.ql { font-variant-numeric: tabular-nums; letter-spacing: .01em; }


/* ════════════════════════════════════════════════════════════
   10 · DROPDOWNS · SIDEBAR · PANEL — una sombra, no dos anillos
   ════════════════════════════════════════════════════════════ */
.dmenu {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .40);
}
.dopt {
  border-radius: 7px;
  margin: 1px 0;
  transition: background .12s ease, color .12s ease;
}
.dopt:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.dopt-hd { letter-spacing: .06em; }

.sb { border-right: 1px solid var(--line); }

/* Panel lateral: sombra moderada (v1: -24px/48px, excesiva). */
.panel {
  box-shadow: -12px 0 32px rgba(0, 0, 0, .30);
  border-left: 1px solid var(--line);
}


/* ════════════════════════════════════════════════════════════
   11 · MODAL DE AJUSTES — backdrop + segmented tabs (se mantienen,
   no fueron criticados) pero sin glow oro ni doble anillo.
   El contenedor trae estilos INLINE → overrides con !important.
   ════════════════════════════════════════════════════════════ */
#settingsModal {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
#settingsModal > div {
  /* !important ×3: el div lleva border/radius/background inline. */
  border: 1px solid var(--kf-hairline) !important;
  border-radius: 16px !important;
  background: var(--bg1) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .50);
  animation: kfModalIn .2s var(--kf-ease-out);
}
@keyframes kfModalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Tabs del modal como segmented control: riel gris + pill activa
   elevada con hairline (sin cambios respecto a v1 — aprobado). */
#settTabs.sett-tabs {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  margin: 10px 14px 0;
  gap: 3px;
}
#settTabs .sett-tab {
  border-radius: 9px;
  border-bottom-color: transparent !important; /* settings-redesign marca el activo con underline !important: dentro del riel sobra */
  padding: 8px 14px;
  transition: background .15s ease, color .15s ease;
}
#settTabs .sett-tab:hover { background: rgba(255, 255, 255, .05); color: var(--text2); }
#settTabs .sett-tab.on {
  background: var(--bg4);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--kf-hairline);
}
#settingsBody .settings-title { letter-spacing: .01em; }

/* Modales genéricos: mismo lenguaje, sin anillos extra. */
.mo { backdrop-filter: blur(8px) saturate(130%); -webkit-backdrop-filter: blur(8px) saturate(130%); }
.mo-box {
  border: 1px solid var(--kf-hairline);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  animation: kfModalIn .2s var(--kf-ease-out);
}


/* ════════════════════════════════════════════════════════════
   12 · TOAST DE EXTENSIÓN + BANNERS — sin glow
   authbar.js inyecta su <style> EN RUNTIME (después de polish.css):
   todo override aquí necesita !important — justificado.
   ════════════════════════════════════════════════════════════ */
.kf-extupd {
  border-radius: 14px !important;
  border-color: rgba(var(--kf-gold-rgb), .35) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55) !important;
}
.kf-extupd-btn { border-radius: 9px !important; }
.kf-frozen { border-bottom-color: rgba(var(--kf-gold-rgb), .35) !important; }


/* ════════════════════════════════════════════════════════════
   13 · SCROLLBARS — se mantienen de v1 (no criticados)
   ════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .10);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--kf-gold-rgb), .30);
  background-clip: padding-box;
}
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }


/* ════════════════════════════════════════════════════════════
   14 · MICRO-MOTION — se mantiene de v1 (no criticada)
   switchTab (state.js) alterna display:none ↔ flex en .main > tab-*;
   al volver a mostrarse, la animation CSS se dispara sola. 300ms
   ease-out (animation.md, page entrance). Sin transform residual al
   terminar → sticky thead y panel fixed a salvo.
   ════════════════════════════════════════════════════════════ */
@keyframes kfViewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.main > [id^="tab-"] { animation: kfViewIn .3s var(--kf-ease-out); }

@keyframes kfPopIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.ddrop.open .dmenu { animation: kfPopIn .15s var(--kf-ease-out); }

.pcard { animation-timing-function: var(--kf-ease-out); }


/* ════════════════════════════════════════════════════════════
   15 · MEDIA QUERIES — laptop (≤1500) y móvil (≤900 / ≤480)
   CRÍTICO: se re-aplica la compresión de tabs 901–1500px del fix G2
   (mis reglas de pill llevan !important y la pisarían). En móvil la
   tira de stats sigue siendo TIPOGRÁFICA con scroll horizontal —
   nunca mini-cajas.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1500px) and (min-width: 901px) {
  .tabs .tab {
    padding: 6px 7px !important;   /* mismo valor que mobile.css (G2) */
    height: 30px !important;
    font-size: 0.6875rem !important;
    gap: 3px !important;
  }
  .tabs .tab .tc { font-size: 0.6875rem !important; padding: 1px 4px !important; }
  .brand .bname { font-size: 0.75rem; }
}

@media (max-width: 900px) {
  .tabs .tab { height: 34px; padding: 0 10px !important; }
  /* Stats móvil: fila tipográfica scrolleable (fix M6), sin cajas. */
  .sbar { gap: 0; padding: 4px 10px; }
  .sbar .sc {
    min-width: 0;
    flex-shrink: 0;
    padding: 4px 16px 4px 0;
    scroll-snap-align: start;
  }
  .sbar .sc + .sc { padding-left: 16px; }
  .sbar .sc-right { min-width: 0; }
  .nr::before { display: none; }
  #settTabs.sett-tabs { margin: 8px 0 0; }
  /* Sin hover lift en táctil (estados "pegados"). */
  .pcard:hover { transform: none; }
}

@media (max-width: 480px) {
  .sbar { padding: 4px 8px; }
  .sbar .sc { padding: 4px 12px 4px 0; }
  .sbar .sc + .sc { padding-left: 12px; }
  .brand .bname { letter-spacing: -0.01em; }
}


/* ════════════════════════════════════════════════════════════
   16 · REDUCED MOTION — apaga TODA la micro-motion propia
   Regla global estándar (WCAG 2.3.3). !important: forma canónica
   de garantizar que ninguna regla posterior se cuele.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .main > [id^="tab-"], .ddrop.open .dmenu,
  #settingsModal > div, .mo-box { animation: none !important; }
}

/* ═══ Nombre de canal prioritario en kanban (pedido de Mathias) ═══
   El nombre de la persona (.pcard-kol) es secundario: cuando la fila es
   demasiado angosta (<150px) se OCULTA entera en vez de truncar a "·…",
   dejando todo el ancho para el nombre del canal. */
.pcard-namerow { container-type: inline-size; }
@container (max-width: 150px) {
  .pcard-namerow .pcard-kol { display: none; }
}