/* =====================================================================
 * DASHBOARD BRAND POLISH v2 — "FOCUS COLUMN" (2026-06-16)
 * Layout integrado desde docs/_proto-dash-03.html, scopeado bajo #brandDashV2.
 * Tema slate (#15181E/#1A1E26/#222731) + amber (#F2A33C) + teal (#2dd4bf)
 * + verde (#34d399, solo verificado/éxito). Reemplaza el render de dashboard.js.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ========== TOKENS ========== */
:root {
  /* 2026-06-16 — alineado a la marca de la landing: base slate, acento AMBER,
     detalle TEAL; el verde queda solo para estados de verificado/éxito (--neo-verified). */
  --neo-bg-dark:    #15181E;
  --neo-bg-card:    #1A1E26;
  --neo-bg-elev:    #222731;
  --neo-hair:       rgba(236,239,244,0.07);
  --neo-hair-strong:rgba(236,239,244,0.12);
  /* Brand tokens core. Si el brandkit del tenant setea --brand-primary/--brand-accent
   * via /api/branding/:uid/theme.css, esos overridean los defaults. Sin brandkit
   * activo (mayoría de users hoy), los fallback son los colores Neo-Tech originales.
   * Los -dim y -bg siguen como derivados estáticos para no romper contraste/legibilidad
   * cuando el cliente elige colores extremos. */
  /* "lime" pasa a TEAL de marca (acento activo/detalle). Mantengo el nombre del token
     para no tocar las ~80 referencias var(--neo-lime) del archivo. */
  --neo-lime:       var(--brand-primary, #2dd4bf);
  --neo-lime-dim:   #22b8a6;
  --neo-lime-bg:    rgba(45,212,191,0.12);
  /* amber de marca (acento primario: valores, dinero, CTAs) */
  --neo-amber:      var(--brand-accent, #F2A33C);
  --neo-amber-dim:  #D98428;
  --neo-amber-bg:   rgba(242,163,60,0.12);
  /* verde SOLO para verificado / éxito (checks, % de éxito) */
  --neo-verified:   #34d399;
  --neo-verified-bg:rgba(52,211,153,0.12);
  --neo-text-strong:#ECEFF4;
  --neo-text-body:  #cbd5e1;
  --neo-text-muted: #7c879b;
  --neo-text-faint: rgba(236,239,244,0.42);
  /* deep tokens → teal-deep (antes verde-deep) */
  --neo-deep:       #0c2b27;
  --neo-deep-2:     #0f3a34;
  --neo-lime-viv:   #5eead4;
  --neo-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== Focus Column (espejo de las vars del proto, scopeadas a esta UI) ===== */
  --bd-bg:#15181E;
  --bd-card:#1A1E26;
  --bd-elev:#222731;
  --bd-hair:rgba(236,239,244,.08);
  --bd-hair-strong:rgba(236,239,244,.14);
  --bd-amber:#F2A33C;
  --bd-amber-hot:#FFB85A;
  --bd-amber-deep:#D98428;
  --bd-teal:#2dd4bf;
  --bd-green:#34d399;
  --bd-tx:#ECEFF4;
  --bd-body:#cbd5e1;
  --bd-muted:#7c879b;
  --bd-ui:"Outfit",system-ui,sans-serif;
  --bd-mono:"JetBrains Mono",ui-monospace,monospace;
  --bd-r-lg:22px;
  --bd-r-md:16px;
  --bd-gap:20px;
  --bd-sh-card:0 18px 44px -22px rgba(0,0,0,.66), 0 2px 0 0 rgba(255,255,255,.02) inset;
  --bd-sh-amber:0 22px 60px -26px rgba(242,163,60,.5);
  --bd-sh-teal:0 22px 60px -26px rgba(45,212,191,.42);
}

/* ========== HIDE OLD RENDER (dashboard.js original) ========== */
#dashboardContent .dashboard-header-pro,
#dashboardContent .dashboard-header-compact,
#dashboardContent .stats-grid-compact,
#dashboardContent .history-tables-grid,
#dashboardContent .dashboard-insights-grid,
#dashboardContent #brandHeroStrip,
#dashboardContent #brandFooterCta {
  display: none !important;
}

/* ========== TAPIZ — fondo TOTALMENTE LIMPIO ==========
 * El glassmorphism va EXCLUSIVAMENTE sobre las cards. El wallpaper se ve
 * tal cual sin overlay, sin tint, sin filter, sin backdrop-filter.
 * Neutralizamos también el `.bg::after` que setea dashboard-ui-polish.css
 * (radial vignette) cuando estamos en modo v2. */
body:has(#brandDashV2) .bg,
body:has(#brandDashV2) .bg::after,
body:has(#brandDashV2) .bg::before {
  background: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
/* 2026-06-16 — fondo on-brand (mata el wallpaper "DRIVE" + el color púrpura #1a0a26).
   Base slate + blooms amber/teal sutiles, coherente con la landing. */
body:has(#brandDashV2) .bg {
  background-image:
    radial-gradient(1100px 700px at 82% -8%, rgba(242,163,60,0.10), transparent 60%),
    radial-gradient(900px 650px at 4% 108%, rgba(45,212,191,0.08), transparent 60%),
    linear-gradient(160deg, #1A1E26, #12151b 70%) !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #15181E !important;
}
body:has(#brandDashV2) .bg::after {
  content: "" !important;
  display: none !important;
}

/* ========== FOCUS COLUMN ROOT ========== */
#brandDashV2 {
  font-family: var(--bd-ui);
  color: var(--bd-body);
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#brandDashV2 .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
#brandDashV2 .mono { font-family: var(--bd-mono); }

/* ===== TOPBAR ===== */
#brandDashV2 .bd-topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: linear-gradient(180deg, rgba(21,24,30,.92), rgba(21,24,30,.72));
  border-bottom: 1px solid var(--bd-hair);
}
#brandDashV2 .bd-topbar-inner {
  max-width: 1600px; margin: 0 auto; padding: 0 24px 0 72px;
  height: 64px; display: flex; align-items: center; gap: 20px;
}
/* el botón de menú del CRM (#menuTrigger) flota arriba-izquierda por encima del
   shell fijo; le aseguramos que quede sobre el topbar y clickeable. */
body:has(#brandDashV2) #menuTrigger { position: relative; z-index: 70; }
#brandDashV2 .bd-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
#brandDashV2 .bd-brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--bd-amber-hot), var(--bd-amber-deep));
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -8px rgba(242,163,60,.7), 0 0 0 1px rgba(255,255,255,.1) inset;
}
#brandDashV2 .bd-brand-name { font-weight: 800; letter-spacing: .02em; color: var(--bd-tx); font-size: 17px; line-height: 1; }
#brandDashV2 .bd-brand-name b { color: var(--bd-amber); }
#brandDashV2 .bd-brand-sub { font-family: var(--bd-mono); font-size: 10px; color: var(--bd-muted); letter-spacing: .16em; margin-top: 3px; }

#brandDashV2 .bd-greet { display: flex; flex-direction: column; gap: 3px; margin-left: 6px; }
#brandDashV2 .bd-greet-line { display: flex; align-items: center; gap: 9px; }
#brandDashV2 .bd-greet-hi { font-size: 14px; color: var(--bd-body); font-weight: 500; }
#brandDashV2 .bd-greet-hi b { color: var(--bd-tx); font-weight: 700; }
#brandDashV2 .bd-dot-online { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bd-mono); font-size: 10px; color: var(--bd-green); letter-spacing: .08em; }
#brandDashV2 .bd-dot-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--bd-green); box-shadow: 0 0 0 0 rgba(52,211,153,.55); animation: bd-pulse 2.4s infinite; }
@keyframes bd-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
#brandDashV2 .bd-greet-date { font-family: var(--bd-mono); font-size: 10px; color: var(--bd-muted); letter-spacing: .05em; }

#brandDashV2 .bd-search { margin-left: auto; flex: 1; max-width: 300px; position: relative; }
#brandDashV2 .bd-search input {
  width: 100%; height: 40px; border-radius: 11px; border: 1px solid var(--bd-hair);
  background: rgba(34,39,49,.6); color: var(--bd-tx); font-family: var(--bd-ui); font-size: 13px;
  padding: 0 14px 0 38px; outline: none; transition: border-color .2s, box-shadow .2s;
}
#brandDashV2 .bd-search input::placeholder { color: var(--bd-muted); }
#brandDashV2 .bd-search input:focus { border-color: rgba(242,163,60,.5); box-shadow: 0 0 0 3px rgba(242,163,60,.12); }
#brandDashV2 .bd-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bd-muted); }
#brandDashV2 .bd-search kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-family: var(--bd-mono); font-size: 10px; color: var(--bd-muted);
  border: 1px solid var(--bd-hair); border-radius: 6px; padding: 2px 6px; background: rgba(0,0,0,.2);
}

#brandDashV2 .bd-user-pill {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: rgba(34,39,49,.7); border: 1px solid var(--bd-hair); border-radius: 13px;
  padding: 6px 12px 6px 6px; cursor: pointer; transition: border-color .2s, transform .2s;
}
#brandDashV2 .bd-user-pill:hover { border-color: var(--bd-hair-strong); transform: translateY(-1px); }
#brandDashV2 .bd-user-av {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, #2dd4bf, #0d9488); color: #06231f; font-weight: 800; font-size: 13px;
}
#brandDashV2 .bd-user-pill .u-name { font-size: 13px; font-weight: 700; color: var(--bd-tx); line-height: 1; }
#brandDashV2 .bd-user-pill .u-meta { font-family: var(--bd-mono); font-size: 9.5px; color: var(--bd-amber); letter-spacing: .04em; margin-top: 3px; }
#brandDashV2 .bd-user-pill .u-meta svg { vertical-align: -1px; margin-right: 2px; }

/* ===== SHELL ===== */
#brandDashV2 .bd-shell { max-width: 1600px; margin: 0 auto; padding: 26px 24px 70px; position: relative; z-index: 1; }

#brandDashV2 .bd-band { margin-top: 32px; }
#brandDashV2 .bd-band:first-of-type { margin-top: 8px; }
#brandDashV2 .bd-band-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding: 0 2px; }
#brandDashV2 .bd-band-kick { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--bd-muted); }
#brandDashV2 .bd-band-kick b { color: var(--bd-amber); }
#brandDashV2 .bd-band-title { font-size: 20px; font-weight: 800; color: var(--bd-tx); letter-spacing: -.01em; line-height: 1; }
#brandDashV2 .bd-band-aside { margin-left: auto; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-muted); }
#brandDashV2 .bd-band-aside b { color: var(--bd-teal); }

/* glass card base */
#brandDashV2 .bd-glass {
  background: linear-gradient(165deg, rgba(34,39,49,.62), rgba(26,30,38,.86));
  border: 1px solid var(--bd-hair);
  border-radius: var(--bd-r-lg);
  box-shadow: var(--bd-sh-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative; overflow: hidden;
}
#brandDashV2 .bd-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.06);
  mask: linear-gradient(180deg, #000, transparent 40%);
  -webkit-mask: linear-gradient(180deg, #000, transparent 40%);
}
@supports not (backdrop-filter: blur(1px)) {
  #brandDashV2 .bd-glass { background: linear-gradient(165deg, rgba(34,39,49,.94), rgba(26,30,38,.97)); }
}

/* ===== KPIs hero ===== */
#brandDashV2 .bd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bd-gap); }
#brandDashV2 .bd-kpi { padding: 20px 20px 18px; display: flex; flex-direction: column; min-height: 188px; transition: transform .25s, box-shadow .25s, border-color .25s; }
#brandDashV2 .bd-kpi:hover { transform: translateY(-3px); }
#brandDashV2 .bd-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#brandDashV2 .bd-kpi-label { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--bd-muted); }
#brandDashV2 .bd-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--bd-hair); }
#brandDashV2 .bd-kpi-val { font-size: 38px; font-weight: 800; color: var(--bd-tx); line-height: 1; letter-spacing: -.025em; margin-bottom: 2px; }
#brandDashV2 .bd-kpi-val .cur { font-size: 21px; font-weight: 700; color: var(--bd-muted); margin-right: 1px; vertical-align: 6px; }
#brandDashV2 .bd-kpi-val .kpi-unit { font-size: 22px; font-weight: 700; color: var(--bd-muted); margin-left: 3px; }
#brandDashV2 .bd-kpi-sub { font-family: var(--bd-mono); font-size: 11px; line-height: 1.5; color: var(--bd-body); margin-top: auto; padding-top: 13px; }
#brandDashV2 .bd-kpi-sub .accent { color: var(--bd-amber); }
#brandDashV2 .bd-kpi-sub .accent-t { color: var(--bd-teal); }
#brandDashV2 .bd-kpi-sub .accent-g { color: var(--bd-green); }

#brandDashV2 .bd-kpi-breakdown { display: flex; gap: 6px; margin-top: auto; padding-top: 13px; flex-wrap: wrap; }
#brandDashV2 .bd-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--bd-mono); font-size: 10.5px;
  background: rgba(0,0,0,.24); border: 1px solid var(--bd-hair); border-radius: 8px; padding: 5px 8px; color: var(--bd-body);
}
#brandDashV2 .bd-chip i { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
#brandDashV2 .bd-chip b { color: var(--bd-tx); font-weight: 700; }

/* KPI cobertura WhatsApp (teal headline real) */
#brandDashV2 .bd-kpi.is-cover { background: linear-gradient(160deg, rgba(45,212,191,.10), rgba(26,30,38,.9) 60%); border-color: rgba(45,212,191,.22); }
#brandDashV2 .bd-kpi.is-cover .bd-kpi-val { color: var(--bd-teal); }
#brandDashV2 .bd-kpi.is-cover .bd-kpi-ic { background: rgba(45,212,191,.13); border-color: rgba(45,212,191,.26); }

/* KPI crédito (foco amber) */
#brandDashV2 .bd-kpi.is-credit {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(242,163,60,.22), transparent 55%),
    linear-gradient(160deg, rgba(242,163,60,.14), rgba(26,30,38,.92) 64%);
  border-color: rgba(242,163,60,.34);
  box-shadow: var(--bd-sh-amber);
}
#brandDashV2 .bd-kpi.is-credit .bd-kpi-val { color: var(--bd-amber-hot); font-size: 34px; word-break: break-word; }
#brandDashV2 .bd-kpi.is-credit:hover { box-shadow: 0 26px 70px -26px rgba(242,163,60,.62); }
#brandDashV2 .bd-kpi.is-credit .bd-kpi-ic { background: rgba(242,163,60,.16); border-color: rgba(242,163,60,.3); }
#brandDashV2 .bd-credit-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; margin-bottom: 12px; }
#brandDashV2 .bd-credit-meta .runway { font-family: var(--bd-mono); font-size: 11px; color: var(--bd-body); }
#brandDashV2 .bd-btn-credit {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 40px; border-radius: 11px; border: none; cursor: pointer;
  background: linear-gradient(150deg, var(--bd-amber-hot), var(--bd-amber-deep));
  color: #22160a; font-family: var(--bd-ui); font-weight: 800; font-size: 13.5px; letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(242,163,60,.7); transition: transform .18s, box-shadow .18s;
}
#brandDashV2 .bd-btn-credit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(242,163,60,.85); }
#brandDashV2 .bd-btn-credit:active { transform: translateY(0); }

/* ===== Composición de la base ===== */
#brandDashV2 .bd-comp { padding: 22px 24px; display: flex; flex-direction: column; }
#brandDashV2 .bd-comp-lbl { display: flex; align-items: center; gap: 8px; font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--bd-muted); }
#brandDashV2 .bd-comp-lbl svg { flex-shrink: 0; }
#brandDashV2 .bd-comp-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
#brandDashV2 .bd-comp-row { display: flex; flex-direction: column; gap: 8px; }
#brandDashV2 .bd-comp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#brandDashV2 .bd-comp-top .nm { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--bd-body); font-weight: 500; }
#brandDashV2 .bd-comp-top .nm i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
#brandDashV2 .bd-comp-top .vv { font-family: var(--bd-mono); font-weight: 700; color: var(--bd-tx); font-size: 14px; }
#brandDashV2 .bd-comp-top .vv small { color: var(--bd-muted); font-size: 11px; margin-left: 5px; font-weight: 500; }
#brandDashV2 .bd-comp-track { height: 9px; border-radius: 99px; background: rgba(0,0,0,.3); overflow: hidden; border: 1px solid var(--bd-hair); }
#brandDashV2 .bd-comp-track i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 1.1s cubic-bezier(.22,1,.36,1); }
#brandDashV2 .bd-comp-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--bd-hair); display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#brandDashV2 .bd-comp-foot .lbl { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--bd-muted); }
#brandDashV2 .bd-comp-foot .vv { font-family: var(--bd-mono); font-weight: 700; color: var(--bd-teal); font-size: 13px; text-align: right; }

/* ===== WhatsApp split ===== */
#brandDashV2 .bd-wa { padding: 24px 26px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
#brandDashV2 .bd-wa-left { display: flex; flex-direction: column; }
#brandDashV2 .bd-wa-headline { font-size: 15px; color: var(--bd-body); margin-bottom: 18px; }
#brandDashV2 .bd-wa-headline b { color: var(--bd-tx); font-weight: 700; }
#brandDashV2 .bd-wa-bar { height: 46px; border-radius: 13px; overflow: hidden; display: flex; border: 1px solid var(--bd-hair); background: rgba(0,0,0,.2); }
#brandDashV2 .bd-wa-seg { display: flex; align-items: center; padding: 0 16px; font-family: var(--bd-mono); font-weight: 700; font-size: 14px; color: #06231f; position: relative; }
#brandDashV2 .bd-wa-seg.has { background: linear-gradient(135deg, var(--bd-green), #10b981); justify-content: flex-start; }
#brandDashV2 .bd-wa-seg.no { background: linear-gradient(135deg, rgba(124,135,155,.5), rgba(124,135,155,.28)); color: var(--bd-tx); justify-content: flex-end; }
#brandDashV2 .bd-wa-legend { display: flex; gap: 24px; margin-top: 18px; }
#brandDashV2 .bd-wa-leg { display: flex; flex-direction: column; gap: 5px; }
#brandDashV2 .bd-wa-leg .lk { display: flex; align-items: center; gap: 8px; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-muted); letter-spacing: .04em; }
#brandDashV2 .bd-wa-leg .lk i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
#brandDashV2 .bd-wa-leg .lv { font-size: 22px; font-weight: 800; color: var(--bd-tx); letter-spacing: -.02em; }
#brandDashV2 .bd-wa-leg .lv b { color: var(--bd-green); font-size: 14px; margin-left: 5px; font-weight: 700; }
#brandDashV2 .bd-wa-leg .lv.dim b { color: var(--bd-muted); }
#brandDashV2 .bd-wa-right { display: flex; align-items: center; justify-content: center; position: relative; }
#brandDashV2 .bd-wa-donut { position: relative; width: 170px; height: 170px; }
#brandDashV2 .bd-wa-donut svg { transform: rotate(-90deg); }
#brandDashV2 .bd-wa-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#brandDashV2 .bd-wa-donut-mid .pp { font-size: 40px; font-weight: 800; color: var(--bd-green); line-height: 1; letter-spacing: -.03em; }
#brandDashV2 .bd-wa-donut-mid .pl { font-family: var(--bd-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-muted); margin-top: 6px; }

/* ===== Actividad / Este mes ===== */
#brandDashV2 .bd-act { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--bd-gap); }
#brandDashV2 .bd-act-main { padding: 26px 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 220px; }
#brandDashV2 .bd-act-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.22); margin-bottom: 4px; }
#brandDashV2 .bd-act-spark { display: flex; align-items: flex-end; gap: 10px; height: 64px; margin: 18px 0 22px; width: 100%; max-width: 420px; }
#brandDashV2 .bd-act-spark .b { flex: 1; background: linear-gradient(180deg, rgba(124,135,155,.22), rgba(124,135,155,.06)); border-radius: 6px 6px 3px 3px; position: relative; border: 1px dashed var(--bd-hair); transition: height .8s cubic-bezier(.22,1,.36,1); }
#brandDashV2 .bd-act-spark .b.on { background: linear-gradient(180deg, rgba(45,212,191,.55), rgba(45,212,191,.12)); border: 1px solid rgba(45,212,191,.4); }
#brandDashV2 .bd-act-spark .b.today { background: linear-gradient(180deg, var(--bd-amber-hot), rgba(242,163,60,.25)); border: 1px solid rgba(242,163,60,.5); }
#brandDashV2 .bd-act-spark .b span { position: absolute; bottom: -19px; left: 0; right: 0; text-align: center; font-family: var(--bd-mono); font-size: 9px; color: var(--bd-muted); }
#brandDashV2 .bd-act-main h4 { font-size: 18px; font-weight: 800; color: var(--bd-tx); margin-top: 14px; letter-spacing: -.01em; }
#brandDashV2 .bd-act-main p { font-size: 13.5px; color: var(--bd-muted); margin-top: 7px; max-width: 430px; line-height: 1.55; }
#brandDashV2 .bd-badge-idle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--bd-mono); font-size: 11px; color: var(--bd-teal); background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.24); padding: 6px 11px; border-radius: 9px; margin-top: 16px; }
#brandDashV2 .bd-badge-idle i { width: 7px; height: 7px; border-radius: 50%; background: var(--bd-teal); animation: bd-pulse-t 2.6s infinite; }
@keyframes bd-pulse-t { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,.5); } 70% { box-shadow: 0 0 0 6px rgba(45,212,191,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); } }
#brandDashV2 .bd-btn-act { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px; border-radius: 11px; border: 1px solid rgba(242,163,60,.4); background: rgba(242,163,60,.12); color: var(--bd-amber-hot); font-family: var(--bd-ui); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .2s, transform .18s; }
#brandDashV2 .bd-btn-act:hover { background: rgba(242,163,60,.2); transform: translateY(-2px); }

#brandDashV2 .bd-act-side { padding: 22px; display: flex; flex-direction: column; gap: 0; }
#brandDashV2 .bd-act-side h5 { font-family: var(--bd-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--bd-muted); margin-bottom: 6px; }
#brandDashV2 .bd-act-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--bd-hair); }
#brandDashV2 .bd-act-stat:last-child { border-bottom: none; }
#brandDashV2 .bd-act-stat .k { font-size: 13px; color: var(--bd-body); }
#brandDashV2 .bd-act-stat .v { font-family: var(--bd-mono); font-weight: 700; color: var(--bd-tx); font-size: 18px; }
#brandDashV2 .bd-act-stat .v.amber { color: var(--bd-amber); }

/* ===== Accesos rápidos ===== */
#brandDashV2 .bd-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bd-gap); }
#brandDashV2 .bd-q-tile {
  padding: 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  transition: transform .22s, border-color .22s, box-shadow .22s; text-decoration: none;
  text-align: left; font-family: var(--bd-ui); align-items: stretch;
}
#brandDashV2 .bd-q-tile:hover { transform: translateY(-4px); border-color: var(--bd-hair-strong); }
#brandDashV2 .bd-q-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--bd-hair); }
#brandDashV2 .bd-q-tile h4 { font-size: 15px; font-weight: 700; color: var(--bd-tx); letter-spacing: -.01em; }
#brandDashV2 .bd-q-tile p { font-family: var(--bd-mono); font-size: 10.5px; color: var(--bd-muted); letter-spacing: .03em; margin-top: 6px; }
#brandDashV2 .bd-q-go { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--bd-body); transition: gap .2s, color .2s; }
#brandDashV2 .bd-q-tile:hover .bd-q-go { gap: 11px; }
#brandDashV2 .bd-q-tile.wa-t:hover { box-shadow: var(--bd-sh-teal); }
#brandDashV2 .bd-q-tile.wa-t .bd-q-ic { background: rgba(45,212,191,.12); border-color: rgba(45,212,191,.26); }
#brandDashV2 .bd-q-tile.wa-t:hover .bd-q-go { color: var(--bd-teal); }
#brandDashV2 .bd-q-tile.os-t:hover { box-shadow: var(--bd-sh-amber); }
#brandDashV2 .bd-q-tile.os-t .bd-q-ic { background: rgba(242,163,60,.12); border-color: rgba(242,163,60,.28); }
#brandDashV2 .bd-q-tile.os-t:hover .bd-q-go { color: var(--bd-amber); }
#brandDashV2 .bd-q-tile.bc-t .bd-q-ic { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.26); }
#brandDashV2 .bd-q-tile.bc-t:hover .bd-q-go { color: var(--bd-green); }
#brandDashV2 .bd-q-tile.mc-t .bd-q-ic { background: rgba(236,239,244,.06); border-color: var(--bd-hair); }
#brandDashV2 .bd-q-tile.mc-t:hover .bd-q-go { color: var(--bd-tx); }

/* ===== Tabla archivos ===== */
#brandDashV2 .bd-files { padding: 0; overflow: hidden; }
#brandDashV2 .bd-files-toolbar { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--bd-hair); flex-wrap: wrap; }
#brandDashV2 .bd-files-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
#brandDashV2 .bd-files-search input { width: 100%; height: 38px; border-radius: 10px; border: 1px solid var(--bd-hair); background: rgba(0,0,0,.22); color: var(--bd-tx); font-family: var(--bd-ui); font-size: 13px; padding: 0 12px 0 36px; outline: none; transition: border-color .2s, box-shadow .2s; }
#brandDashV2 .bd-files-search input::placeholder { color: var(--bd-muted); }
#brandDashV2 .bd-files-search input:focus { border-color: rgba(45,212,191,.5); box-shadow: 0 0 0 3px rgba(45,212,191,.1); }
#brandDashV2 .bd-files-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--bd-muted); }
#brandDashV2 .bd-filters { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
#brandDashV2 .bd-f-chip {
  font-family: var(--bd-mono); font-size: 11.5px; letter-spacing: .02em; cursor: pointer;
  border: 1px solid var(--bd-hair); background: rgba(0,0,0,.2); color: var(--bd-body);
  border-radius: 9px; padding: 7px 12px; transition: all .18s; display: inline-flex; align-items: center; gap: 7px;
}
#brandDashV2 .bd-f-chip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
#brandDashV2 .bd-f-chip .cnt { font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--bd-muted); }
#brandDashV2 .bd-f-chip:hover { border-color: var(--bd-hair-strong); color: var(--bd-tx); }
#brandDashV2 .bd-f-chip.on { background: rgba(242,163,60,.16); border-color: rgba(242,163,60,.4); color: var(--bd-amber-hot); }
#brandDashV2 .bd-f-chip.on .cnt { background: rgba(242,163,60,.22); color: var(--bd-amber-hot); }

#brandDashV2 .bd-tbl-wrap { overflow-x: auto; }
#brandDashV2 table.bd-files-tbl { width: 100%; border-collapse: collapse; min-width: 760px; }
#brandDashV2 .bd-files-tbl thead th {
  font-family: var(--bd-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--bd-muted);
  text-align: left; padding: 13px 18px; font-weight: 600; border-bottom: 1px solid var(--bd-hair);
  position: sticky; top: 0; background: rgba(26,30,38,.96); backdrop-filter: blur(6px); z-index: 2;
}
#brandDashV2 .bd-files-tbl thead th.num { text-align: right; }
#brandDashV2 .bd-files-tbl thead th.ctr { text-align: center; }
#brandDashV2 .bd-files-tbl tbody td { padding: 13px 18px; border-bottom: 1px solid rgba(236,239,244,.05); font-size: 13px; vertical-align: middle; }
#brandDashV2 .bd-files-tbl tbody td.num { text-align: right; }
#brandDashV2 .bd-files-tbl tbody td.ctr { text-align: center; }
#brandDashV2 .bd-files-tbl tbody tr { transition: background .15s; }
#brandDashV2 .bd-files-tbl tbody tr:hover { background: rgba(242,163,60,.05); }
#brandDashV2 .bd-files-tbl tbody tr:last-child td { border-bottom: none; }
#brandDashV2 .bd-f-name { display: flex; align-items: center; gap: 11px; }
#brandDashV2 .bd-f-name .fdot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
#brandDashV2 .bd-f-name .nm { color: var(--bd-tx); font-weight: 600; font-size: 13px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#brandDashV2 .bd-f-tag { font-family: var(--bd-mono); font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; letter-spacing: .04em; display: inline-block; }
#brandDashV2 .bd-f-tag.WA { background: rgba(45,212,191,.14); color: var(--bd-teal); }
#brandDashV2 .bd-f-tag.OS { background: rgba(242,163,60,.15); color: var(--bd-amber); }
#brandDashV2 .bd-f-tag.BCRA { background: rgba(52,211,153,.14); color: var(--bd-green); }
#brandDashV2 .bd-f-reg { font-family: var(--bd-mono); text-align: right; color: var(--bd-tx); font-weight: 600; }
#brandDashV2 .bd-f-cost { font-family: var(--bd-mono); color: var(--bd-body); font-weight: 600; }
#brandDashV2 .bd-f-cost.zero { color: var(--bd-green); }
#brandDashV2 .bd-f-date { font-family: var(--bd-mono); color: var(--bd-muted); font-size: 11.5px; white-space: nowrap; }
#brandDashV2 .bd-spark-cell { text-align: center; }
#brandDashV2 .bd-spark-cell svg { vertical-align: middle; }
/* barra de TAMAÑO real (registros vs archivo más grande) */
#brandDashV2 .bd-size { display: inline-block; vertical-align: middle; width: 88px; height: 7px;
  border-radius: 99px; background: rgba(0,0,0,.32); overflow: hidden; border: 1px solid var(--bd-hair); }
#brandDashV2 .bd-size i { display: block; height: 100%; border-radius: 99px; min-width: 3px;
  box-shadow: 0 0 8px -2px currentColor; }
#brandDashV2 .bd-dl-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--bd-hair); background: rgba(0,0,0,.22);
  display: inline-grid; place-items: center; cursor: pointer; color: var(--bd-muted); transition: all .18s;
}
#brandDashV2 .bd-dl-btn:hover { color: var(--bd-amber); border-color: rgba(242,163,60,.4); background: rgba(242,163,60,.1); transform: translateY(-1px); }
#brandDashV2 .bd-tbl-foot { padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--bd-hair); font-family: var(--bd-mono); font-size: 11.5px; color: var(--bd-muted); flex-wrap: wrap; gap: 8px; }
#brandDashV2 .bd-tbl-foot b { color: var(--bd-body); }
#brandDashV2 .bd-no-rows { text-align: center; padding: 34px; color: var(--bd-muted); font-family: var(--bd-mono); font-size: 13px; }

/* ===== Spotlight de cursor (vida, on-brand) ===== */
#brandDashV2 .bd-kpi, #brandDashV2 .bd-glass { --mx: 50%; --my: -20%; }
#brandDashV2 .bd-kpi::after,
#brandDashV2 .bd-comp::after,
#brandDashV2 .bd-wa::after,
#brandDashV2 .bd-act-main::after,
#brandDashV2 .bd-q-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(440px circle at var(--mx) var(--my), rgba(242,163,60,.10), rgba(45,212,191,.05) 38%, transparent 62%);
  opacity: 0; transition: opacity .36s ease;
}
#brandDashV2 .bd-kpi:hover::after,
#brandDashV2 .bd-comp:hover::after,
#brandDashV2 .bd-wa:hover::after,
#brandDashV2 .bd-act-main:hover::after,
#brandDashV2 .bd-q-tile:hover::after { opacity: 1; }
#brandDashV2 .bd-kpi > *, #brandDashV2 .bd-comp > *, #brandDashV2 .bd-wa > *, #brandDashV2 .bd-act-main > *, #brandDashV2 .bd-q-tile > * { position: relative; z-index: 1; }

/* ===== RESPONSIVE (mobile-first, <1100px = flujo normal con scroll) ===== */
@media (max-width: 1080px) {
  #brandDashV2 .bd-kpis { grid-template-columns: repeat(2, 1fr); }
  #brandDashV2 .bd-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  #brandDashV2 .bd-act { grid-template-columns: 1fr; }
  #brandDashV2 .bd-wa { grid-template-columns: 1fr; gap: 24px; }
  #brandDashV2 .bd-wa-right { order: -1; }
}
@media (max-width: 640px) {
  #brandDashV2 .bd-topbar-inner { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  #brandDashV2 .bd-greet { order: 5; width: 100%; margin-left: 0; }
  #brandDashV2 .bd-search { order: 6; max-width: 100%; margin-left: 0; }
  #brandDashV2 .bd-shell { padding: 22px 16px 60px; }
  #brandDashV2 .bd-kpis { grid-template-columns: 1fr; }
  #brandDashV2 .bd-quick { grid-template-columns: 1fr; }
  #brandDashV2 .bd-band-title { font-size: 18px; }
  #brandDashV2 .bd-kpi-val { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #brandDashV2 * { animation: none !important; transition: none !important; }
  #brandDashV2 .bd-kpi::after, #brandDashV2 .bd-comp::after, #brandDashV2 .bd-wa::after,
  #brandDashV2 .bd-act-main::after, #brandDashV2 .bd-q-tile::after { transition: none; }
}

/* ============================================================
   FIT-TO-VIEWPORT (desktop ≥1100px) — el Focus Column entra en 1 pantalla,
   sin scroll de página; la tabla scrollea adentro de su caja.
   #brandDashV2 se vuelve app-shell fijo a la ventana (topbar + grid de 6 bandas).
   ============================================================ */
@media (min-width: 1100px) {
  /* Guard: que ningún ancestro cree un containing-block (transform/filter/contain)
     que rompa el position:fixed del shell del Focus Column. */
  body:has(#brandDashV2) #dashboardContent,
  body:has(#brandDashV2) #app {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
  }
  #brandDashV2 {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(1100px 700px at 82% -8%, rgba(242,163,60,0.10), transparent 60%),
      radial-gradient(900px 650px at 4% 108%, rgba(45,212,191,0.08), transparent 60%),
      linear-gradient(160deg, #1A1E26, #12151b 70%);
    background-color: #15181E;
    overflow: hidden;
  }
  #brandDashV2 .bd-topbar { position: relative; flex-shrink: 0; }
  #brandDashV2 .bd-topbar-inner { height: 54px; }

  #brandDashV2 .bd-shell {
    flex: 1; min-height: 0;
    max-width: 1600px; width: 100%; margin: 0 auto;
    padding: 10px 22px 12px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* filas 1-3 al contenido pero acotadas; la tabla (fila 4) toma el resto y nunca baja de 150px */
    grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(200px, 1fr);
    gap: 10px;
    overflow: hidden;
  }
  #brandDashV2 .bd-band { margin: 0 !important; min-height: 0; display: flex; flex-direction: column; }
  #brandDashV2 .bd-band:nth-of-type(1) { grid-column: 1 / -1; grid-row: 1; }      /* KPIs */
  #brandDashV2 .bd-band:nth-of-type(2) { grid-column: 1 / 8;  grid-row: 2; }      /* Composición */
  #brandDashV2 .bd-band:nth-of-type(3) { grid-column: 8 / -1; grid-row: 2; }      /* WhatsApp */
  #brandDashV2 .bd-band:nth-of-type(4) { grid-column: 1 / 6;  grid-row: 3; }      /* Actividad/mes */
  #brandDashV2 .bd-band:nth-of-type(5) { grid-column: 6 / -1; grid-row: 3; }      /* Accesos */
  #brandDashV2 .bd-band:nth-of-type(6) { grid-column: 1 / -1; grid-row: 4; min-height: 0; overflow: hidden; } /* Tabla */

  /* band-heads minimal para ganar alto */
  #brandDashV2 .bd-band-head { margin-bottom: 7px; padding: 0 2px; }
  #brandDashV2 .bd-band-title { font-size: 13.5px; }
  #brandDashV2 .bd-band-kick { display: none; }
  #brandDashV2 .bd-band-aside { display: none; }

  /* KPIs compactos */
  #brandDashV2 .bd-kpis { gap: 10px; }
  #brandDashV2 .bd-kpi { min-height: 0; padding: 11px 14px; }
  #brandDashV2 .bd-kpi-top { margin-bottom: 6px; }
  #brandDashV2 .bd-kpi-ic { width: 28px; height: 28px; }
  #brandDashV2 .bd-kpi-val { font-size: 25px; }
  #brandDashV2 .bd-kpi-val .cur { font-size: 14px; vertical-align: 4px; }
  #brandDashV2 .bd-kpi-val .kpi-unit { font-size: 15px; }
  #brandDashV2 .bd-kpi-sub { padding-top: 7px; font-size: 10px; line-height: 1.4; }
  #brandDashV2 .bd-kpi-breakdown { padding-top: 7px; gap: 5px; }
  #brandDashV2 .bd-chip { padding: 3px 6px; font-size: 9.5px; }
  #brandDashV2 .bd-kpi.is-credit .bd-kpi-val { font-size: 22px; }
  #brandDashV2 .bd-credit-meta { margin-top: 3px; margin-bottom: 6px; }
  #brandDashV2 .bd-btn-credit { height: 32px; font-size: 12px; }

  /* Composición compacta */
  #brandDashV2 .bd-comp { padding: 12px 15px; height: 100%; }
  #brandDashV2 .bd-comp-lbl { font-size: 9.5px; }
  #brandDashV2 .bd-comp-list { gap: 9px; margin-top: 9px; }
  #brandDashV2 .bd-comp-top .nm { font-size: 12.5px; }
  #brandDashV2 .bd-comp-track { height: 8px; }
  #brandDashV2 .bd-comp-foot { padding-top: 9px; }

  /* WhatsApp compacto */
  #brandDashV2 .bd-wa { padding: 12px 18px; gap: 18px; height: 100%; }
  #brandDashV2 .bd-wa-headline { margin-bottom: 11px; font-size: 12.5px; }
  #brandDashV2 .bd-wa-bar { height: 36px; }
  #brandDashV2 .bd-wa-legend { margin-top: 11px; gap: 18px; }
  #brandDashV2 .bd-wa-leg .lv { font-size: 16px; }
  #brandDashV2 .bd-wa-donut { width: 96px; height: 96px; }
  #brandDashV2 .bd-wa-donut svg { width: 96px; height: 96px; }
  #brandDashV2 .bd-wa-donut-mid .pp { font-size: 23px; }
  #brandDashV2 .bd-wa-donut-mid .pl { font-size: 8.5px; margin-top: 3px; }

  /* Actividad / mes compacto (entra en su fila, sin párrafo largo) */
  #brandDashV2 .bd-act { height: 100%; }
  #brandDashV2 .bd-act-main { min-height: 0; padding: 12px 16px; justify-content: center; overflow: hidden; }
  #brandDashV2 .bd-act-ic { width: 34px; height: 34px; margin-bottom: 0; }
  #brandDashV2 .bd-act-main h4 { font-size: 14px; margin-top: 8px; }
  #brandDashV2 .bd-act-main p { display: none; }            /* el detalle largo se omite en FIT (cabe en mobile) */
  #brandDashV2 .bd-act-spark { height: 34px; margin: 10px 0 12px; }
  #brandDashV2 .bd-badge-idle { margin-top: 10px; padding: 4px 9px; font-size: 10px; }
  #brandDashV2 .bd-btn-act { margin-top: 10px; height: 32px; font-size: 12px; }
  #brandDashV2 .bd-act-side { padding: 11px 16px; }
  #brandDashV2 .bd-act-side h5 { margin-bottom: 1px; }
  #brandDashV2 .bd-act-stat { padding: 6px 0; }
  #brandDashV2 .bd-act-stat .v { font-size: 14px; }
  #brandDashV2 .bd-act-stat .k { font-size: 12px; }

  /* Accesos rápidos compactos */
  #brandDashV2 .bd-quick { gap: 10px; height: 100%; }
  #brandDashV2 .bd-q-tile { padding: 12px 13px; gap: 7px; }
  #brandDashV2 .bd-q-ic { width: 34px; height: 34px; }
  #brandDashV2 .bd-q-ic svg { width: 19px; height: 19px; }
  #brandDashV2 .bd-q-tile h4 { font-size: 13.5px; }
  #brandDashV2 .bd-q-tile p { margin-top: 3px; font-size: 10px; }
  #brandDashV2 .bd-q-go { font-size: 12px; }

  /* Tabla con scroll interno (la página NO scrollea) */
  #brandDashV2 .bd-band:nth-of-type(6) .bd-files { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #brandDashV2 .bd-files-toolbar { padding: 11px 16px; }
  #brandDashV2 .bd-tbl-wrap { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(45,212,191,.32) transparent; }
  #brandDashV2 .bd-tbl-wrap::-webkit-scrollbar { width: 7px; }
  #brandDashV2 .bd-tbl-wrap::-webkit-scrollbar-thumb { background: rgba(45,212,191,.24); border-radius: 4px; }
  #brandDashV2 .bd-files-tbl thead th { padding: 9px 16px; }
  #brandDashV2 .bd-files-tbl tbody td { padding: 8px 16px; font-size: 12.5px; }
  #brandDashV2 .bd-tbl-foot { padding: 9px 16px; }
}

/* =====================================================================
 * POLISH FINO v3 (2026-06-30) — acabado sutil sobre "Focus Column" v2.
 * NO cambia layout, paleta, tipografía ni estructura: solo eleva el
 * acabado. (1) reveal de entrada con stagger, (2)(3) empty-states con
 * vida cuando la cuenta está en 0, (4) los "0" dejan de gritar.
 * Reversible: borrar este bloque entero vuelve al v2 exacto.
 * ===================================================================== */

/* (1) Reveal de entrada — las bandas suben+aparecen con un stagger fino. */
@media (prefers-reduced-motion: no-preference) {
  #brandDashV2 .bd-band { animation: bd-reveal .62s cubic-bezier(.22,1,.36,1) both; }
  #brandDashV2 .bd-band:nth-of-type(1) { animation-delay: .02s; }
  #brandDashV2 .bd-band:nth-of-type(2) { animation-delay: .07s; }
  #brandDashV2 .bd-band:nth-of-type(3) { animation-delay: .11s; }
  #brandDashV2 .bd-band:nth-of-type(4) { animation-delay: .15s; }
  #brandDashV2 .bd-band:nth-of-type(5) { animation-delay: .19s; }
  #brandDashV2 .bd-band:nth-of-type(6) { animation-delay: .23s; }
}
@keyframes bd-reveal {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* (2) Empty-state Composición — las barras vacías "respiran" esperando datos
 *     en vez de quedar como surcos muertos (sin inventar ningún valor). */
#brandDashV2 .bd-comp-track { position: relative; }
#brandDashV2 .bd-comp-track:has(i[data-w="0.0"])::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent 8%, rgba(124,135,155,.14), transparent 92%);
  background-size: 220% 100%;
  animation: bd-idle-sweep 2.8s ease-in-out infinite;
}
@keyframes bd-idle-sweep {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* (3) Empty-state Donut WhatsApp 0% — anillo punteado verde que respira,
 *     en vez de un aro gris plano que no comunica nada. */
#brandDashV2 .bd-wa-arc[data-pct="0"] {
  stroke: var(--bd-green) !important;
  stroke-dasharray: 2.5 9 !important;
  stroke-dashoffset: 0 !important;
  stroke-linecap: round;
  animation: bd-idle-breathe 3.6s ease-in-out infinite;
}
@keyframes bd-idle-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .64; } }

/* (4) Los "0" dejan de gritar — un KPI en cero se atenúa a 'muted' (todavía
 *     sin datos) en vez de un blanco pleno que se lee como error. */
#brandDashV2 .bd-kpi-val .cu[data-count="0"] { color: var(--bd-muted); }

@media (prefers-reduced-motion: reduce) {
  #brandDashV2 .bd-band { animation: none !important; }
  #brandDashV2 .bd-comp-track:has(i[data-w="0.0"])::after,
  #brandDashV2 .bd-wa-arc[data-pct="0"] { animation: none !important; }
}