/* ============================================================
   Melhor Passagem · Agency OS — VISUAL NOVO NAS TELAS DA CASA
   ------------------------------------------------------------
   Ligar a classe `ds-advanced` na casa mudava a lateral, o topo e os campos —
   mas o miolo continuava igual, porque 83% do `ds-advanced.css` fala com
   classes que só existem nas telas do produto (`.adv-*`, `#pg-hoje`...). Quem
   abria o CRM "quase não via diferença", e estava certo.

   Este arquivo faz a ponte: pega o vocabulário que as telas da CASA usam há
   dois anos (`.kpi`, `.card-topo`, `.seg`, `.insight-item`, as tabelas) e
   aplica nele a MESMA régua do produto — sem renomear uma classe sequer no
   HTML e sem tocar no JS de nenhuma tela.

   Três regras que este arquivo segue:
   1. tudo escopado em `body.ds-advanced`. Com o visual clássico, nenhuma
      regra daqui existe — desligar o botão devolve a tela exatamente como era;
   2. nada de estrutura nova: só aparência. Quem monta o HTML continua sendo o
      JS de cada tela, que não sabe que este arquivo existe;
   3. a régua é copiada do produto (tamanho, peso, cor, raio), não inventada
      aqui. Duas réguas parecidas é pior do que duas diferentes.
   ============================================================ */

/* ── OS NÚMEROS ─────────────────────────────────────────────────
   A casa desenha cartões SOLTOS (cada um com sua borda, seu fundo e uma faixa
   diagonal decorativa); o produto desenha um PAINEL, com moldura única e
   células divididas. É a diferença que mais muda a cara de uma tela, e a que
   mais aparece: `.kpis` está no painel do dono, em emissões, contas,
   conferência, gastos, cobrança e no placar.
   Aqui o contêiner vira a moldura e cada `.kpi` vira célula. O grid de colunas
   continua vindo do JS (estilo inline), que é quem sabe quantos números há. */
body.ds-advanced .kpis,
body.ds-advanced .ds-lista .kpis {
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden;
  background: var(--card); gap: 0;
}
body.ds-advanced .kpis > .kpi,
body.ds-advanced .ds-lista .kpis > .kpi {
  border: 0; border-radius: 0; box-shadow: none;
  padding: 12px 14px; min-height: 86px; position: relative;
  display: grid; gap: 2px; align-content: start;
  background: var(--card);
  /* Divisória à DIREITA e EMBAIXO de cada célula, desenhada por dentro dela.
     Duas alternativas foram testadas e descartadas:
     · borda na célula — a que quebra para a segunda linha do grid fica sem
       traço em cima, e em CSS não há como saber onde a linha começa (quem
       define as colunas é o JS de cada tela, em estilo inline);
     · fundo do painel aparecendo por um vão de 1px — funciona, mas quando os
       números não completam a última linha (quatro KPIs em três colunas) o
       espaço que sobra vira um retângulo cinza no meio do painel.
     Desenhando por dentro, o vazio continua branco e as linhas caem certas. */
  box-shadow: inset -1px 0 0 var(--borda), inset 0 -1px 0 var(--borda);
}
/* a faixa diagonal decorativa do cartão antigo não existe no produto */
body.ds-advanced .kpis > .kpi::after,
body.ds-advanced .kpis > .kpi::before { display: none; }

/* rótulo: o primeiro <span> da célula. Mesma régua do `.adv-num .rot`, com a
   bolinha que diz, de relance, se aquele número é bom, ruim ou neutro. */
body.ds-advanced .kpis > .kpi > span:first-child {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-texto-sec);
}
body.ds-advanced .kpis > .kpi > span:first-child::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-n-400); flex: none; margin-right: 6px; vertical-align: middle;
}
/* no rótulo que É flex a margem sobra: o gap do flex já separa */
body.ds-advanced .kpis > .kpi > span:first-child { gap: 0; }
body.ds-advanced .kpis > .kpi.azul > span:first-child::before,
body.ds-advanced .kpis > .kpi.destaque > span:first-child::before { background: var(--ds-brand-600); }
body.ds-advanced .kpis > .kpi.positivo > span:first-child::before,
body.ds-advanced .kpis > .kpi.ok > span:first-child::before { background: var(--adv-ok, #15803D); }
body.ds-advanced .kpis > .kpi.alerta > span:first-child::before,
body.ds-advanced .kpis > .kpi.erro > span:first-child::before { background: var(--adv-erro, #B91C1C); }
body.ds-advanced .kpis > .kpi.aviso > span:first-child::before { background: var(--adv-aviso, #B45309); }

body.ds-advanced .kpis > .kpi > b {
  font-size: 23px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ds-titulo); overflow-wrap: anywhere;
}
body.ds-advanced .kpis > .kpi.positivo > b, body.ds-advanced .kpis > .kpi.ok > b { color: var(--adv-ok, #15803D); }
body.ds-advanced .kpis > .kpi.alerta > b, body.ds-advanced .kpis > .kpi.erro > b { color: var(--adv-erro, #B91C1C); }
/* nota de apoio: tudo que vem depois do número */
body.ds-advanced .kpis > .kpi > b ~ span,
body.ds-advanced .kpis > .kpi > .kpi-nota {
  font-size: 12.5px; color: var(--ds-texto-meta); line-height: 1.45;
}

/* ── CABEÇALHO DE BLOCO ─────────────────────────────────────────
   No produto, título e ação do bloco dividem a mesma linha, com o título à
   esquerda e o que se pode fazer à direita. A casa já tem a classe para isso
   (`.card-topo`) — faltava a régua. */
body.ds-advanced .card > .card-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
body.ds-advanced .card > .card-topo > :first-child { min-width: 0; }
body.ds-advanced .card > .card-topo h2 { margin-bottom: 2px; }

/* ── ABAS SEGMENTADAS ───────────────────────────────────────────
   O `.seg` da casa (Financeiro, Gastos, Conferência) é o mesmo gesto das
   pastilhas do produto: escolher uma visão sem sair da tela. */
body.ds-advanced .seg {
  background: var(--ds-painel-frio); border: 1px solid var(--borda);
  border-radius: 10px; padding: 3px; gap: 2px;
}
body.ds-advanced .seg .seg-btn {
  border: 0; background: none; border-radius: 7px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; color: var(--ds-texto-sec); box-shadow: none;
}
body.ds-advanced .seg .seg-btn:hover { background: var(--card); color: var(--ds-titulo); }
body.ds-advanced .seg .seg-btn.ativo {
  background: var(--card); color: var(--ds-brand-700);
  box-shadow: 0 1px 2px rgba(16,18,45,.08);
}

/* ── LISTA DE PENDÊNCIAS ────────────────────────────────────────
   `.insight-item` é a fila da casa (placar, radar). O produto já resolveu a
   mesma lista em `.adv-item`: tarja fina à esquerda dizendo a urgência, e o
   resto limpo. */
body.ds-advanced .insight-lista { display: grid; gap: 8px; }
body.ds-advanced .insight-item {
  border: 1px solid var(--borda); border-left: 3px solid var(--ds-n-300);
  border-radius: 10px; padding: 10px 14px; background: var(--card); box-shadow: none;
}
/* A variante colorida pinta a TARJA, não o fundo: além de ser a régua do
   produto, o fundo lilás deixava o texto de apoio a um centésimo do mínimo de
   contraste (4.49 contra 4.5 exigidos). */
/* ⚠️ O `ds-dash.css` pinta esta variante com `#pg-painel` no seletor, e um id
   vence qualquer quantidade de classes. Por isso os ids aparecem aqui: sem
   eles a regra existe, o navegador a lê, e nada muda na tela. */
body.ds-advanced .insight-item.azul,
body.ds-advanced .insight-item.destaque,
body.ds-advanced #pg-painel .insight-item.azul,
body.ds-advanced #pg-inicio .insight-item.azul {
  background: var(--card); border-color: var(--borda); border-left-color: var(--ds-brand-600);
}
/* Todas as variantes seguem a mesma regra: a cor vive na TARJA, o fundo é
   sempre o do card. Com fundo chapado, seis linhas seguidas viram um bloco de
   cor só — foi o que aconteceu com a "Leitura executiva" do painel do dono,
   onde tudo ficou verde e nada se destacava de nada. */
body.ds-advanced .insight-item.positivo,
body.ds-advanced .insight-item.ok,
body.ds-advanced #pg-painel .insight-item.positivo,
body.ds-advanced #pg-inicio .insight-item.positivo {
  background: var(--card); border-color: var(--borda); border-left-color: var(--adv-ok, #15803D);
}
body.ds-advanced .insight-item.alerta, body.ds-advanced .insight-item.aviso,
body.ds-advanced #pg-painel .insight-item.alerta,
body.ds-advanced #pg-inicio .insight-item.alerta {
  background: var(--card); border-color: var(--borda); border-left-color: var(--adv-aviso, #B45309);
}
body.ds-advanced .insight-item.risco, body.ds-advanced .insight-item.erro,
body.ds-advanced #pg-painel .insight-item.risco,
body.ds-advanced #pg-inicio .insight-item.risco {
  background: var(--card); border-color: var(--borda); border-left-color: var(--adv-erro, #B91C1C);
}
body.ds-advanced .insight-valor { font-variant-numeric: tabular-nums; }

/* ── TABELAS ────────────────────────────────────────────────────
   A lista é o que a casa mais olha (emissões, clientes, contas, gastos). O
   produto já trata a sua; esta régua leva o mesmo tratamento às da casa no
   tema claro, que era onde faltava. */
body.ds-advanced table th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ds-texto-meta); background: var(--ds-painel-frio);
  border-bottom: 1px solid var(--borda); padding: 9px 12px; white-space: nowrap;
}
body.ds-advanced table td { padding: 10px 12px; border-bottom: 1px solid var(--borda); }
body.ds-advanced table tr:last-child td { border-bottom: 0; }
body.ds-advanced table tbody tr:hover td, body.ds-advanced table tr:hover td { background: var(--ds-brand-00); }
/* número em coluna de número lê-se comparando: alinhado à direita e com o
   algarismo de largura fixa, a coluna vira uma régua */
body.ds-advanced table td.num, body.ds-advanced table th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── O Início da casa com a faixa de embarque ───────────────────
   Quando a faixa está na tela (`carregarFaixaEmbarqueCasa`), ela já diz de
   quem é o dia e o que vem pela frente. O título "Meu placar" com a frase de
   apoio em cima dela vira um segundo cabeçalho — a mesma decisão já tomada no
   Início do produto. As ferramentas do topo (busca, período, novo bilhete)
   continuam: elas servem a todas as telas. */
body.ds-advanced.adv-faixa-no-inicio[data-pagina="inicio"] .topo > div:not(.topbar) { display: none; }
body.ds-advanced.adv-faixa-no-inicio[data-pagina="inicio"] .topo {
  justify-content: flex-end; align-items: center; padding-top: 10px; padding-bottom: 10px;
}
/* A Central de ações vem logo abaixo da faixa e é a primeira coisa acionável:
   sem margem dobrada entre as duas. */
body.ds-advanced #pg-inicio > .adv-hero { margin-bottom: 14px; }

/* O período passa a morar na faixa, como no produto: a ficha É o seletor, e a
   barra do topo para de mostrar o mesmo controle duas vezes. Só no Início e só
   com a faixa à vista — nas outras telas da casa o período segue no topo. */
body.adv-periodo-espelhado.adv-faixa-no-inicio[data-pagina="inicio"] .topbar #filtro-periodo {
  display: none !important;
}

/* ══ SEGUNDA RODADA: o que ainda destoava ═════════════════════
   Percorrendo tela a tela contra o Início do produto, sobraram componentes da
   casa que nunca passaram pela régua nova. Cada bloco abaixo é um deles. */

/* ── Escolha de tipo de venda (Registrar) ───────────────────────
   O cartão selecionado era ÂMBAR. No design system do produto o âmbar é
   acento (as milhas, o que embarca hoje) e quem diz "selecionado" é sempre a
   cor da marca — senão a tela ensina duas linguagens para o mesmo gesto. */
body.ds-advanced .reg-tipo.ativo {
  border-color: var(--ds-brand-600);
  background: var(--card);
  box-shadow: 0 6px 18px rgba(63,73,168,.14);
}
body.ds-advanced .reg-tipo.ativo .reg-selo { background: var(--ds-brand-600); color: #fff; }
body.ds-advanced .reg-tipo.ativo .reg-radio {
  border-color: var(--ds-brand-600); background: var(--ds-brand-600);
  box-shadow: inset 0 0 0 4px var(--card);
}
body.ds-advanced .reg-tipo:hover { border-color: var(--ds-brand-400); }
body.ds-advanced .reg-tipo .reg-selo { border-radius: 10px; }

/* ── Faixa de resumo da agência ─────────────────────────────────
   Mesma ideia do painel de números: moldura do card, rótulo em maiúsculas,
   valor tabular. Estava com fundo azul-claro e rótulo miúdo. */
body.ds-advanced .faixa-agencia {
  background: var(--card); border-color: var(--borda); border-radius: 12px;
  padding: 12px 16px; gap: 22px;
}
body.ds-advanced .faixa-item span {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-texto-sec);
}
body.ds-advanced .faixa-item b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ds-titulo); }
body.ds-advanced .faixa-item b.ok { color: var(--adv-ok, #15803D); }
body.ds-advanced .faixa-item b.erro { color: var(--adv-erro, #B91C1C); }
body.ds-advanced .faixa-item b.alerta { color: var(--adv-aviso, #B45309); }

/* ── Barras de evolução (mês a mês) ─────────────────────────────
   O trilho ganha a mesma altura e o mesmo raio das barras do produto, e o mês
   atual é marcado pela cor da marca em vez de um fundo azul-claro chapado. */
body.ds-advanced .evolucao-linha { padding: 6px 8px; }
body.ds-advanced .evolucao-linha.atual { background: var(--ds-brand-00); }
body.ds-advanced .evolucao-trilho { height: 8px; border-radius: 999px; background: var(--ds-n-100); }
body.ds-advanced .evolucao-trilho i { border-radius: 999px; background: var(--adv-ok, #15803D); }
body.ds-advanced .evolucao-trilho i.negativa { background: var(--adv-erro, #B91C1C); }
body.ds-advanced .evolucao-mes { font-size: 12px; color: var(--ds-texto-meta); }
body.ds-advanced .evolucao-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
body.ds-advanced .evolucao-valor.ok { color: var(--adv-ok, #15803D); }
body.ds-advanced .evolucao-valor.erro { color: var(--adv-erro, #B91C1C); }

/* ── Cartões do radar ───────────────────────────────────────────
   A urgência continua marcada — é o sentido da tela —, mas pela TARJA lateral,
   não por sombra colorida grossa: com a caixa inteira vermelha, três alertas
   seguidos viram uma parede de cor e o olho perde qual deles é o pior.

   Desde o redesign de 15/set/2026 a tela tem três cartões com densidades
   diferentes (.rd-op para voo, .rd-cupom para cupom, .rd-card para oferta) e o
   essencial já vem do CSS da própria tela; aqui ficam só os ajustes de tema. */
body.ds-advanced .rd-op,
body.ds-advanced .rd-cupom,
body.ds-advanced .rd-card { box-shadow: none; }
body.ds-advanced .rd-card h3 { color: var(--ds-titulo); }
body.ds-advanced .rd-op-tag {
  font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .04em;
}
body.ds-advanced .rd-economia { border-radius: 999px; font-weight: 600; }

/* ── Milhas por programa ────────────────────────────────────────
   Cada programa é um cartão: mesma moldura, mesmo raio e os números em fonte
   tabular, para comparar milheiro de relance. */
body.ds-advanced .programas > * {
  border: 1px solid var(--borda); border-radius: 12px; background: var(--card);
  box-shadow: none;
}
body.ds-advanced .programas table td, body.ds-advanced .programas table th {
  padding: 6px 10px; font-variant-numeric: tabular-nums; background: none;
}

/* ── Janelas (modais) ───────────────────────────────────────────
   O aviso de check-in e as confirmações abriam com o raio e a sombra antigos,
   destoando de tudo que está atrás deles. */
body.ds-advanced .modal-box {
  border-radius: 14px; border: 1px solid var(--borda);
  box-shadow: 0 24px 60px rgba(16,18,45,.22);
}
body.ds-advanced .modal-box h2, body.ds-advanced .modal-box h3 {
  font-size: 17px; font-weight: 600; color: var(--ds-titulo); letter-spacing: -.01em;
}

/* ── Formulários ────────────────────────────────────────────────
   A grade da casa passa a respirar como a do produto: rótulo menor e mais
   perto do campo, e a linha de ações separada por uma divisória. */
body.ds-advanced .grade { gap: 12px 14px; }
body.ds-advanced .linha-acoes {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--borda);
}

/* ── Últimos acertos de legibilidade ────────────────────────────
   "pendentes/agendados" é uma palavra de 19 caracteres sem ponto de quebra:
   em caixa estreita ela vaza para fora em vez de passar para a linha de baixo.
   Vale para os dois blocos do financeiro que a usam. */
body.ds-advanced .gastos-saude-faixa span,
body.ds-advanced .gastos-pendencia small { overflow-wrap: anywhere; }
/* o "PRONTOS" do contador dos primeiros passos estava em 3.77 sobre branco */
body.ds-advanced .pp-progresso span { color: var(--ds-texto-sec); }