/* =============================================================================
   CHAMPION CENTRAL — app.css
   -----------------------------------------------------------------------------
   Folha de estilo única do hub. Organização:

     1. Tokens (cores, tipografia, raios, espaçamentos)  → mude a identidade aqui
     2. Reset e base
     3. Layout do app (sidebar + conteúdo + barra inferior no celular)
     4. Sidebar (marca, busca, navegação, integrações)
     5. Cabeçalho da página e controles segmentados (empresa / período)
     6. Componentes genéricos (card, badge, botão, link de ação, tabela)
     7. KPIs
     8. Gráfico de barras empilhadas por canal
     9. Alertas ("Precisa de atenção")
    10. Cards de canal
    11. Módulos
    12. Tela de canal (abas, cascata, saúde, promoções)
    13. Página de arquitetura (mapa 360)
    14. Estados (carregando, erro, vazio)
    15. Responsivo (tablet e celular)
    16. Acessibilidade (foco, movimento reduzido, utilitários)

   Convenção de nomes: BEM simplificado → .bloco, .bloco__parte, .bloco--variação
   Estados: classes .is-* (ex.: .is-active, .is-loading, .menu-open no <body>)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENS
   Toda cor, fonte e raio do sistema sai daqui. Para aplicar as cores oficiais
   da Champion, troque apenas os valores abaixo.
   ----------------------------------------------------------------------------- */
:root {
  /* Base escura (sidebar e card de destaque) */
  --ink:          #0E1726;
  --ink-2:        #172235;   /* superfície dentro da sidebar */
  --ink-line:     #243149;   /* bordas dentro da sidebar */
  --ink-text:     #AEB8C8;   /* texto secundário sobre fundo escuro */
  --ink-muted:    #8E99AB;   /* texto terciário sobre fundo escuro */
  --ink-label:    #6E7A8E;   /* rótulos de seção da navegação */

  /* Base clara (área de conteúdo) */
  --bg:           #F3F4F6;   /* fundo da página */
  --surface:      #FFFFFF;   /* cards */
  --surface-2:    #F7F8FA;   /* áreas internas, hover de linha */
  --line:         #E1E4EA;   /* bordas de card */
  --line-soft:    #EEF0F4;   /* divisórias internas e grade do gráfico */
  --line-strong:  #C9CED8;   /* linha de base do gráfico, bordas tracejadas */

  /* Texto (todos passam 4.5:1 sobre branco) */
  --text:         #0E1726;
  --text-2:       #3A4352;
  --muted:        #5B6474;

  /* Marca e ação */
  --brand:        #F2A516;   /* âmbar Champion: item ativo, meta, logo */
  --brand-soft:   #FFF1D6;
  --brand-text:   #7A4B00;   /* texto sobre --brand-soft */
  --link:         #1F5FBF;
  --link-hover:   #163F7F;
  --focus:        #1F5FBF;

  /* Status — reservados para estado, nunca usados como cor de série.
     Sempre acompanhados de ícone + rótulo (nunca só a cor). */
  --ok:           #16794A;  --ok-bg:   #EAF7F0;
  --warn:         #8A5300;  --warn-bg: #FFF4DE;
  --crit:         #B42318;  --crit-bg: #FDECEC;
  --info:         #1F5FBF;  --info-bg: #EAF1FC;

  /* Cor fixa por canal. A cor segue o canal, nunca a posição na lista:
     se um filtro esconder um canal, os outros mantêm a cor.
     Paleta validada para daltonismo (ordem adjacente). */
  --ch-ml:        #2a78d6;   /* Mercado Livre */
  --ch-sh:        #eb6834;   /* Shopee */
  --ch-tt:        #1baf7a;   /* TikTok Shop */
  --ch-si:        #eda100;   /* Site */
  --ch-lf:        #e87ba4;   /* Loja Física */
  --ch-neutro:    #9AA3B2;   /* deduções na cascata */

  /* Tipografia */
  --font-display: 'Sora', system-ui, sans-serif;     /* títulos e números grandes */
  --font-body:    'Manrope', system-ui, sans-serif;  /* todo o resto */

  /* Raios */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;

  /* Medidas de layout */
  --sidebar-w:  248px;
  --gutter:     32px;   /* respiro lateral do conteúdo */
  --gap:        14px;   /* espaço entre cards */
  --bottom-nav: 68px;   /* altura da barra inferior no celular */
}


/* -----------------------------------------------------------------------------
   2. RESET E BASE
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden sempre vence, mesmo sobre display:flex/grid inline */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;   /* números alinhados em colunas */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
button, input { font: inherit; color: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; }


/* -----------------------------------------------------------------------------
   3. LAYOUT DO APP
   Desktop: grid de 2 colunas (sidebar fixa + conteúdo).
   Tablet/celular: a sidebar vira gaveta (ver seção 15).
   ----------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.main {
  min-width: 0;
  padding: 26px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Contêiner com largura máxima para telas muito largas */
.main__inner {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Fundo escuro atrás da gaveta (só aparece no tablet/celular) */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(14, 23, 38, 0.45);
  z-index: 40;
}

/* Barra inferior de navegação: escondida no desktop, aparece no celular */
.bottom-nav { display: none; }


/* -----------------------------------------------------------------------------
   4. SIDEBAR
   ----------------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--ink);
  color: #FFFFFF;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-line) transparent;
}

/* Marca */
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.brand__logo {
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: var(--brand);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.brand__name { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.brand__sub  { display: block; font-size: 12px; color: var(--ink-muted); }

/* Busca global (atalho ⌘K / Ctrl+K em core.js) */
.search {
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 10px;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 9px;
}
.search:focus-within { border-color: var(--brand); }
.search svg { flex: none; color: var(--ink-muted); }
.search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #FFFFFF; font-size: 13px;
}
.search input::placeholder { color: var(--ink-muted); }
.search kbd {
  font-family: inherit; font-size: 11px; color: var(--ink-muted);
  border: 1px solid #33415B; border-radius: 5px; padding: 1px 5px;
}

/* Navegação */
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__section {
  padding: 16px 10px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-label);
}
.nav__link {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--ink-text);
  text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.nav__link svg { flex: none; }
.nav__link:hover { background: var(--ink-2); color: #FFFFFF; }
.nav__link[aria-current="page"] { background: var(--brand); color: var(--ink); }
.nav__link--sub { min-height: 32px; padding-left: 38px; font-size: 13px; font-weight: 500; }
/* Bolinha com a cor do canal ao lado do submenu */
.nav__dot { width: 8px; height: 8px; border-radius: 2px; margin-left: -18px; margin-right: 2px; }

/* Caixa de status das integrações (rodapé da sidebar) */
.integrations {
  margin-top: auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: var(--r);
  padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.integrations__head { display: flex; justify-content: space-between; align-items: center; }
.integrations__title { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-text); }
.integrations__head a { font-size: 12px; color: #F2C35B; }
.integration { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #D9DFE8; }
.integration__time { margin-left: auto; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.integration--ok   .integration__icon { color: #4FCB8E; }
.integration--warn .integration__icon { color: #F2B544; }
.integration--warn .integration__time { color: #F2C35B; }
.integration--crit .integration__icon { color: #FF8A80; }
.integration--crit .integration__time { color: #FF8A80; }


/* -----------------------------------------------------------------------------
   5. CABEÇALHO DA PÁGINA E CONTROLES SEGMENTADOS
   ----------------------------------------------------------------------------- */
.page-head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 16px;
}
.page-head__meta  { font-size: 13px; font-weight: 600; color: var(--muted); }
.page-head__title { font-size: 30px; letter-spacing: -0.02em; margin-top: 4px; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Botão hambúrguer (só aparece quando a sidebar vira gaveta) */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  align-items: center; justify-content: center;
  cursor: pointer;
}

/* Controle segmentado: grupo de botões em que só um fica ativo.
   Montado por CC.ui.segmented() em core.js. */
.seg {
  display: flex; gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.seg__btn {
  min-height: 36px; padding: 0 14px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.seg__btn:hover { background: var(--surface-2); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }

/* Selo "Dados ilustrativos" — remover quando a API real estiver ligada */
.demo-flag {
  font-size: 12px; font-weight: 700;
  color: var(--brand-text); background: var(--brand-soft);
  border-radius: 999px; padding: 6px 10px;
}


/* -----------------------------------------------------------------------------
   6. COMPONENTES GENÉRICOS
   ----------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.card__title { font-size: 18px; }
.card__title--sm { font-size: 16px; }
.card__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.card__note { font-size: 13px; color: var(--muted); }

/* Link de ação ("Abrir →", "Ver todos →") */
.act {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--link); text-decoration: none;
}
.act:hover { color: var(--link-hover); text-decoration: underline; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 700; text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.btn--dark:hover { background: #1B2638; color: #FFFFFF; }

/* Selo de status (Bom / Atenção / Crítico) */
.badge {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 7px;
  white-space: nowrap;
}
.badge--ok   { color: var(--ok);   background: var(--ok-bg); }
.badge--warn { color: var(--warn); background: var(--warn-bg); }
.badge--crit { color: var(--crit); background: var(--crit-bg); }
.badge--info { color: var(--info); background: var(--info-bg); }
.badge--off  { color: var(--muted); background: #F1F2F5; }

/* Quadradinho com a cor do canal (legendas, tabelas) */
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Variação positiva / negativa (sempre com sinal + ou −, não só cor) */
.up   { color: var(--ok); }
.down { color: var(--crit); }

/* Tabela padrão. Sempre dentro de .tbl-wrap para rolar no celular. */
/* position: relative segura textos .sr-only dentro da área de rolagem
   (sem isso eles "vazam" e criam rolagem lateral na página no celular) */
.tbl-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; font-size: 14px; }
.tbl th {
  padding: 8px 6px;
  text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tbl td { padding: 10px 6px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .strong { font-weight: 700; }
.tbl__name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tbl__stack { display: flex; flex-direction: column; }
.tbl__stack small { font-size: 12px; color: var(--muted); }
.tbl__dots { display: flex; gap: 3px; }


/* -----------------------------------------------------------------------------
   7. KPIs
   O primeiro KPI (faturamento) é o "herói": escuro e ocupa 2 colunas.
   ----------------------------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.kpi__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.kpi__value { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kpi__foot  { font-size: 13px; color: var(--muted); }
.kpi__foot b { color: var(--text); }
.kpi__row   { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* KPI herói */
.kpi--hero { grid-column: span 2; background: var(--ink); border-color: var(--ink); color: #FFFFFF; padding: 20px 22px; gap: 10px; }
.kpi--hero .kpi__label { color: var(--ink-text); }
.kpi--hero .kpi__value { font-size: 40px; line-height: 1; }
.kpi__trend {
  font-size: 12px; font-weight: 800;
  border-radius: 999px; padding: 4px 9px;
  background: #1F3B2E; color: #7BE0AA;
}
.kpi__trend.is-down { background: #3B1F22; color: #FF9C94; }

/* Barra de composição por canal dentro do KPI herói */
.mix { display: flex; height: 8px; gap: 2px; border-radius: 4px; overflow: hidden; }
.mix__part { min-width: 2px; }
.mix-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #C9D1DE; }
.mix-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Barra de progresso da meta */
.progress { height: 8px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand); border-radius: 4px; transition: width .4s ease; }


/* -----------------------------------------------------------------------------
   8. GRÁFICO DE BARRAS EMPILHADAS
   Estrutura (montada por cockpit.js):
     .chart
       .chart__plot      → área do gráfico com linhas de grade e eixo
         .chart__grid    → 3 linhas horizontais + rótulos do eixo Y
         .chart__bars    → um <button.chart__bar> por dia/mês
           .chart__stack → segmentos de cada canal (empilhados de baixo pra cima)
       .chart__labels    → rótulos do eixo X
       .chart__side      → painel lateral: valores do item em foco (funciona
                           como legenda + tooltip, e é anunciado ao leitor de tela)
   ----------------------------------------------------------------------------- */
.chart { display: flex; flex-wrap: wrap; gap: 20px; }
.chart__main { flex: 999 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.chart__plot { position: relative; height: 230px; padding-left: 56px; }
.chart__grid { position: absolute; inset: 0; pointer-events: none; }
.chart__gridline { position: absolute; left: 56px; right: 0; border-top: 1px solid var(--line-soft); }
.chart__gridline--base { border-top-color: var(--line-strong); }
.chart__tick { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--muted); }

.chart__bars { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 6px; }
.chart__bar {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 3px;
  background: transparent;
  border: 0; border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.chart__bar.is-active { background: #EEF3FB; }
.chart__stack {
  display: flex;
  flex-direction: column-reverse;   /* 1º canal da lista fica embaixo */
  gap: 2px;                          /* respiro de 2px entre segmentos */
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  opacity: .82;
  transition: height .35s ease, opacity .15s;
}
.chart__bar.is-active .chart__stack,
.chart__bar:hover .chart__stack { opacity: 1; }
.chart__seg { min-height: 2px; }

.chart__labels { display: flex; gap: 6px; padding-left: 56px; }
.chart__labels span {
  flex: 1 1 0; min-width: 0;
  text-align: center; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}

.chart__side {
  flex: 1 1 210px; min-width: 0;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.chart__side-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.chart__side-total { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.chart__side-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.chart__side-row b { margin-left: auto; color: var(--text); }


/* -----------------------------------------------------------------------------
   9. ALERTAS — "Precisa de atenção"
   Cada alerta vem da API com nível (crit/warn/info), módulo, título e link.
   ----------------------------------------------------------------------------- */
.alerts { display: flex; flex-direction: column; gap: 10px; }
.alert {
  display: flex; gap: 12px;
  padding: 12px;
  border-radius: var(--r);
  text-decoration: none; color: inherit;
}
.alert:hover { color: inherit; filter: brightness(0.98); }
.alert svg { flex: none; margin-top: 2px; }
.alert__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.alert__kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.alert__title  { font-size: 14px; font-weight: 700; }
.alert__detail { font-size: 13px; color: var(--muted); }
.alert--crit { background: var(--crit-bg); } .alert--crit .alert__kicker, .alert--crit svg { color: var(--crit); }
.alert--warn { background: var(--warn-bg); } .alert--warn .alert__kicker, .alert--warn svg { color: var(--warn); }
.alert--info { background: var(--info-bg); } .alert--info .alert__kicker, .alert--info svg { color: var(--info); }


/* -----------------------------------------------------------------------------
   10. CARDS DE CANAL
   ----------------------------------------------------------------------------- */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.ch-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.ch-card:hover { color: inherit; border-color: var(--line-strong); transform: translateY(-2px); }
.ch-card__head { display: flex; align-items: center; gap: 10px; }
.ch-card__logo {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px;
  color: #FFFFFF; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ch-card__name  { font-size: 14px; font-weight: 700; }
.ch-card__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ch-card__value strong { font-family: var(--font-display); font-size: 22px; }
.ch-card__value span { font-size: 12px; font-weight: 800; }
.ch-card__meta  { font-size: 12px; color: var(--muted); }
.ch-card__sync  { border-top: 1px solid var(--line-soft); padding-top: 10px; font-size: 12px; font-weight: 700; }
.ch-card__sync--ok   { color: var(--ok); }
.ch-card__sync--warn { color: var(--warn); }
.ch-card__sync--crit { color: var(--crit); }
.ch-card__sync--off  { color: var(--muted); }

/* Minigráfico (últimos 7 pontos) */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.spark__bar { flex: 1 1 0; border-radius: 3px 3px 0 0; opacity: .45; }
.spark__bar:last-child { opacity: 1; }


/* -----------------------------------------------------------------------------
   11. MÓDULOS
   Atalhos para os sistemas satélite (PromoChampion, Preços, Caixa…).
   ----------------------------------------------------------------------------- */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.module {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
}
a.module:hover { color: inherit; border-color: var(--line-strong); background: var(--surface-2); }
.module__name { font-size: 14px; font-weight: 700; }
.module__summary { font-size: 13px; color: var(--text-2); }
.module__cta { font-size: 12px; font-weight: 700; color: var(--link); }
.module--soon { border-style: dashed; border-color: var(--line-strong); background: #FAFBFC; }
.module--soon .module__cta { color: var(--muted); }


/* -----------------------------------------------------------------------------
   12. TELA DE CANAL
   ----------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.crumbs [aria-current] { color: var(--text); }

.channel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.channel-head__id { display: flex; align-items: center; gap: 14px; }
.channel-head__logo {
  width: 48px; height: 48px; flex: none;
  border-radius: 13px;
  color: #FFFFFF; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.channel-head__title { font-size: 28px; letter-spacing: -0.02em; }
.channel-head__sub { font-size: 13px; color: var(--muted); }

/* Abas da tela de canal */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
  border-bottom: 2px solid transparent;
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.tabs__link:hover { color: var(--text); }
.tabs__link[aria-current="page"] { color: var(--text); border-bottom-color: var(--brand); }

/* Layout principal: conteúdo largo + coluna lateral */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--gap);
  align-items: start;
}
.split__wide { grid-column: span 2; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* Cascata "Do faturamento ao resultado": barras flutuantes horizontais */
.waterfall { display: flex; flex-direction: column; gap: 8px; }
.waterfall__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.waterfall__label { flex: 0 0 180px; font-size: 14px; font-weight: 600; }
.waterfall__track { flex: 1 1 260px; min-width: 0; height: 26px; position: relative; background: var(--surface-2); border-radius: 6px; }
.waterfall__bar { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; min-width: 2px; transition: left .35s ease, width .35s ease; }
.waterfall__value { flex: 0 0 160px; text-align: right; font-size: 14px; font-weight: 700; white-space: nowrap; }
.waterfall__value small { font-size: 14px; font-weight: 600; color: var(--muted); }
.waterfall__row--total .waterfall__label { font-weight: 800; }
.callout { font-size: 13px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }

/* Lista "label ............ valor" usada em Saúde e Ads */
.kv { display: flex; flex-direction: column; gap: 10px; }
.kv__row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.kv__row b { margin-left: auto; color: var(--text); }

/* Três números lado a lado (promoções) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.trio__item { background: var(--surface-2); border-radius: 10px; padding: 10px 4px; }
.trio__item b { font-family: var(--font-display); font-size: 20px; }
.trio__item span { display: block; font-size: 12px; color: var(--muted); }
.trio__item--crit { background: var(--crit-bg); } .trio__item--crit b { color: var(--crit); }
.trio__item--ok   { background: var(--ok-bg); }   .trio__item--ok b   { color: var(--ok); }


/* -----------------------------------------------------------------------------
   13. PÁGINA DE ARQUITETURA (mapa 360)
   ----------------------------------------------------------------------------- */
.map-step { display: flex; flex-direction: column; gap: 10px; }
.map-step__label { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.map-arrow { display: flex; justify-content: center; color: var(--ch-neutro); }

.map-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.map-source { background: var(--surface); border: 1px solid var(--line); border-top-width: 4px; border-radius: var(--r); padding: 12px; }
.map-source b { font-size: 14px; }
.map-source span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.map-source--soon { background: #FAFBFC; border-style: dashed; border-top-style: solid; }

.map-core { display: flex; flex-wrap: wrap; gap: 14px; background: var(--ink); border-radius: 18px; padding: 18px; color: #FFFFFF; }
.map-core__item { flex: 1 1 200px; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: var(--r); padding: 16px; }
.map-core__item b { font-family: var(--font-display); font-size: 16px; }
.map-core__item p { margin-top: 6px; font-size: 13px; color: #C9D1DE; }
.map-core__item--alert { background: #2A2310; border-color: #5C4512; }
.map-core__item--alert b { color: #F2C35B; }
.map-core__item--alert p { color: #E8DCC0; }

.map-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.map-area { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.map-area b { font-family: var(--font-display); font-size: 16px; }
.map-area span { font-size: 14px; color: var(--text-2); }


/* -----------------------------------------------------------------------------
   14. ESTADOS
   ----------------------------------------------------------------------------- */
/* Enquanto a API responde, o conteúdo fica levemente apagado */
.is-loading [data-region] { opacity: .5; transition: opacity .2s; pointer-events: none; }

/* Esqueleto exibido na primeira carga */
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--surface-2) 50%, var(--line-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  min-height: 16px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Faixa de erro com botão "Tentar de novo" */
.error-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--crit-bg); color: var(--crit);
  font-weight: 700;
}
.error-banner[hidden] { display: none; }

.empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }


/* -----------------------------------------------------------------------------
   15. RESPONSIVO
   ----------------------------------------------------------------------------- */

/* Tablet (até 1024px): sidebar vira gaveta que desliza da esquerda */
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(300px, 86vw);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .menu-open .sidebar { transform: none; }
  .menu-open .overlay { display: block; }
  .menu-open { overflow: hidden; }   /* trava a rolagem da página atrás da gaveta */

  .menu-btn { display: inline-flex; }
  :root { --gutter: 24px; }
}

/* Celular (até 640px): KPIs em coluna, barra inferior de navegação */
@media (max-width: 640px) {
  :root { --gutter: 16px; --gap: 12px; }

  .main { padding-top: 18px; padding-bottom: calc(var(--bottom-nav) + 24px); gap: 16px; }
  .main__inner { gap: 16px; }

  .page-head__title { font-size: 24px; }
  .page-head__actions { width: 100%; }
  .page-head__actions .seg { width: 100%; }
  .page-head__actions .seg__btn { flex: 1 1 0; padding: 0 6px; }

  .kpi--hero { grid-column: 1 / -1; }
  .kpi--hero .kpi__value { font-size: 32px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__value { font-size: 20px; }
  .kpi__foot { font-size: 12px; }

  .card { padding: 16px; }
  .split__wide { grid-column: 1 / -1; }
  .chart__plot { height: 190px; padding-left: 48px; }
  .chart__gridline { left: 48px; }
  .chart__labels { padding-left: 48px; }
  .chart__bars, .chart__labels { gap: 3px; }
  .chart__bar { padding: 0 1px; }

  .waterfall__label, .waterfall__value { flex-basis: auto; }
  .waterfall__value { margin-left: auto; }
  .waterfall__track { flex-basis: 100%; order: 3; }

  .channel-head__title { font-size: 22px; }

  /* Barra inferior fixa */
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 30;
    height: var(--bottom-nav);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .bottom-nav__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px;
    border: 0; background: transparent;
    color: var(--muted); text-decoration: none;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
  }
  .bottom-nav__item[aria-current="page"] { color: var(--text); font-weight: 800; }
  .bottom-nav__count {
    position: absolute; top: 2px; left: calc(50% + 6px);
    background: var(--crit); color: #FFFFFF;
    font-size: 10px; font-weight: 800;
    border-radius: 999px; padding: 1px 6px;
  }
  .bottom-nav__count:empty { display: none; }
}


/* -----------------------------------------------------------------------------
   16. ACESSIBILIDADE
   ----------------------------------------------------------------------------- */
/* Foco visível só para teclado */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: var(--brand); }

/* Esconde visualmente, mas mantém para leitor de tela */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Link "Pular para o conteúdo" */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #FFFFFF; padding: 10px 14px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; color: #FFFFFF; }

/* Quem prefere menos movimento não vê animações */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Páginas protegidas de autenticação/integrações */
.setup-card{max-width:480px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 15px 48px #0e172612;display:flex;flex-direction:column;gap:18px}
.setup-card h1{font-size:25px}.setup-card p{color:var(--muted)}.setup-card form{display:flex;flex-direction:column;gap:16px}.setup-card label{display:flex;flex-direction:column;gap:6px;font-weight:700}.setup-card input,.setup-card select{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:12px;background:#fff}.setup-card button{justify-content:center;padding:12px}.form-error{background:var(--crit-bg);color:var(--crit);padding:12px;border-radius:8px}.login-brand{display:grid;place-items:center;font-weight:900;width:52px;height:52px;border-radius:12px;background:var(--brand);color:var(--ink)}
.central-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:16px}.central-panel h2{font-size:18px}.central-panel p{color:var(--muted)}.central-panel__actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.central-panel code{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface-2);border:1px solid var(--line);padding:13px;border-radius:8px;display:block}.central-panel .btn{padding:12px 18px}.central-pill{display:inline-flex;gap:7px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-weight:700;font-size:12px}.central-pill--good{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bg)}.central-note{background:var(--brand-soft);padding:12px;border-radius:9px;color:var(--brand-text);font-size:13px}.central-panels{display:grid;gap:16px}.central-url{max-width:750px;width:100%}.central-disabled{opacity:.65}
@media(max-width:640px){.setup-card{margin:3vh 14px;padding:22px}.central-panel{padding:18px}}

/* Instalação simples e credenciais ML */
.setup-bg {min-height:100vh;background:#f4f6fa;padding:1px 0}
.install-card {max-width:650px;margin:4vh auto 8vh;padding:32px 40px}
.install-step {font-size:11px;font-weight:800;letter-spacing:1.1px;color:#616d7e;text-transform:uppercase}
.install-subtitle {font-weight:800;color:var(--text)!important}
.install-field {display:flex;flex-direction:column;gap:6px}
.install-field label {font-weight:800}
.install-field small,.install-hint,.integracao-hint {font-size:12px;color:var(--muted);line-height:1.6}
.install-card p {line-height:1.65}
.install-divider{height:1px;background:var(--line)}
.install-check{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px}
.install-check__item{font-size:13px;display:flex;gap:8px;align-items:center}
.install-check__item.is-ok{color:#167747}.install-check__item.is-bad{color:#ab2f2f}
.integracao-form{display:flex;flex-direction:column;gap:14px}
.integracao-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.integracao-form label:not(.integracao-checkbox){display:flex;flex-direction:column;gap:7px;font-weight:700}
.integracao-form input:not([type=checkbox]){width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:9px;font:inherit;min-width:0}
.integracao-checkbox{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.integracao-checkbox input{width:16px;height:16px}
.central-note code{font-size:12px;overflow-wrap:anywhere}
.central-note span{display:block;margin-top:7px}
@media(max-width:640px){.install-card{margin:12px;padding:22px}.integracao-form__grid{grid-template-columns:1fr}}