/* =============================================================================
   Summit Analytics — Identidade Visual v2 (em migração)
   ----------------------------------------------------------------------------
   Arquivo isolado do style.css atual. Tudo aqui é escopado sob .v2-root
   (wrapper de página) e prefixado com v2- nas classes, pra coexistir com o
   visual atual sem conflito. Migração finalizada = arquivo renomeado e
   prefixos removidos.
   ============================================================================= */

/* Fontes Google: Inter (corpo), JetBrains Mono (títulos e mono) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700;800&display=swap');

/* ── Variáveis: tema escuro (padrão) ─────────────────────────────────────── */
.v2-root {
  --v2-bg:        #0a0c10;
  --v2-surface:   #111318;
  --v2-border:    #1e2028;
  --v2-ok:        #00e5a0;
  --v2-alert:     #ff4d6d;
  --v2-warn:      #FFD700;
  --v2-muted:     #6b7888;
  --v2-text:      #e8eaf0;
  --v2-dim:       #7a8090;
  --v2-accent:    #009bf9;
  --v2-brand:     #27445d;
  --v2-grid-line: rgba(0,155,249,.03);
}

/* ── Variáveis: tema claro ───────────────────────────────────────────────── */
.v2-root.v2-light {
  --v2-bg:        #f2f4f8;
  --v2-surface:   #ffffff;
  --v2-border:    #dde1ea;
  --v2-ok:        #00a572;
  --v2-alert:     #e0294a;
  --v2-warn:      #FFD700;
  --v2-muted:     #8a95a3;
  --v2-text:      #141720;
  --v2-dim:       #6b7280;
  --v2-accent:    #2563eb;
  --v2-brand:     #27445d;
  --v2-grid-line: rgba(37,99,235,.04);
}

/* ── Base da página v2 ──────────────────────────────────────────────────── */
.v2-root {
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 100vh;
  position: relative;
}

/* Grid de fundo sutil */
.v2-root::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--v2-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Wrapper de conteúdo (fica acima do grid) */
.v2-wrap {
  position: relative;
  z-index: 1;
  max-width: 1760px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ── Tipografia utilitária ──────────────────────────────────────────────── */
.v2-root .v2-font-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Header padrão ──────────────────────────────────────────────────────── */
.v2-root .v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--v2-border);
  padding-bottom: 24px;
}
.v2-root .v2-logo { display: flex; align-items: center; gap: 14px; }
.v2-root .v2-logo-svg {
  height: 100px;
  width: auto;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.v2-root.v2-light .v2-logo-svg {
  filter: brightness(0) saturate(100%) invert(24%) sepia(29%) saturate(600%) hue-rotate(170deg) brightness(90%);
}
.v2-root .v2-logo-text { display: flex; flex-direction: column; justify-content: center; }
.v2-root .v2-logo-text h1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
}
.v2-root .v2-logo-text h1 span { color: var(--v2-brand); }
.v2-root .v2-logo-text p {
  color: var(--v2-dim);
  font-size: .72rem;
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.v2-root .v2-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Botão de tema (claro/escuro) ───────────────────────────────────────── */
.v2-root .v2-btn-theme {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  color: var(--v2-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.v2-root .v2-btn-theme:hover { border-color: var(--v2-accent); color: var(--v2-accent); }
.v2-root .v2-btn-theme:active { transform: scale(.93); }

/* ── Pílulas do header (refresh-row e expert-wrap) ──────────────────────── */
.v2-root .v2-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
}
.v2-root .v2-pill-label {
  font-size: .6rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--v2-dim);
  text-transform: uppercase;
  letter-spacing: .8px;
  white-space: nowrap;
}

/* ── Badge de status ────────────────────────────────────────────────────── */
.v2-root .v2-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  font-size: .75rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  transition: all .4s;
}
.v2-root .v2-badge .v2-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: v2-pulse 2s infinite;
}
.v2-root .v2-badge.v2-ok    { border-color: var(--v2-ok);    color: var(--v2-ok);    }
.v2-root .v2-badge.v2-ok    .v2-dot { background: var(--v2-ok); }
.v2-root .v2-badge.v2-alert { border-color: var(--v2-alert); color: var(--v2-alert); }
.v2-root .v2-badge.v2-alert .v2-dot { background: var(--v2-alert); animation-duration: .6s; }
.v2-root .v2-badge.v2-warn  { border-color: var(--v2-warn);  color: var(--v2-warn);  }
.v2-root .v2-badge.v2-warn  .v2-dot { background: var(--v2-warn); }
.v2-root .v2-badge.v2-loading .v2-dot { background: var(--v2-muted); animation: none; }
@keyframes v2-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* ── Título de seção (com barra azul à esquerda) ────────────────────────── */
.v2-root .v2-section { margin-bottom: 52px; }
.v2-root .v2-sections-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 52px;
}
.v2-root .v2-sections-row .v2-section {
  margin-bottom: 0;
  flex: 0 0 auto;
  width: 380px;
}
.v2-root .v2-sections-row .v2-menu-cards {
  grid-template-columns: 1fr;
}
.v2-root .v2-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.5px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-root .v2-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--v2-accent);
  border-radius: 2px;
}

/* ── Cards (block) ──────────────────────────────────────────────────────── */
.v2-root .v2-blocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.v2-root .v2-block {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 11px;
  overflow: hidden;
  transition: box-shadow .25s;
  display: flex;
  flex-direction: column;
}
.v2-root .v2-block.v2-ok    { border-top: 2px solid var(--v2-ok); }
.v2-root .v2-block.v2-warn  { border-top: 2px solid var(--v2-warn); }
.v2-root .v2-block.v2-alert { border-top: 2px solid var(--v2-alert); }
.v2-root .v2-block.v2-ok:hover    { box-shadow: 0 5px 20px rgba(0,229,160,.07); }
.v2-root .v2-block.v2-warn:hover  { box-shadow: 0 5px 20px rgba(255,215,0,.07); }
.v2-root .v2-block.v2-alert:hover { box-shadow: 0 5px 20px rgba(255,77,109,.09); }
.v2-root .v2-block-title {
  padding: 10px 14px 8px;
  font-size: .65rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--v2-dim);
  border-bottom: 1px solid var(--v2-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ── Botão de tema flutuante (para páginas sem header, ex: login) ───────── */
.v2-root .v2-btn-theme-float {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  color: var(--v2-dim);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.v2-root .v2-btn-theme-float:hover { border-color: var(--v2-accent); color: var(--v2-accent); }
.v2-root .v2-btn-theme-float:active { transform: scale(.93); }

/* ── Login ──────────────────────────────────────────────────────────────── */
.v2-root .v2-login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.v2-root .v2-login-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  padding: 44px 48px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.v2-root.v2-light .v2-login-card {
  box-shadow: 0 20px 60px rgba(20,23,32,.08);
}
.v2-root .v2-login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.v2-root .v2-login-logo-svg {
  height: 72px;
  width: auto;
  filter: brightness(0) invert(1);
}
.v2-root.v2-light .v2-login-logo-svg {
  filter: brightness(0) saturate(100%) invert(24%) sepia(29%) saturate(600%) hue-rotate(170deg) brightness(90%);
}
.v2-root .v2-login-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  text-align: center;
}
.v2-root .v2-login-title span { color: var(--v2-brand); }
.v2-root .v2-login-subtitle {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-dim);
  margin-top: -10px;
  letter-spacing: .5px;
}
.v2-root .v2-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.v2-root .v2-login-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  color: var(--v2-text);
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.v2-root .v2-login-input::placeholder { color: var(--v2-dim); }
.v2-root .v2-login-input:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px rgba(0,155,249,.14);
}
.v2-root.v2-light .v2-login-input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.v2-root .v2-login-btn {
  width: 100%;
  padding: 14px;
  background: var(--v2-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: all .2s;
  margin-top: 4px;
}
.v2-root .v2-login-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,155,249,.28); }
.v2-root .v2-login-btn:active { transform: translateY(0); }
.v2-root .v2-login-erro {
  color: var(--v2-alert);
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  text-align: center;
  min-height: 18px;
}

/* ── Menu / Home ────────────────────────────────────────────────────────── */
.v2-root .v2-menu-user {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-text);
  font-weight: 600;
  letter-spacing: .3px;
}
.v2-root .v2-menu-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--v2-dim);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.v2-root .v2-menu-logout:hover {
  border-color: var(--v2-alert);
  color: var(--v2-alert);
}

.v2-root .v2-menu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.v2-root .v2-menu-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 11px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  cursor: pointer;
}
.v2-root .v2-menu-card:hover {
  border-color: var(--v2-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,155,249,.12);
}
.v2-root.v2-light .v2-menu-card:hover {
  box-shadow: 0 8px 24px rgba(37,99,235,.12);
}
.v2-root .v2-menu-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.v2-root .v2-menu-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.v2-root .v2-menu-card-title {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -.2px;
}
.v2-root .v2-menu-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  color: var(--v2-dim);
  line-height: 1.4;
}
.v2-root .v2-menu-card-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border: 1px dashed var(--v2-border);
  border-radius: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: var(--v2-dim);
  letter-spacing: .5px;
}

/* ── Back link (voltar ao menu) ─────────────────────────────────────────── */
.v2-root .v2-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-dim);
  text-decoration: none;
  letter-spacing: .5px;
  transition: color .2s;
  margin-top: 8px;
}
.v2-root .v2-back-link:hover { color: var(--v2-accent); }

/* ── Nome do usuário dentro do card de login/senha ──────────────────────── */
.v2-root .v2-login-user {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-dim);
  letter-spacing: .5px;
  margin-top: -8px;
}

/* ── Botão pílula genérico (header actions: Menu, Sair, etc.) ───────────── */
.v2-root .v2-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--v2-dim);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.v2-root .v2-header-btn:hover {
  border-color: var(--v2-accent);
  color: var(--v2-accent);
}
.v2-root .v2-header-btn.v2-danger:hover {
  border-color: var(--v2-alert);
  color: var(--v2-alert);
}

/* ── Card genérico (sem borda colorida no topo) ─────────────────────────── */
.v2-root .v2-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.v2-root .v2-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.3px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--v2-text);
}
.v2-root .v2-card-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--v2-accent);
  border-radius: 2px;
}

/* ── Mensagem (sucesso / erro) ──────────────────────────────────────────── */
.v2-root .v2-msg {
  padding: 12px 16px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  margin-bottom: 14px;
  display: none;
  border: 1px solid var(--v2-border);
}
.v2-root .v2-msg.v2-msg-ok {
  display: block;
  color: var(--v2-ok);
  background: rgba(0,229,160,.06);
  border-color: rgba(0,229,160,.25);
}
.v2-root.v2-light .v2-msg.v2-msg-ok {
  background: rgba(0,165,114,.08);
  border-color: rgba(0,165,114,.3);
}
.v2-root .v2-msg.v2-msg-erro {
  display: block;
  color: var(--v2-alert);
  background: rgba(255,77,109,.06);
  border-color: rgba(255,77,109,.25);
}
.v2-root.v2-light .v2-msg.v2-msg-erro {
  background: rgba(224,41,74,.08);
  border-color: rgba(224,41,74,.3);
}

/* ── Formulário ─────────────────────────────────────────────────────────── */
.v2-root .v2-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}
.v2-root .v2-form-group { display: flex; flex-direction: column; gap: 6px; }
.v2-root .v2-form-full { grid-column: 1 / -1; }
.v2-root .v2-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.v2-root .v2-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--v2-dim);
  font-weight: 600;
}
.v2-root .v2-form-hint {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  color: var(--v2-dim);
  margin-top: -2px;
}
.v2-root .v2-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  color: var(--v2-text);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.v2-root .v2-input::placeholder { color: var(--v2-dim); }
.v2-root .v2-input:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px rgba(0,155,249,.14);
}
.v2-root.v2-light .v2-input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

/* ── Botões de ação ─────────────────────────────────────────────────────── */
.v2-root .v2-btn {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--v2-border);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: all .18s;
  background: var(--v2-surface);
  color: var(--v2-text);
}
.v2-root .v2-btn:hover { transform: translateY(-1px); }
.v2-root .v2-btn:active { transform: translateY(0); }
.v2-root .v2-btn.v2-btn-primary {
  background: var(--v2-accent);
  color: #fff;
  border-color: var(--v2-accent);
}
.v2-root .v2-btn.v2-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(0,155,249,.28);
}
.v2-root .v2-btn.v2-btn-ok {
  background: var(--v2-ok);
  color: #041916;
  border-color: var(--v2-ok);
}
.v2-root .v2-btn.v2-btn-ok:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 18px rgba(0,229,160,.28);
}
.v2-root .v2-btn.v2-btn-danger {
  color: var(--v2-alert);
  border-color: rgba(255,77,109,.35);
}
.v2-root.v2-light .v2-btn.v2-btn-danger { border-color: rgba(224,41,74,.35); }
.v2-root .v2-btn.v2-btn-danger:hover {
  background: var(--v2-alert);
  color: #fff;
  border-color: var(--v2-alert);
  box-shadow: 0 6px 18px rgba(255,77,109,.28);
}
.v2-root .v2-btn.v2-btn-neutral:hover {
  border-color: var(--v2-accent);
  color: var(--v2-accent);
}
.v2-root .v2-btn-sm {
  padding: 7px 12px;
  font-size: .75rem;
  font-weight: 600;
}

/* ── Tabela ─────────────────────────────────────────────────────────────── */
.v2-root .v2-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
}
.v2-root .v2-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--v2-dim);
  font-weight: 700;
  border-bottom: 1px solid var(--v2-border);
  background: transparent;
}
.v2-root .v2-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--v2-border);
  color: var(--v2-text);
  vertical-align: middle;
}
.v2-root .v2-table tbody tr:hover td {
  background: rgba(0,155,249,.04);
}
.v2-root.v2-light .v2-table tbody tr:hover td {
  background: rgba(37,99,235,.04);
}
.v2-root .v2-td-center,
.v2-root .v2-table thead th.v2-td-center,
.v2-root .v2-table tbody td.v2-td-center { text-align: center; }
.v2-root .v2-td-actions { display: flex; gap: 8px; justify-content: center; }

/* Variante: tabela com tudo centralizado (head + body) */
.v2-root .v2-table.v2-table-centered thead th,
.v2-root .v2-table.v2-table-centered tbody td {
  text-align: center;
}

/* ── Dropdown (dcc.Dropdown Dash 2.x) — escopado em .v2-root ──────────────
   Seletores com prefixo "html body" para ganhar de overrides.css legacy que
   força o tema antigo via !important sem escopo.
   =========================================================================== */
html body .v2-root .dash-dropdown-wrapper,
html body .v2-root .dash-dropdown-wrapper * {
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
}
html body .v2-root button.dash-dropdown {
  background-color: var(--v2-bg) !important;
  background: var(--v2-bg) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 10px !important;
  color: var(--v2-text) !important;
  min-height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
html body .v2-root button.dash-dropdown:hover,
html body .v2-root button.dash-dropdown:focus,
html body .v2-root button.dash-dropdown[aria-expanded="true"] {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,155,249,.14) !important;
}
html body .v2-root.v2-light button.dash-dropdown:hover,
html body .v2-root.v2-light button.dash-dropdown:focus,
html body .v2-root.v2-light button.dash-dropdown[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}
html body .v2-root .dash-dropdown-value,
html body .v2-root .dash-dropdown-grid-container {
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
}
html body .v2-root .dash-dropdown-placeholder {
  color: var(--v2-dim) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .9rem !important;
}

html body .v2-root .dash-dropdown-menu,
html body .v2-root .dash-dropdown-options,
html body .v2-root [class*="dash-dropdown-menu"],
html body .v2-root [class*="VirtualizedSelectList"] {
  background-color: var(--v2-surface) !important;
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.35) !important;
  color: var(--v2-text) !important;
  overflow: hidden;
  z-index: 9999 !important;
}
html body .v2-root.v2-light .dash-dropdown-menu,
html body .v2-root.v2-light [class*="dash-dropdown-menu"] {
  box-shadow: 0 10px 32px rgba(20,23,32,.12) !important;
}

html body .v2-root .dash-dropdown-option,
html body .v2-root [class*="dash-dropdown-option"] {
  background-color: var(--v2-surface) !important;
  background: var(--v2-surface) !important;
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .88rem !important;
  padding: 10px 14px !important;
}
html body .v2-root .dash-dropdown-option:hover,
html body .v2-root .dash-dropdown-option.focused,
html body .v2-root .dash-dropdown-option.active {
  background-color: rgba(0,155,249,.12) !important;
  background: rgba(0,155,249,.12) !important;
  color: var(--v2-accent) !important;
}
html body .v2-root.v2-light .dash-dropdown-option:hover,
html body .v2-root.v2-light .dash-dropdown-option.focused,
html body .v2-root.v2-light .dash-dropdown-option.active {
  background-color: rgba(37,99,235,.08) !important;
  background: rgba(37,99,235,.08) !important;
}
html body .v2-root .dash-dropdown-option.selected {
  background-color: rgba(0,155,249,.18) !important;
  background: rgba(0,155,249,.18) !important;
  color: var(--v2-accent) !important;
  font-weight: 600 !important;
}

/* =============================================================================
   Popover do dcc.Dropdown (Radix UI) — renderizado em PORTAL no <body>, fora
   de .v2-root. Por isso usamos body.v2-active como escopo. Variáveis também
   são redeclaradas em body para herança dentro do portal.
   ============================================================================= */
body.v2-active {
  --v2-bg:        #0a0c10;
  --v2-surface:   #111318;
  --v2-border:    #1e2028;
  --v2-ok:        #00e5a0;
  --v2-alert:     #ff4d6d;
  --v2-warn:      #FFD700;
  --v2-muted:     #6b7888;
  --v2-text:      #e8eaf0;
  --v2-dim:       #7a8090;
  --v2-accent:    #009bf9;
  --v2-brand:     #27445d;
}
body.v2-active.v2-light-active {
  --v2-bg:        #f2f4f8;
  --v2-surface:   #ffffff;
  --v2-border:    #dde1ea;
  --v2-ok:        #00a572;
  --v2-alert:     #e0294a;
  --v2-warn:      #FFD700;
  --v2-muted:     #8a95a3;
  --v2-text:      #141720;
  --v2-dim:       #6b7280;
  --v2-accent:    #2563eb;
  --v2-brand:     #27445d;
}

/* Popover container (Radix) */
body.v2-active .dash-dropdown-content {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.35) !important;
  color: var(--v2-text) !important;
  overflow: hidden !important;
  padding: 6px !important;
  max-height: min(420px, 85vh) !important;
  display: flex !important;
  flex-direction: column !important;
}
body.v2-active.v2-light-active .dash-dropdown-content {
  box-shadow: 0 10px 32px rgba(20,23,32,.12) !important;
}

/* Search bar (container com ícone + input) */
body.v2-active .dash-dropdown-search-container {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.v2-active .dash-dropdown-search-container:focus-within {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 2px rgba(0,155,249,.14) !important;
}
body.v2-active .dash-dropdown-search-icon {
  color: var(--v2-dim) !important;
  flex-shrink: 0 !important;
}
body.v2-active .dash-dropdown-search-icon path {
  fill: currentColor !important;
}
body.v2-active input.dash-dropdown-search {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
  padding: 2px 0 !important;
  flex: 1 !important;
  width: 100% !important;
}
body.v2-active input.dash-dropdown-search::placeholder {
  color: var(--v2-dim) !important;
  opacity: 1 !important;
}

/* Lista de opções (portaled) — flex-scroll dentro do popup */
body.v2-active .dash-options-list,
body.v2-active .dash-dropdown-options {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  color: var(--v2-text) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  max-height: none !important;
}
/* Scrollbar estilizada pra combinar com tema */
body.v2-active .dash-options-list::-webkit-scrollbar,
body.v2-active .dash-dropdown-options::-webkit-scrollbar {
  width: 8px !important;
}
body.v2-active .dash-options-list::-webkit-scrollbar-track,
body.v2-active .dash-dropdown-options::-webkit-scrollbar-track {
  background: transparent !important;
}
body.v2-active .dash-options-list::-webkit-scrollbar-thumb,
body.v2-active .dash-dropdown-options::-webkit-scrollbar-thumb {
  background: var(--v2-border) !important;
  border-radius: 4px !important;
}
body.v2-active .dash-options-list::-webkit-scrollbar-thumb:hover,
body.v2-active .dash-dropdown-options::-webkit-scrollbar-thumb:hover {
  background: var(--v2-muted) !important;
}
body.v2-active .dash-options-list-option,
body.v2-active .dash-dropdown-option {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .88rem !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
body.v2-active .dash-options-list-option:hover,
body.v2-active .dash-options-list-option[aria-selected="true"],
body.v2-active .dash-dropdown-option.selected,
body.v2-active .dash-dropdown-option:hover {
  background: rgba(0,155,249,.12) !important;
  background-color: rgba(0,155,249,.12) !important;
  color: var(--v2-accent) !important;
}
body.v2-active.v2-light-active .dash-options-list-option:hover,
body.v2-active.v2-light-active .dash-options-list-option[aria-selected="true"] {
  background: rgba(37,99,235,.08) !important;
  background-color: rgba(37,99,235,.08) !important;
}
body.v2-active .dash-options-list-option[aria-selected="true"] {
  background: rgba(0,155,249,.18) !important;
  font-weight: 600 !important;
}
body.v2-active .dash-options-list-option-text,
body.v2-active .dash-options-list-option-text span {
  color: inherit !important;
}
body.v2-active .dash-options-list-option-checkbox {
  accent-color: var(--v2-accent) !important;
  display: none !important;  /* o radio oculto fica escondido; seleção via highlight */
}

/* ── Search input e wrappers dentro do menu do dropdown ─────────────────── */
html body .v2-root .dash-dropdown-wrapper input,
html body .v2-root [class*="dash-dropdown"] input,
html body .v2-root [class*="dash-dropdown"] input[type="text"],
html body .v2-root [class*="dash-dropdown"] input[type="search"] {
  background: var(--v2-bg) !important;
  background-color: var(--v2-bg) !important;
  color: var(--v2-text) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
  padding: 8px 12px !important;
  outline: none !important;
  -webkit-appearance: none !important;
}
html body .v2-root .dash-dropdown-wrapper input::placeholder,
html body .v2-root [class*="dash-dropdown"] input::placeholder {
  color: var(--v2-dim) !important;
  opacity: 1 !important;
}
html body .v2-root .dash-dropdown-wrapper input:focus,
html body .v2-root [class*="dash-dropdown"] input:focus {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 2px rgba(0,155,249,.14) !important;
}
/* Containers internos (barra de busca, separadores etc.) — pegar qualquer div
   que envolva o input de busca, pra não aparecer fundo branco residual */
html body .v2-root [class*="dash-dropdown-menu"] > div,
html body .v2-root [class*="dash-dropdown-menu"] > div > div,
html body .v2-root [class*="dash-dropdown-menu"] [class*="search"],
html body .v2-root [class*="dash-dropdown-menu"] [class*="Search"],
html body .v2-root [class*="dash-dropdown-menu"] [class*="input"],
html body .v2-root [class*="dash-dropdown-menu"] [class*="Input"],
html body .v2-root [class*="dash-dropdown"] [class*="search-wrapper"],
html body .v2-root [class*="dash-dropdown"] [class*="SearchInput"] {
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  color: var(--v2-text) !important;
  border-color: var(--v2-border) !important;
}
/* Ícone de lupa (SVG) dentro do search */
html body .v2-root [class*="dash-dropdown-menu"] svg,
html body .v2-root [class*="dash-dropdown-menu"] svg path {
  fill: var(--v2-dim) !important;
  stroke: var(--v2-dim) !important;
  color: var(--v2-dim) !important;
}

/* ── Filter bar (filtros no topo) ───────────────────────────────────────── */
.v2-root .v2-filters-bar {
  display: inline-flex;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 16px 20px;
  width: fit-content;
  max-width: 100%;
}
.v2-root .v2-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.v2-root .v2-filter-group .v2-label { margin-bottom: 2px; }

/* ── KPI row ───────────────────────────────────────────────────────────── */
.v2-root .v2-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
  align-items: stretch;
}
.v2-root .v2-kpi-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-top: 2px solid var(--v2-border);
  border-radius: 11px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 130px;
}
.v2-root .v2-kpi-card.v2-kpi-ok    { border-top-color: var(--v2-ok); }
.v2-root .v2-kpi-card.v2-kpi-warn  { border-top-color: var(--v2-warn); }
.v2-root .v2-kpi-card.v2-kpi-alert { border-top-color: var(--v2-alert); }
.v2-root .v2-kpi-card.v2-kpi-info  { border-top-color: var(--v2-accent); }
.v2-root .v2-kpi-card.v2-kpi-muted { border-top-color: var(--v2-muted); }
.v2-root .v2-kpi-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--v2-dim);
  font-weight: 700;
}
.v2-root .v2-kpi-value {
  font-family: 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--v2-text);
  line-height: 1.1;
}
.v2-root .v2-kpi-value-sm {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.3;
  letter-spacing: .2px;
  color: var(--v2-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.v2-root .v2-kpi-card.v2-kpi-ok    .v2-kpi-value { color: var(--v2-ok); }
.v2-root .v2-kpi-card.v2-kpi-warn  .v2-kpi-value { color: var(--v2-warn); }
.v2-root .v2-kpi-card.v2-kpi-alert .v2-kpi-value { color: var(--v2-alert); }
.v2-root .v2-kpi-card.v2-kpi-info  .v2-kpi-value { color: var(--v2-accent); }

/* ── Health Check — grid matricial ──────────────────────────────────────── */
.v2-root .v2-hc-grid-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.v2-root .v2-hc-matrix {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
}
.v2-root .v2-hc-matrix thead th {
  padding: 8px 10px;
  background: transparent;
  border-bottom: 1px solid var(--v2-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--v2-dim);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.v2-root .v2-hc-group-th {
  border-bottom: 1px solid var(--v2-border) !important;
  color: var(--v2-accent) !important;
  letter-spacing: .6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  padding: 12px 8px !important;
}
.v2-root .v2-hc-col-th {
  height: auto;
  min-height: 60px;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  padding: 10px 2px 12px !important;
  background: transparent;
  vertical-align: bottom;
  overflow: visible;
}
.v2-root .v2-hc-col-th-inner {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--v2-dim);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  padding: 0;
}
.v2-root .v2-hc-corner-th { width: 130px; }
.v2-root .v2-hc-expert-th { text-align: left !important; }
.v2-root .v2-hc-matrix tbody td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--v2-border);
  text-align: center;
  vertical-align: middle;
}
.v2-root .v2-hc-matrix tbody tr:last-child td { border-bottom: none; }
.v2-root .v2-hc-expert-td {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--v2-text);
  text-align: left !important;
  padding-left: 14px !important;
  min-width: 130px;
  white-space: nowrap;
}
.v2-root .v2-hc-cell {
  min-width: 28px;
  transition: transform .12s;
  cursor: default;
}
.v2-root .v2-hc-cell:hover { transform: scale(1.08); }
.v2-root .v2-hc-cell-none {
  color: var(--v2-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  background: transparent;
}
.v2-root .v2-hc-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
}

/* ── Health Check — badges de status nas tabelas ───────────────────────── */
.v2-root .v2-hc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .8px;
}
.v2-root .v2-hc-badge.v2-critico {
  background: rgba(255,77,109,.12);
  color: var(--v2-alert);
  border: 1px solid rgba(255,77,109,.3);
}
.v2-root .v2-hc-badge.v2-alerta {
  background: rgba(255,215,0,.12);
  color: var(--v2-warn);
  border: 1px solid rgba(255,215,0,.3);
}
.v2-root .v2-hc-detail-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-dim);
}
.v2-root .v2-hc-detail-msg {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: var(--v2-dim);
  max-width: 420px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.v2-root .v2-empty {
  padding: 30px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--v2-dim);
  letter-spacing: .4px;
}

/* =============================================================================
   Tooltip customizado v2 — append no body via JS (tooltip_v2.js).
   Usa variáveis definidas em body.v2-active para respeitar o tema.
   ============================================================================= */
body.v2-active .v2-tip {
  position: fixed;
  z-index: 10000;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 240px;
  max-width: 340px;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  font-family: 'Inter', sans-serif;
  color: var(--v2-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease-out;
}
body.v2-active.v2-light-active .v2-tip {
  box-shadow: 0 14px 36px rgba(20,23,32,.12);
}
body.v2-active .v2-tip.v2-tip-visible {
  opacity: 1;
}
body.v2-active .v2-tip-title {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-border);
  color: var(--v2-text);
  letter-spacing: -.1px;
}
body.v2-active .v2-tip-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
body.v2-active .v2-tip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  line-height: 1.3;
}
body.v2-active .v2-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
body.v2-active .v2-tip-dot.v2-ok    { background: var(--v2-ok); }
body.v2-active .v2-tip-dot.v2-warn  { background: var(--v2-warn); }
body.v2-active .v2-tip-dot.v2-alert { background: var(--v2-alert); }
body.v2-active .v2-tip-dot.v2-info  { background: var(--v2-accent); }
body.v2-active .v2-tip-dot.v2-muted { background: var(--v2-muted); }
body.v2-active .v2-tip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--v2-dim);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 88px;
}
body.v2-active .v2-tip-value {
  font-weight: 600;
  color: var(--v2-text);
  font-size: .78rem;
  font-family: 'Inter', sans-serif;
  flex: 1;
  text-align: right;
  word-break: break-word;
}
body.v2-active .v2-tip-ago {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: var(--v2-dim);
  font-weight: 400;
  margin-left: 6px;
}
body.v2-active .v2-tip-msg {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--v2-border);
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--v2-dim);
}
body.v2-active .v2-tip-msg:empty {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ── Plotly hover tooltip — override pro tema claro ─────────────────────────
   A figura tem hoverlabel hardcoded (bg #111318) porque Plotly não lê CSS
   vars. No tema claro, sobrescrevemos via CSS no SVG da Plotly.
   Cobre 3 estruturas possíveis de tooltip:
     1. Hover normal     → g.hovertext > path + text
     2. Unified mode     → g.axistext (ou g.infolayer) > path + text
     3. Legend hover     → g.hoverlayer .legendtext ~ rect
*/
body.v2-active.v2-light-active .js-plotly-plot .hovertext > path,
body.v2-active.v2-light-active .js-plotly-plot .hovertext > rect,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer .hovertext path,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer .axistext > path,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer g.axistext > path,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer .legendtext ~ rect {
  fill: #ffffff !important;
  stroke: #dde1ea !important;
}
body.v2-active.v2-light-active .js-plotly-plot .hovertext > text,
body.v2-active.v2-light-active .js-plotly-plot .hovertext > text tspan,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer text,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer text tspan,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer .axistext text,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer .axistext text tspan {
  fill: #141720 !important;
}
body.v2-active.v2-light-active .js-plotly-plot .hovertext foreignObject,
body.v2-active.v2-light-active .js-plotly-plot .hovertext foreignObject > div,
body.v2-active.v2-light-active .js-plotly-plot .hovertext foreignObject b,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer foreignObject,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer foreignObject > div,
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer foreignObject b {
  color: #141720 !important;
}
/* Labels cinza dim (spans inline com color:#7a8090 no hovertemplate)
   precisam mudar a cor pra um cinza que funcione no fundo branco */
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer foreignObject span[style*="#7a8090"],
body.v2-active.v2-light-active .js-plotly-plot .hovertext foreignObject span[style*="#7a8090"],
body.v2-active.v2-light-active .js-plotly-plot .hoverlayer foreignObject i[style*="#7a8090"],
body.v2-active.v2-light-active .js-plotly-plot .hovertext foreignObject i[style*="#7a8090"] {
  color: #5a6170 !important;
}


/* ── Spinner de loading ─────────────────────────────────────────────────── */
.v2-root .v2-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 16px;
}
.v2-root .v2-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--v2-border);
  border-top-color: var(--v2-accent);
  border-radius: 50%;
  animation: v2-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }
.v2-root .v2-spinner-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--v2-dim);
  letter-spacing: .3px;
}

/* ── Pílula de destaque (ex: expert único no recon) ─────────────────────── */
.v2-root .v2-highlight-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(0,155,249,.3);
  background: rgba(0,155,249,.08);
  color: var(--v2-accent);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.v2-root.v2-light .v2-highlight-pill {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.3);
}

/* ── Resultado de ação (card colorido com borda/fundo tonal) ────────────── */
.v2-root .v2-result-box {
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--v2-border);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.5;
}
.v2-root .v2-result-box.v2-result-ok {
  color: var(--v2-ok);
  background: rgba(0,229,160,.06);
  border-color: rgba(0,229,160,.3);
}
.v2-root .v2-result-box.v2-result-err {
  color: var(--v2-alert);
  background: rgba(255,77,109,.06);
  border-color: rgba(255,77,109,.3);
}

/* ── Instrução / parágrafo contextual ───────────────────────────────────── */
.v2-root .v2-instruction {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--v2-dim);
  margin-bottom: 14px;
}

/* ── Card centralizado (páginas de ação pontual: recon, etc.) ───────────── */
.v2-root .v2-action-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v2-root .v2-action-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--v2-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-root .v2-action-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--v2-accent);
  border-radius: 2px;
}
.v2-root .v2-action-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: var(--v2-dim);
  line-height: 1.5;
  margin-top: -10px;
}
.v2-root .v2-action-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-root .v2-action-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Charts row (grid responsivo de cards de gráfico) ───────────────────── */
.v2-root .v2-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.v2-root .v2-charts-row.v2-single { grid-template-columns: 1fr; }
.v2-root .v2-charts-row.v2-seg-perf-row { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) {
  .v2-root .v2-charts-row.v2-seg-perf-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .v2-root .v2-charts-row { grid-template-columns: 1fr; }
}
.v2-root .v2-chart-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--v2-text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-root .v2-chart-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--v2-accent);
  border-radius: 2px;
}
.v2-root .v2-chart-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  color: var(--v2-dim);
  margin-bottom: 10px;
  padding-left: 13px;
}

/* ── Ícone no nome da página (ex: IG no header) ─────────────────────────── */
.v2-root .v2-header-page-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Badges coloridos (tipos de conteúdo + estados de boost) ────────────── */
.v2-root .v2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Tipos */
.v2-root .v2-badge.v2-badge-reels {
  background: rgba(167,139,250,.12);
  color: #a78bfa;
  border-color: rgba(167,139,250,.3);
}
.v2-root .v2-badge.v2-badge-carrossel {
  background: rgba(0,155,249,.12);
  color: var(--v2-accent);
  border-color: rgba(0,155,249,.3);
}
.v2-root .v2-badge.v2-badge-imagem {
  background: rgba(0,229,160,.12);
  color: var(--v2-ok);
  border-color: rgba(0,229,160,.3);
}
/* Boost status */
.v2-root .v2-badge.v2-badge-ativo {
  background: rgba(255,215,0,.14);
  color: var(--v2-warn);
  border-color: rgba(255,215,0,.35);
}
.v2-root .v2-badge.v2-badge-historico {
  background: rgba(122,128,144,.1);
  color: var(--v2-dim);
  border-color: rgba(122,128,144,.25);
}
.v2-root .v2-badge.v2-badge-organico {
  background: transparent;
  color: var(--v2-muted);
  border-color: var(--v2-border);
}

/* ── Caption truncada em tabela ─────────────────────────────────────────── */
.v2-root .v2-caption {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: var(--v2-dim);
  line-height: 1.45;
  max-width: 380px;
  display: block;
}

/* ── Preview button (ícone IG em célula de tabela) ──────────────────────── */
.v2-root .v2-preview-btn {
  background: transparent;
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.v2-root .v2-preview-btn:hover {
  border-color: var(--v2-accent);
  transform: translateY(-1px);
}
.v2-root .v2-preview-btn img { width: 18px; height: 18px; }

/* ── Filtro: expert fixo (quando só um expert disponível) ───────────────── */
.v2-root .v2-filter-fixed {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--v2-text);
  font-size: .85rem;
}

/* ── Modal (overlay + card + iframe) ────────────────────────────────────── */
.v2-root .v2-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.v2-root.v2-light .v2-modal-overlay {
  background: rgba(10,12,16,.55);
}
.v2-root .v2-modal {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.v2-root .v2-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--v2-border);
  background: var(--v2-bg);
  color: var(--v2-dim);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  z-index: 2;
}
.v2-root .v2-modal-close:hover {
  border-color: var(--v2-alert);
  color: var(--v2-alert);
}
.v2-root .v2-modal-iframe {
  width: 100%;
  height: 640px;
  border: none;
  border-radius: 10px;
  margin-top: 20px;
  background: var(--v2-bg);
}

/* ── DatePickerRange (Dash 2.x) — campo no header dos filtros ───────────── */
html body .v2-root .dash-datepicker-input-wrapper {
  background: var(--v2-bg) !important;
  background-color: var(--v2-bg) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 10px !important;
  height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--v2-text) !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s;
}
html body .v2-root .dash-datepicker-input-wrapper:hover,
html body .v2-root .dash-datepicker-input-wrapper[data-state="open"] {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,155,249,.12) !important;
}
html body .v2-root .dash-datepicker-input,
html body .v2-root .dash-datepicker-start-date,
html body .v2-root .dash-datepicker-end-date {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  outline: none !important;
  padding: 0 2px !important;
}
html body .v2-root .dash-datepicker-range-arrow,
html body .v2-root .dash-datepicker-caret-icon {
  color: var(--v2-dim) !important;
  flex-shrink: 0;
}
html body .v2-root .dash-datepicker-range-arrow path,
html body .v2-root .dash-datepicker-caret-icon path {
  fill: currentColor !important;
}
/* Wrappers externos que o Dash coloca ao redor (div, span etc) */
html body .v2-root .dash-datepicker,
html body .v2-root [class*="dash-datepicker"]:not(.dash-datepicker-content):not([class*="calendar"]):not([class*="month"]):not([class*="day"]):not([class*="stepper"]):not([class*="input-element"]) {
  background: transparent !important;
  background-color: transparent !important;
}
/* Garante o wrapper do trigger (o "pill" visível) ficar com var(--v2-bg) */
html body .v2-root div.dash-datepicker-input-wrapper,
html body .v2-root button.dash-datepicker-input-wrapper {
  background: var(--v2-bg) !important;
  background-color: var(--v2-bg) !important;
}

/* Calendar popup (Dash DatePicker) */
body.v2-active .DayPicker,
body.v2-active .DayPicker__withBorder,
body.v2-active .CalendarMonth,
body.v2-active .CalendarMonthGrid {
  background: var(--v2-surface) !important;
  color: var(--v2-text) !important;
}
body.v2-active .DayPicker {
  border: 1px solid var(--v2-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
}
body.v2-active .CalendarMonth_caption,
body.v2-active .CalendarMonth_caption strong {
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
body.v2-active .DayPicker_weekHeader,
body.v2-active .DayPicker_weekHeader_li {
  color: var(--v2-dim) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .6rem !important;
  text-transform: uppercase !important;
}
body.v2-active .CalendarDay,
body.v2-active .CalendarDay__default {
  background: var(--v2-surface) !important;
  color: var(--v2-text) !important;
  border: 1px solid var(--v2-border) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
}
body.v2-active .CalendarDay__default:hover {
  background: rgba(0,155,249,.12) !important;
  color: var(--v2-accent) !important;
  border-color: var(--v2-accent) !important;
}
body.v2-active .CalendarDay__selected,
body.v2-active .CalendarDay__selected_span,
body.v2-active .CalendarDay__selected:active,
body.v2-active .CalendarDay__selected:hover {
  background: var(--v2-accent) !important;
  color: #fff !important;
  border-color: var(--v2-accent) !important;
}
body.v2-active .CalendarDay__hovered_span,
body.v2-active .CalendarDay__hovered_span:hover {
  background: rgba(0,155,249,.14) !important;
  color: var(--v2-accent) !important;
  border-color: rgba(0,155,249,.35) !important;
}
body.v2-active .CalendarDay__blocked_out_of_range,
body.v2-active .CalendarDay__blocked_out_of_range:hover {
  color: var(--v2-muted) !important;
  background: var(--v2-surface) !important;
}
body.v2-active .DayPickerNavigation_button,
body.v2-active .DayPickerNavigation_button__default {
  background: var(--v2-bg) !important;
  border: 1px solid var(--v2-border) !important;
  color: var(--v2-dim) !important;
}
body.v2-active .DayPickerNavigation_svg__horizontal {
  fill: var(--v2-dim) !important;
}
/* Inputs/selects de navegação de ano/mês dentro do calendário */
body.v2-active .DayPicker input,
body.v2-active .DayPicker input[type="text"],
body.v2-active .DayPicker input[type="number"],
body.v2-active .CalendarMonth_caption input,
body.v2-active .CalendarMonth_caption select,
body.v2-active .DayPicker select {
  background: var(--v2-bg) !important;
  background-color: var(--v2-bg) !important;
  color: var(--v2-text) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
  outline: none !important;
  -moz-appearance: textfield;
}
body.v2-active .DayPicker input::-webkit-outer-spin-button,
body.v2-active .DayPicker input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
body.v2-active .DayPicker select option,
body.v2-active .CalendarMonth_caption select option {
  background: var(--v2-surface) !important;
  color: var(--v2-text) !important;
}
body.v2-active .CalendarMonth_caption {
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  padding-top: 18px !important;
}

/* =============================================================================
   Dash 2.x DatePicker (classes dash-datepicker-*) — portaled no <body>
   Estrutura: .dash-datepicker-content > .dash-datepicker-calendar-wrapper
              > .dash-datepicker-controls (nav + month dropdown + year spinner)
              > .dash-datepicker-calendar-container > table.dash-datepicker-calendar
   ============================================================================= */
body.v2-active .dash-datepicker-content {
  /* Redefine vars localmente (Radix portal às vezes quebra herança) */
  --v2-bg:      #0a0c10;
  --v2-surface: #111318;
  --v2-border:  #1e2028;
  --v2-text:    #e8eaf0;
  --v2-dim:     #7a8090;
  --v2-accent:  #009bf9;
  --v2-muted:   #6b7888;
  background: var(--v2-surface) !important;
  background-color: var(--v2-surface) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 10px !important;
  color: var(--v2-text) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
  padding: 14px !important;
  font-family: 'Inter', sans-serif !important;
}
body.v2-active.v2-light-active .dash-datepicker-content {
  --v2-bg:      #f2f4f8;
  --v2-surface: #ffffff;
  --v2-border:  #dde1ea;
  --v2-text:    #141720;
  --v2-dim:     #6b7280;
  --v2-accent:  #2563eb;
  --v2-muted:   #8a95a3;
  box-shadow: 0 14px 36px rgba(20,23,32,.12) !important;
}

/* Controles de topo (prev + mês + ano + next) */
body.v2-active .dash-datepicker-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  background: transparent !important;
}
body.v2-active .dash-datepicker-month-nav {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--v2-border) !important;
  color: var(--v2-text) !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: all .15s !important;
}
body.v2-active .dash-datepicker-month-nav:hover {
  border-color: var(--v2-accent) !important;
  color: var(--v2-accent) !important;
}
body.v2-active .dash-datepicker-month-nav svg,
body.v2-active .dash-datepicker-month-nav svg path {
  fill: #e8eaf0 !important;
  stroke: #e8eaf0 !important;
  color: #e8eaf0 !important;
}
body.v2-active.v2-light-active .dash-datepicker-month-nav,
body.v2-active.v2-light-active .dash-datepicker-month-nav svg,
body.v2-active.v2-light-active .dash-datepicker-month-nav svg path {
  fill: #141720 !important;
  stroke: #141720 !important;
  color: #141720 !important;
}
body.v2-active .dash-datepicker-month-nav:hover,
body.v2-active .dash-datepicker-month-nav:hover svg,
body.v2-active .dash-datepicker-month-nav:hover svg path {
  fill: #009bf9 !important;
  stroke: #009bf9 !important;
  color: #009bf9 !important;
}
body.v2-active.v2-light-active .dash-datepicker-month-nav:hover,
body.v2-active.v2-light-active .dash-datepicker-month-nav:hover svg,
body.v2-active.v2-light-active .dash-datepicker-month-nav:hover svg path {
  fill: #2563eb !important;
  stroke: #2563eb !important;
  color: #2563eb !important;
}
body.v2-active .dash-datepicker-month-sizer {
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Grid da tabela do calendário */
body.v2-active .dash-datepicker-calendar-container {
  display: flex !important;
  gap: 20px !important;
  background: transparent !important;
}
body.v2-active .dash-datepicker-calendar {
  border-collapse: separate !important;
  border-spacing: 2px !important;
  background: transparent !important;
}
body.v2-active .dash-datepicker-calendar-month-header {
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  padding: 4px 0 10px !important;
  text-align: center !important;
  background: transparent !important;
}
body.v2-active .dash-datepicker-calendar thead th:not(.dash-datepicker-calendar-month-header),
body.v2-active .dash-datepicker-calendar thead th:not(.dash-datepicker-calendar-month-header) span {
  color: #7a8090 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  padding: 4px 0 8px !important;
  background: transparent !important;
}
body.v2-active.v2-light-active .dash-datepicker-calendar thead th:not(.dash-datepicker-calendar-month-header),
body.v2-active.v2-light-active .dash-datepicker-calendar thead th:not(.dash-datepicker-calendar-month-header) span {
  color: #4b5563 !important;
}
body.v2-active .dash-datepicker-calendar-week {
  background: transparent !important;
}
body.v2-active .dash-datepicker-calendar td,
body.v2-active .dash-datepicker-calendar th {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Células de dia (clicáveis) */
body.v2-active .dash-datepicker-calendar-date-inside {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--v2-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 !important;
  width: 34px !important;
  height: 34px !important;
  transition: background .12s, color .12s !important;
}
body.v2-active .dash-datepicker-calendar-date-inside span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  color: inherit !important;
}
body.v2-active .dash-datepicker-calendar-date-inside:hover {
  background: rgba(0,155,249,.14) !important;
  background-color: rgba(0,155,249,.14) !important;
  color: var(--v2-accent) !important;
}
body.v2-active.v2-light-active .dash-datepicker-calendar-date-inside:hover {
  background: rgba(37,99,235,.12) !important;
  background-color: rgba(37,99,235,.12) !important;
}

/* Células dentro do range selecionado */
body.v2-active .dash-datepicker-calendar-date-highlighted {
  background: rgba(0,155,249,.14) !important;
  background-color: rgba(0,155,249,.14) !important;
  color: var(--v2-accent) !important;
}
body.v2-active.v2-light-active .dash-datepicker-calendar-date-highlighted {
  background: rgba(37,99,235,.10) !important;
  background-color: rgba(37,99,235,.10) !important;
}

/* Data selecionada (start + end do range) */
body.v2-active .dash-datepicker-calendar-date-selected {
  background: var(--v2-accent) !important;
  background-color: var(--v2-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body.v2-active .dash-datepicker-calendar-date-selected:hover {
  background: var(--v2-accent) !important;
  background-color: var(--v2-accent) !important;
  color: #fff !important;
  filter: brightness(1.08);
}

/* Células padding (fora do mês) */
body.v2-active .dash-datepicker-calendar-padding {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--v2-muted) !important;
  cursor: default !important;
}

/* ── Input Number (spinner do ano, usado no calendário) ─────────────────── */
body.v2-active .dash-input-container {
  background: var(--v2-bg) !important;
  background-color: var(--v2-bg) !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  height: 32px !important;
  padding: 0 !important;
}
body.v2-active .dash-input-element {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--v2-text) !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  outline: none !important;
  padding: 0 6px !important;
  width: 54px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  height: 100% !important;
}
body.v2-active .dash-input-element::-webkit-outer-spin-button,
body.v2-active .dash-input-element::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
body.v2-active .dash-input-stepper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--v2-dim) !important;
  cursor: pointer !important;
  padding: 0 10px !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: all .15s !important;
}
body.v2-active .dash-stepper-decrement {
  border-right: 1px solid var(--v2-border) !important;
  order: -1 !important;
}
body.v2-active .dash-stepper-increment {
  border-left: 1px solid var(--v2-border) !important;
}
body.v2-active .dash-input-stepper:hover {
  color: var(--v2-accent) !important;
  background: rgba(0,155,249,.10) !important;
}


/* ── Pill group (botões independentes de toggle em gráficos) ─────────────
   Padrão: cada botão tem sua própria borda. Ativo = fundo accent sólido. */
.v2-root .v2-pill-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.v2-root .v2-pill-btn {
  padding: 8px 16px;
  border: 1px solid var(--v2-border);
  background: transparent;
  color: var(--v2-dim);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: all .15s;
  white-space: nowrap;
}
.v2-root .v2-pill-btn:hover {
  color: var(--v2-accent);
  border-color: var(--v2-accent);
}
.v2-root .v2-pill-btn.v2-pill-active {
  background: var(--v2-accent);
  color: #fff;
  border-color: var(--v2-accent);
}
.v2-root .v2-pill-btn.v2-pill-active:hover { color: #fff; }

/* ── Tab bar (abas dentro da mesma página) ──────────────────────────────── */
.v2-root .v2-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.v2-root .v2-tab-btn {
  padding: 12px 18px;
  border: none;
  background: transparent;
  color: var(--v2-dim);
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.v2-root .v2-tab-btn:hover { color: var(--v2-text); }
.v2-root .v2-tab-btn.v2-tab-active {
  color: var(--v2-accent);
  border-bottom-color: var(--v2-accent);
}
.v2-root .v2-tab-btn.v2-tab-active:hover { color: var(--v2-accent); }
.v2-root .v2-tab-btn.v2-tab-locked {
  color: var(--v2-muted);
  cursor: not-allowed;
}
.v2-root .v2-tab-btn.v2-tab-locked:hover { color: var(--v2-muted); }
/* Fade só ícones e cadeado — NÃO aplicar opacity no botão (quebra tooltip) */
.v2-root .v2-tab-btn.v2-tab-locked .v2-tab-icon {
  opacity: .55;
  filter: grayscale(1);
}
.v2-root .v2-tab-btn.v2-tab-locked .v2-tab-lock {
  opacity: .8;
}

/* Tooltip custom em aba bloqueada — texto hardcoded, elevado acima de tudo */
.v2-root .v2-tab-btn.v2-tab-locked { position: relative; }
.v2-root .v2-tab-btn.v2-tab-locked:hover {
  z-index: 10000;  /* eleva o button (stacking context local) acima dos cards */
}
.v2-root .v2-tab-btn.v2-tab-locked::after {
  content: 'Projeto sem os dados dessa visualização';
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--v2-surface);
  background-color: var(--v2-surface);
  color: var(--v2-text);
  border: 1px solid var(--v2-border);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s, visibility .12s;
  z-index: 10000;
}
.v2-root.v2-light .v2-tab-btn.v2-tab-locked::after {
  box-shadow: 0 10px 28px rgba(20,23,32,.22);
}
.v2-root .v2-tab-btn.v2-tab-locked:hover::after {
  opacity: 1;
  visibility: visible;
}
.v2-root .v2-tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.v2-root .v2-tab-lock {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: 2px;
  color: currentColor;
  display: none;
}
.v2-root .v2-tab-btn.v2-tab-locked .v2-tab-lock {
  display: inline-flex;
}
/* Painéis de conteúdo por aba */
.v2-root .v2-tab-panel { display: none; }
.v2-root .v2-tab-panel.v2-tab-panel-active { display: block; }

/* Vars do grid background (duplicadas no body pra overlays em portal) */
body.v2-active {
  --v2-grid-line: rgba(0,155,249,.03);
}
body.v2-active.v2-light-active {
  --v2-grid-line: rgba(37,99,235,.04);
}

/* Loading overlay — começa abaixo das abas, cobre o conteúdo com grid v2 */
.v2-root .v2-tab-loading { position: relative; min-height: 60vh; }
.v2-root .v2-tab-loading ._dash-loading-callback,
.v2-root .v2-tab-loading > .dash-spinner-container,
.v2-root .v2-tab-loading > ._dash-loading {
  position: fixed !important;
  top: 260px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--v2-bg) !important;
  background-image:
    linear-gradient(var(--v2-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--v2-grid-line) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  z-index: 999 !important;
}
/* Viewport pequeno — ajusta top para caber abaixo das abas */
@media (max-height: 700px) {
  .v2-root .v2-tab-loading ._dash-loading-callback,
  .v2-root .v2-tab-loading > .dash-spinner-container,
  .v2-root .v2-tab-loading > ._dash-loading {
    top: 220px !important;
  }
}

/* ── Chart header (título + pill group alinhados) ───────────────────────── */
.v2-root .v2-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.v2-root .v2-chart-header .v2-card-title { margin-bottom: 0; }

/* ── Barra de filtro ativo (chip de seleção de post/dia) ────────────────── */
.v2-root .v2-filter-active-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(0,155,249,.08);
  border: 1px solid rgba(0,155,249,.25);
  border-radius: 10px;
  margin-bottom: 16px;
}
.v2-root.v2-light .v2-filter-active-bar {
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.25);
}
.v2-root .v2-filter-active-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--v2-dim);
  font-weight: 700;
}
.v2-root .v2-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--v2-accent);
  color: #fff;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
}
.v2-root .v2-filter-active-hint {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  color: var(--v2-dim);
  font-style: italic;
}

/* ── Célula clicável (posts na tabela de seguidores) ────────────────────── */
.v2-root .v2-td-clickable {
  cursor: pointer;
  transition: color .12s;
}
.v2-root .v2-td-clickable:hover { color: var(--v2-accent); }
.v2-root .v2-td-clickable.v2-td-selected {
  color: var(--v2-accent);
  font-weight: 700;
}

/* ──────────────────────────────────────────────────────────────────────────
   FINANCEIRO — KPI delta (variação vs período anterior) e placeholder de aba
   ────────────────────────────────────────────────────────────────────────── */

.v2-root .v2-kpi-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .3px;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.v2-root .v2-kpi-delta-up {
  color: var(--v2-ok);
  background: rgba(0, 229, 160, 0.08);
  border-color: rgba(0, 229, 160, 0.22);
}
.v2-root .v2-kpi-delta-down {
  color: var(--v2-alert);
  background: rgba(255, 77, 109, 0.08);
  border-color: rgba(255, 77, 109, 0.22);
}
.v2-root .v2-kpi-delta-flat {
  color: var(--v2-dim);
  background: rgba(122, 128, 144, 0.08);
  border-color: rgba(122, 128, 144, 0.22);
}
.v2-root .v2-kpi-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: var(--v2-dim);
  margin-top: 4px;
  letter-spacing: .3px;
}

.v2-root .v2-fin-placeholder {
  position: relative;
  border-top-color: var(--v2-warn);
  padding: 28px 32px 32px;
}
.v2-root .v2-fin-placeholder-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-warn);
  letter-spacing: .8px;
  margin-top: -4px;
  margin-bottom: 16px;
  text-transform: lowercase;
}
.v2-root .v2-fin-placeholder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-root .v2-fin-placeholder-list li {
  position: relative;
  padding: 10px 14px 10px 32px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--v2-text);
}
.v2-root .v2-fin-placeholder-list li::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-warn);
  opacity: .7;
}

/* ── Breakdown por plataforma (barra empilhada normalizada + legenda) ── */
.v2-root .v2-fin-breakdown {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.v2-root .v2-fin-breakdown-chart {
  width: 100%;
  height: 90px;
}
.v2-root .v2-fin-breakdown-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-root .v2-fin-legend-item {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 7px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  font-size: .85rem;
  color: var(--v2-text);
}
.v2-root .v2-fin-legend-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
}
.v2-root .v2-fin-legend-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .82rem;
  color: var(--v2-text);
}
.v2-root .v2-fin-legend-share {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-dim);
  min-width: 56px;
  text-align: right;
}
.v2-root .v2-fin-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px dashed var(--v2-border);
  margin-top: 4px;
}
.v2-root .v2-fin-legend-total-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .98rem;
  color: var(--v2-text);
  letter-spacing: .3px;
}
.v2-root .v2-fin-breakdown-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--v2-dim);
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
}

/* ── Tabela Faturamento — drill-down de transações ─────────────────────── */
.v2-root .v2-table thead th.v2-td-right,
.v2-root .v2-table tbody td.v2-td-right { text-align: right; }

.v2-root .v2-fin-tabela {
  font-size: .85rem;
}
.v2-root .v2-fin-tabela td {
  vertical-align: middle;
  white-space: nowrap;
}
.v2-root .v2-fin-tabela .v2-fin-tabela-cell-prod {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-root .v2-fin-tabela .v2-fin-tabela-cell-buyer {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--v2-text);
}
.v2-root .v2-fin-tabela-cell-dim {
  color: var(--v2-dim);
  font-size: .8rem;
}
.v2-root .v2-fin-tabela-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--v2-dim);
  letter-spacing: .4px;
}
.v2-root .v2-fin-tabela-empty {
  text-align: center;
  padding: 36px 12px;
  color: var(--v2-dim);
  font-size: .9rem;
  font-family: 'Inter', sans-serif;
}
.v2-root .v2-fin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--v2-border);
}
.v2-root .v2-fin-page-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--v2-dim);
  letter-spacing: .3px;
  min-width: 130px;
  text-align: center;
}

/* Aviso/disclaimer no card (limitações de fonte de dados, cobertura parcial) */
.v2-root .v2-fin-table-note {
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: rgba(79, 138, 255, 0.08);
  border: 1px solid rgba(79, 138, 255, 0.25);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--v2-dim);
}
.v2-root .v2-fin-table-note-tag {
  font-weight: 700;
  color: var(--v2-accent);
}

/* Geografia — layout 2 colunas (mapa à esquerda, países+moedas à direita) */
.v2-root .v2-fin-geo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.v2-root .v2-fin-geo-col-mapa {
  display: flex;
  flex-direction: column;
}
.v2-root .v2-fin-geo-col-direita {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Altura máxima alinhada com o card do mapa (480 chart + header + note) */
  max-height: 660px;
}
/* Cards direita — cada um ocupa metade da altura com scroll interno */
.v2-root .v2-fin-geo-col-direita .v2-fin-geo-card-scrollable {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.v2-root .v2-fin-geo-scroll-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
/* Responsivo */
@media (max-width: 1100px) {
  .v2-root .v2-fin-geo-row { grid-template-columns: 1fr; }
  .v2-root .v2-fin-geo-col-direita { max-height: none; }
  .v2-root .v2-fin-geo-col-direita .v2-fin-geo-card-scrollable {
    overflow: visible;
  }
  .v2-root .v2-fin-geo-scroll-body { overflow-y: visible; }
}
/* Filtro expande no fluxo horizontal (ex: campo de busca em Transações) */
.v2-root .v2-fin-filter-grow {
  flex: 1 1 260px;
  min-width: 200px;
}

/* Aba Transações — container de filtros (pills + dropdown + busca + CSV) */
.v2-root .v2-fin-ftx-filtros {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
}
.v2-root .v2-fin-ftx-filters-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
/* Tabela Transações — scroll horizontal quando tem muitas colunas */
.v2-root .v2-fin-ftx-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.v2-root .v2-fin-ftx-scroll .v2-table {
  min-width: 1400px;  /* força scroll quando a viewport é menor */
}

/* Sigla ISO em mono compacto na tabela de países */
.v2-root .v2-fin-geo-iso {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .72rem;
  color: var(--v2-dim);
  letter-spacing: .5px;
  width: 40px;
}


/* ── Inadimplência: card sumário (Fluxo de Caixa) ──────────────────────── */
.v2-root .v2-fin-inad-summary-row {
  display: flex;
  gap: 14px;
  margin: 12px 0 18px;
}
.v2-root .v2-fin-inad-summary-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  border-radius: 8px;
}
.v2-root .v2-fin-inad-empty {
  padding: 14px;
  color: var(--v2-dim);
  font-size: .9rem;
  text-align: center;
}

/* ── ROAS color hint na tabela de campanhas ────────────────────────────── */
.v2-root .v2-fin-roas-ok  { color: var(--v2-ok);    font-weight: 700; }
.v2-root .v2-fin-roas-bad { color: var(--v2-alert); font-weight: 700; }

/* ── Badges de plataforma (Hotmart/Guru/TMB/ASAAS/Meta/Google) ─────────── */
.v2-root .v2-badge-plat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.v2-root .v2-badge-plat-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v2-root .v2-badge-plat-hotmart {
  background: rgba(239, 78, 35, 0.14);
  border-color:  rgba(239, 78, 35, 0.35);
  color:         #F06641;
}
.v2-root .v2-badge-plat-guru {
  background: rgba(124, 58, 237, 0.14);
  border-color:  rgba(124, 58, 237, 0.35);
  color:         #A78BFA;
}
.v2-root .v2-badge-plat-tmb {
  background: rgba(245, 158, 11, 0.14);
  border-color:  rgba(245, 158, 11, 0.35);
  color:         #F5A623;
}
.v2-root .v2-badge-plat-asaas {
  background: rgba(30, 59, 138, 0.18);
  border-color:  rgba(30, 59, 138, 0.45);
  color:         #009bf9;
}
.v2-root .v2-badge-plat-meta {
  background: rgba(24, 119, 242, 0.14);
  border-color:  rgba(24, 119, 242, 0.35);
  color:         #009bf9;
}
.v2-root .v2-badge-plat-google {
  background: rgba(234, 67, 53, 0.14);
  border-color:  rgba(234, 67, 53, 0.35);
  color:         #F25B50;
}

/* Tema claro: texto fica mais escuro pra contraste */
.v2-root.v2-light .v2-badge-plat-hotmart { color: #C63A1A; }
.v2-root.v2-light .v2-badge-plat-guru    { color: #6D28D9; }
.v2-root.v2-light .v2-badge-plat-tmb     { color: #B45309; }
.v2-root.v2-light .v2-badge-plat-asaas   { color: #1E3B8A; }
.v2-root.v2-light .v2-badge-plat-meta    { color: #1366D6; }
.v2-root.v2-light .v2-badge-plat-google  { color: #C4302B; }

/* ── Pills em linha pra filtros (Plataforma, Status) ──────────────────── */
.v2-root .v2-fin-pill-filters {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.v2-root .v2-fin-pill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.v2-root .v2-fin-pill-row > .v2-label {
  min-width: 88px;
  margin: 0;
}
.v2-root .v2-fin-pill-row .v2-pill-group {
  flex-wrap: wrap;
}

/* ── Pills compactos (usados no header da tabela de transações) ──────── */
.v2-root .v2-pill-btn-sm {
  padding: 4px 10px;
  font-size: .66rem;
  letter-spacing: .2px;
  line-height: 1.2;
}
.v2-root .v2-pill-group-sm {
  gap: 4px;
  flex-wrap: wrap;
}
/* Pill escondido quando a plataforma/status não tem dados no período */
.v2-root .v2-pill-btn.v2-pill-hidden { display: none; }

/* ── Header da tabela de transações — título à esquerda, pills à direita */
.v2-root .v2-fin-tabela-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.v2-root .v2-fin-tabela-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.v2-root .v2-fin-tabela-header-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}