/* ============================================================
   CRM Advanced — tema e telas do produto
   ------------------------------------------------------------
   Só age quando o <body> tem a classe `ds-advanced` (posta pelo
   console a partir de /marca e /modulos quando a instalação é
   CRM_EDICAO=advanced). Sem a classe, nada aqui se aplica e a
   casa continua com o visual dela — mesma regra de todas as
   camadas ds-.

   Identidade: clara, compacta, sem cartões redondos nem marca
   d'água; barra lateral escura (ardósia) com acento verde-água,
   tipografia do sistema, tabelas densas e legíveis, cores de
   status com significado fixo:
     verde  = pago / feito / fechada
     âmbar  = a receber / pendente / hoje
     vermelho = vencido / atrasado / perdida
     cinza  = cancelado / futuro
   ============================================================ */

/* ── tokens (claro) ──────────────────────────────────────── */
body.ds-theme.ds-advanced {
  /* ── identidade do produto: índigo de fim de tarde + âmbar ──
     O teal anterior era a cor de metade dos aplicativos de finanças, e
     azul-royal é a de metade dos CRMs. O índigo profundo é o céu na hora do
     embarque; o âmbar é o ouro das milhas, e aparece só onde pontua valor.
     Escolhida também por resistir a oito horas de tela: matiz escura e pouco
     saturada no fundo, saturação reservada para o que é clicável. */
  --ds-brand-00: #FAFAFE;  --ds-brand-25: #F4F5FD;  --ds-brand-50: #ECEEFB;
  --ds-brand-200: #D3D7F5; --ds-brand-300: #AFB6EC; --ds-brand-400: #7D87DC;
  --ds-brand-600: #3F49A8; --ds-brand-700: #343C8C; --ds-brand-800: #2B3173;
  --ds-brand-900: #232859; --ds-brand-950: #171A3B;
  --ds-acao: #3F49A8; --ds-acao-hover: #343C8C; --ds-foco: #5C68C8;
  --ds-mp-navy: #1E2148; --ds-mp-vivo: #5C68C8; --ds-mp-escuro: #3F49A8;
  --ds-grad-marca: linear-gradient(118deg, #343C8C 0%, #4E59C4 100%);
  --ds-grad-marca-hover: linear-gradient(118deg, #2B3173 0%, #3F49A8 100%);
  /* âmbar: o acento quente. Nunca no fundo, nunca em texto corrido. */
  --adv-milhas: #A85F08; --adv-milhas-fundo: #FDF3E2;
  --ds-texto: #23263D; --ds-titulo: #14162B; --ds-texto-sec: #4B5069;
  --ds-texto-meta: #666C86; --ds-texto-forte: #14162B;
  --ds-n-50: #F8FAFC; --ds-n-100: #F1F5F9; --ds-n-200: #E2E8F0; --ds-n-300: #CBD5E1;
  --ds-n-400: #94A3B8; --ds-n-500: #64748B; --ds-n-600: #475569; --ds-n-700: #334155; --ds-n-800: #1E293B;
  --ds-painel-frio: #F5F7FA; --ds-kpi-fundo: #FFFFFF; --ds-trilho: transparent;
  --ds-menu-hover: rgba(255,255,255,.08); --ds-submenu-ativo: rgba(124,135,220,.26);
  --ds-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --ds-espaco-letras: 0; --ds-peso-corpo: 400;
  --ds-tam-h1: 22px; --ds-altura-h1: 28px; --ds-peso-h1: 600;
  --ds-tam-h2: 18px; --ds-tam-secao: 16px; --ds-peso-secao: 600;
  --ds-tam-corpo: 14px; --ds-tam-sec: 13px; --ds-tam-meta: 12px;
  --ds-tam-kpi: 24px; --ds-peso-kpi: 700;
  --ds-raio-secao: 12px; --ds-raio-modal: 14px; --ds-raio-botao: 8px;
  --ds-raio-kpi: 10px; --ds-raio-avatar: 10px; --ds-raio-input: 8px; --ds-raio-chip: 8px;
  --ds-conteudo-pad: 24px; --ds-bloco-gap: 14px;
  /* cores de status (só aqui) */
  --adv-ok: #15803D; --adv-ok-fundo: #DCFCE7;
  --adv-aviso: #B45309; --adv-aviso-fundo: #FEF3C7;
  --adv-erro: #B91C1C; --adv-erro-fundo: #FEE2E2;
  --adv-neutro: #475569; --adv-neutro-fundo: #F1F5F9;
  /* A barra lateral é índigo, não preto: é onde a marca aparece em toda tela. */
  --adv-lateral: #1E2148; --adv-lateral-texto: #B9BEDD; --adv-lateral-forte: #F6F7FE;
  /* variáveis legadas do console (usadas em estilos inline) */
  --fundo: #EFF1F8; --painel: #FFFFFF; --card: #FFFFFF; --borda: #E3E6F0;
  --texto: #1A1D33; --sub: #666C86; --ok: #15803D; --alerta: #B45309; --erro: #B91C1C;
  --dourado: #A85F08; --dourado-claro: #D18A22;
  /* ── a seta de "tem mais aqui" ──────────────────────────────
     Um chevron pequeno e sem pressa: em repouso é quase da cor da
     borda, e só ganha a cor da marca quando o dedo passa por cima.
     É a diferença entre avisar que existe escolha e gritar. */
  --adv-seta: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA2BD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  --adv-seta-viva: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F49A8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  background: #EFF1F8; color: #23263D;
  font-family: var(--ds-fonte); letter-spacing: 0;
}
/* ── tokens (escuro) ──────────────────────────────────────
   Este arquivo é carregado DEPOIS do ds-dark.css e com a mesma
   especificidade, então ele precisa redefinir os tokens do
   escuro por conta própria: sem isto, título e texto ficavam
   com a cor do tema claro sobre o fundo escuro (ilegíveis). */
.ds-dark body.ds-theme.ds-advanced {
  /* ── escuro macio ─────────────────────────────────────────
     O escuro anterior ia de #0B1220 a #020617 — quase preto — com texto
     quase branco por cima. Isso é o par de maior contraste possível, e em
     tela grande cansa: o texto "brilha" e a borda some. Aqui o fundo é um
     grafite AZULADO (o índigo levado ao escuro, não o preto), as superfícies
     sobem em três degraus visíveis, e o texto para em #DCDFEA em vez de
     branco. Contraste de corpo ~12:1: bem acima do mínimo de acessibilidade
     e abaixo do ponto em que a tela vira lanterna. */
  --ds-brand-00: #191B26; --ds-brand-25: #1F2230; --ds-brand-50: #242839;
  --ds-brand-200: rgba(140,150,230,.22); --ds-brand-300: rgba(160,170,240,.30);
  --ds-brand-400: #A7B0EE; --ds-brand-600: #8C97E4; --ds-brand-700: #A7B0EE;
  --ds-brand-800: #C3C9F5; --ds-brand-900: #DCE0FA; --ds-brand-950: #EFF1FE;
  --ds-acao: #5F6BCC; --ds-acao-hover: #6F7BDA; --ds-foco: #A7B0EE;
  --ds-mp-navy: #DCDFEA; --ds-mp-vivo: #A7B0EE; --ds-mp-escuro: #8C97E4;
  --ds-grad-marca: linear-gradient(118deg, #454F9E 0%, #5F6BCC 100%);
  --ds-grad-marca-hover: linear-gradient(118deg, #5F6BCC 0%, #7C87DC 100%);
  /* texto: claro sobre escuro, sem branco puro */
  --ds-texto: #DCDFEA; --ds-titulo: #EEF0F8; --ds-texto-forte: #F4F5FB;
  --ds-texto-sec: #BCC1D4; --ds-texto-meta: #8E94AB;
  /* neutros invertidos: 50 é o mais escuro */
  --ds-n-50: #1F2230; --ds-n-100: #262A3A; --ds-n-200: #323750; --ds-n-300: #414764;
  --ds-n-400: #5A6180; --ds-n-500: #767D9C; --ds-n-600: #9AA0B8; --ds-n-700: #BCC1D4; --ds-n-800: #DCDFEA;
  --ds-branco: #222534; --ds-painel-frio: #1F2230; --ds-kpi-fundo: #222534; --ds-trilho: transparent;
  --ds-menu-hover: rgba(255,255,255,.07); --ds-submenu-ativo: rgba(140,151,228,.24);
  /* status: mais dessaturados que no claro, para não vibrarem no escuro */
  --adv-ok: #6EE7A0; --adv-ok-fundo: rgba(52,190,120,.16);
  --adv-aviso: #F0C070; --adv-aviso-fundo: rgba(230,170,70,.16);
  --adv-erro: #F19A9A; --adv-erro-fundo: rgba(224,110,110,.16);
  --adv-neutro: #BCC1D4; --adv-neutro-fundo: rgba(150,158,190,.14);
  --adv-milhas: #E3B173; --adv-milhas-fundo: rgba(200,150,80,.16);
  --adv-lateral: #171926; --adv-lateral-texto: #A6ACC6; --adv-lateral-forte: #EEF0F8;
  --fundo: #191B26; --painel: #1F2230; --card: #222534; --borda: #323750;
  --texto: #DCDFEA; --sub: #8E94AB; --ok: #6EE7A0; --alerta: #F0C070; --erro: #F19A9A;
  --dourado: #E3B173; --dourado-claro: #F0C88F;
  /* no escuro a seta clareia em vez de escurecer, senão some no fundo */
  --adv-seta: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767D96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  --adv-seta-viva: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B0EE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  background: #191B26; color: #DCDFEA;
}
/* títulos e textos do console legado que trazem cor fixa no HTML */
.ds-dark .ds-advanced h1, .ds-dark .ds-advanced h2, .ds-dark .ds-advanced h3,
.ds-dark .ds-advanced h4, .ds-dark .ds-advanced .card h2 { color: var(--ds-titulo); }
.ds-dark .ds-advanced main .topo h1 { color: var(--ds-titulo); }
.ds-dark .ds-advanced td, .ds-dark .ds-advanced .ds-lista td { color: var(--ds-texto-sec); }
.ds-dark .ds-advanced th, .ds-dark .ds-advanced .ds-lista th { background: var(--ds-n-100); color: var(--ds-texto-sec); }
.ds-dark .ds-advanced td b, .ds-dark .ds-advanced .ds-lista td b { color: var(--ds-texto-forte); }
/* `:not()` para o número não perder a cor de estado (verde/vermelho) no escuro */
.ds-dark .ds-advanced .adv-kpi:not(.positivo):not(.alerta) b,
.ds-dark .ds-advanced .kpi b { color: var(--ds-texto-forte); }
.ds-dark .ds-advanced input[type=file] { color: var(--ds-texto-sec); }

/* ── o que some no produto ───────────────────────────────── */
/* #claudia-widget saiu desta lista em 30/set/2026: o visual novo virou o
   padrão da agência e o botão da Cláudia sumia de todas as abas. O Advanced
   (agencyos/) tem a própria cópia deste arquivo e continua escondendo. */
.ds-advanced #atalho-mm,
.ds-advanced .topbar .atalho-topo:not(#atalho-novo),
.ds-advanced #dica-estrategia, .ds-advanced .oculto-no-produto { display: none !important; }
/* vidro fosco da casa dá lugar a superfícies chapadas */
.ds-advanced main { max-width: 1240px; padding: 22px 26px; }
.ds-advanced main .topo { align-items: center; margin-bottom: 16px; }
.ds-advanced main .topo h1 { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ds-titulo); }
.ds-advanced main .topo p { font-size: 13px; color: var(--ds-texto-meta); max-width: 720px; }
.ds-advanced .busca-global { border-radius: 8px; }
.ds-advanced #atalho-novo { background: var(--ds-grad-marca); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 14px; font-weight: 600; cursor: pointer; }

/* ── barra lateral escura ────────────────────────────────── */
.ds-advanced #app aside.ds-shell { background: var(--adv-lateral); border-right: 0; width: 224px; }
.ds-advanced aside.ds-shell .logo .logo-legenda b { color: var(--adv-lateral-forte); font-size: 13px; letter-spacing: .02em; max-width: 12ch; }
.ds-advanced aside.ds-shell .logo small { color: var(--ds-brand-400); letter-spacing: .18em; }
.ds-advanced aside.ds-shell .logo .logo-marca { background: #fff; border-radius: 8px; padding: 2px; }
.ds-advanced .ds-shell-toggle { background: transparent; border-color: rgba(255,255,255,.14); color: var(--adv-lateral-texto); }
.ds-advanced .ds-shell-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.ds-advanced aside.ds-shell nav#menu { background: transparent; gap: 2px; }
.ds-advanced aside.ds-shell nav#menu button[id^="nav-"] { color: var(--adv-lateral-texto); font-weight: 500; min-height: 34px; padding: 7px 9px; border-radius: 8px; }
.ds-advanced aside.ds-shell nav#menu button[id^="nav-"]:hover { background: rgba(255,255,255,.08); color: #fff; }
.ds-advanced aside.ds-shell nav#menu button[id^="nav-"].ativo { background: var(--ds-grad-marca); color: #fff; }
.ds-advanced aside.ds-shell nav#menu .nav-icone { color: inherit; }
.ds-advanced .ds-nav-cab { color: var(--adv-lateral-texto); min-height: 34px; padding: 7px 9px; border-radius: 8px; }
.ds-advanced .ds-nav-cab:hover { background: rgba(255,255,255,.08); color: #fff; }
.ds-advanced .ds-nav-cab .ds-nav-cab-ic, .ds-advanced .ds-nav-cab .ds-nav-chevron { color: inherit; }
.ds-advanced .ds-nav-grupo.ds-aberto { border: 0; background: rgba(255,255,255,.05); border-radius: 8px; }
.ds-advanced .ds-nav-grupo.ds-aberto > .ds-nav-cab { background: transparent; color: #fff; border-radius: 8px 8px 0 0; }
.ds-advanced .ds-nav-grupo.ds-aberto > .ds-nav-lista { padding: 2px 4px 6px; }
.ds-advanced .ds-nav-lista button[id^="nav-"] { color: var(--adv-lateral-texto); padding-left: 30px; font-size: 13px; }
.ds-advanced aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo { background: var(--ds-submenu-ativo); color: #fff; }
.ds-advanced aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo .nav-icone { color: var(--ds-brand-400); }
.ds-advanced aside.ds-shell.ds-colapsada .ds-nav-lista { background: var(--adv-lateral); border-color: rgba(255,255,255,.12); }
.ds-advanced .ds-flyout-titulo { color: var(--ds-brand-400); }
.ds-advanced aside.ds-shell .rodape { border-top-color: rgba(255,255,255,.12); color: var(--adv-lateral-texto); }
.ds-advanced aside.ds-shell .rodape b { color: var(--adv-lateral-forte); }
.ds-advanced aside.ds-shell .rodape #quem-papel { color: var(--adv-lateral-texto); }
.ds-advanced aside.ds-shell .rodape .leve, .ds-advanced .ds-cor-btn, .ds-advanced .ds-tema-btn {
  background: transparent; border-color: rgba(255,255,255,.16); color: var(--adv-lateral-texto); }
.ds-advanced aside.ds-shell .rodape .leve:hover, .ds-advanced .ds-cor-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.ds-advanced .ds-mono-texto { display: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ds-grad-marca);
  color: #fff; font-weight: 700; font-size: 12px; align-items: center; justify-content: center; margin: 0 auto; }
.ds-advanced aside.ds-shell.ds-colapsada .ds-mono-texto { display: flex; }

/* BUG (achado em uso, 10/set/2026): com a barra recolhida apareciam DOIS
   monogramas "MA" sobrepostos. O CSS do shell esconde a imagem da logo e a
   legenda, mas nunca precisou esconder o MONOGRAMA — na casa existe arquivo de
   logo e o monograma nunca é desenhado. No produto sem logo enviada ele é a
   marca, e ficava sobrando ao lado do monograma que o próprio shell injeta.

   `!important` é necessário e não é preguiça: `vestirMarca()` liga o monograma
   escrevendo `quadrado.style.display = "inline-flex"` DIRETO no elemento, e
   estilo inline vence qualquer seletor. Mexer no JS não resolveria sozinho —
   a barra pode ser recolhida depois de a marca já ter sido vestida. */
.ds-theme aside.ds-shell.ds-colapsada .logo .logo-monograma { display: none !important; }

/* Recolhida, a barra vira uma coluna de ícones sem uma palavra escrita. Quem
   está aprendendo o sistema não adivinha o que cada um é, e o botão de voltar
   ficava do tamanho de um ícone qualquer. Agora ele é o primeiro elemento da
   barra, com contorno, e os ícones ganham rótulo ao passar o mouse. */
.ds-advanced aside.ds-shell.ds-colapsada .ds-shell-toggle {
  width: 30px; height: 30px; border-color: var(--ds-brand-400); color: var(--ds-brand-400);
  margin: 0 auto 4px;
}
.ds-advanced aside.ds-shell.ds-colapsada .ds-shell-toggle:hover { background: var(--ds-grad-marca); color: #fff; border-color: transparent; }
.ds-advanced aside.ds-shell.ds-colapsada .logo { flex-direction: column; gap: 8px; padding: 0; }
/* Monograma da agência (sem logo enviada). O `#tela-login .logo-login span` do
   CSS legado é mais específico que `.logo-monograma` e pintava as iniciais de
   cinza, em 11px, dentro do quadrado verde — ilegível. */
.ds-advanced .logo-monograma,
.ds-advanced #tela-login .logo-login span.logo-monograma,
#tela-login .logo-login span.logo-monograma {
  background: var(--ds-grad-marca); color: #fff; font-size: 30px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ds-advanced aside .logo span.logo-monograma { font-size: 16px; }

/* ── login ───────────────────────────────────────────────── */
.ds-advanced #tela-login { background: #EEF2F6; }
.ds-advanced #tela-login .card { border-radius: 12px; border: 1px solid var(--ds-n-200); box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.ds-advanced #tela-login .logo-login .logo-nome-marca { color: var(--ds-titulo); }
.ds-advanced #tela-login .logo-login #marca-legenda-login { color: var(--ds-brand-600); letter-spacing: .16em; }
.ds-advanced #tela-login .acao { background: var(--ds-grad-marca); border-radius: 8px; }

/* ── superfícies e componentes, compactos ─────────────────── */
.ds-advanced .card, .ds-advanced .ds-lista .card {
  background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px;
  margin-bottom: 14px; box-shadow: none; backdrop-filter: none;
}
.ds-advanced .card h2, .ds-advanced .ds-lista .card h2 { font-size: 16px; font-weight: 600; color: var(--ds-titulo); margin: 0 0 6px; }
/* Ícone de título (ver `advIconesDaTela` em ds-advanced.js). Inline, não flex:
   há h2 que já carrega um selo no fim da linha, e trocar o título para flex
   mudaria o alinhamento desses selos sem ninguém pedir.
   O tamanho acompanha o texto e fica um degrau abaixo dele; a cor é a da marca
   com um véu de opacidade — assim o desenho orienta de relance e não disputa a
   leitura com a palavra que está do lado. */
.ds-advanced .adv-h-icone { flex: none; color: var(--ds-brand-600); opacity: .85;
  margin-right: 8px; vertical-align: -.14em; }
.ds-advanced h1 > .adv-h-icone { width: 21px; height: 21px; vertical-align: -.12em; }
.ds-advanced h2 > .adv-h-icone { width: 16px; height: 16px; }
/* Cabeçalho de painel já é flex (o ícone do painel entra por ali): ali o
   desenho alinha pelo eixo do flex e a margem manual sobraria. */
.ds-advanced .adv-painel-lista > header .adv-h-icone,
.ds-advanced .adv-painel-num > header .adv-h-icone { margin-right: 0; vertical-align: baseline; }
.ds-advanced .card .dica, .ds-advanced .ds-lista .card .dica { font-size: 13px; color: var(--ds-texto-meta); }
.ds-advanced .kpi::after, .ds-advanced .ds-lista .kpi::after, .ds-advanced .ds-kpi::after { display: none; }
.ds-advanced .kpis .kpi, .ds-advanced .ds-lista .kpi { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; }
.ds-advanced .kpi b, .ds-advanced .ds-lista .kpi b { font-size: 22px; }
.ds-advanced label, .ds-advanced .ds-lista label { font-size: 12.5px; color: var(--ds-texto-sec); margin: 8px 0 4px; font-weight: 500; }
.ds-advanced input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .ds-advanced select, .ds-advanced textarea,
.ds-advanced .ds-lista input:not(.campo-busca):not([type=checkbox]):not([type=radio]):not([type=file]),
.ds-advanced .ds-lista select, .ds-advanced .ds-lista .campo-busca {
  height: 40px; border-radius: 8px; border: 1px solid var(--ds-n-300); background: var(--card); color: var(--texto);
  font-size: 14px; padding: 0 12px; font-weight: 400; box-shadow: none;
}
.ds-advanced textarea { height: auto; min-height: 72px; padding: 8px 12px; }
.ds-advanced input[type=checkbox], .ds-advanced input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ds-brand-600); }
.ds-advanced input[type=range] { width: 140px; height: auto; padding: 0; border: 0; background: none; accent-color: var(--ds-brand-600); }
.ds-advanced input[type=file] { width: 100%; height: auto; padding: 8px; border: 1px dashed var(--ds-n-300); border-radius: 8px; background: var(--painel); font-size: 13px; }
/* ── anel de foco ───────────────────────────────────────────────
   Duas coisas erradas aqui, e a segunda é a grave.

   A cor: `rgba(13,148,136,.18)` é teal, resquício do tema que o
   produto abandonou. Escrito em hex cru, não seguiu a troca para
   índigo. Agora é o token da marca, e o escuro vem junto de graça.

   ⚠️ A que importa: a regra antiga era `.ds-advanced input:focus`,
   (0,2,1), e PERDIA para a regra base logo acima — que carrega
   quatro `:not()` e portanto (0,5,1), com `box-shadow: none`.
   Resultado medido no navegador: campo de texto focado no Advanced
   não mostrava anel NENHUM, nem teal nem índigo, e a borda também
   não mudava. Quem navega por teclado não enxergava onde estava.
   Por isso o seletor abaixo espelha os `:not()` da regra base em
   vez de simplificá-los: é o que faz a conta fechar. Mexeu na
   regra base? Espelhe aqui também, ou o anel some de novo. */
body.ds-advanced input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):focus,
body.ds-advanced select:focus,
body.ds-advanced textarea:focus,
body.ds-advanced .ds-lista input:not(.campo-busca):not([type=checkbox]):not([type=radio]):not([type=file]):focus,
body.ds-advanced .ds-lista select:focus,
body.ds-advanced .ds-lista .campo-busca:focus {
  outline: none; border-color: var(--ds-foco); box-shadow: 0 0 0 2px var(--ds-brand-200); }

/* ── indicação de escolha: a seta ───────────────────────────────
   Onde existe mais de uma possibilidade, a tela precisa dizer isso
   sem cobrar atenção. O CRM tinha três tratamentos diferentes para
   o MESMO gesto: o select do formulário de venda com o chevron do
   ds (16px, cinza médio), o select do topo com o widget cru do
   sistema operacional (que muda de cara em cada máquina), e o
   select de Etapa da lista de negociações sem marca nenhuma —
   parecia um campo de texto, e a etapa ficava escondida de quem
   não sabe que aquilo abre.

   Aqui os três viram um só: mesma seta, mesmo tamanho, mesma
   distância da borda, em toda tela do produto. O seletor repete os
   #id (pg-registrar, pg-gastos) e as classes (.modal-box, .ds-lista)
   de propósito: ds-forms/ds-screens/ds-dash já desenham chevron
   nesses lugares com especificidade de id, e sem repetir aqui eles
   continuariam com o desenho antigo — duas setas diferentes no
   mesmo produto é pior que nenhuma.

   [multiple] e [size] ficam de fora: lá as opções já estão à vista,
   e seta em lista aberta é promessa que não se cumpre. */
body.ds-advanced select:not([multiple]):not([size]),
body.ds-advanced .ds-lista select:not([multiple]):not([size]),
body.ds-advanced .modal-box select:not([multiple]):not([size]),
body.ds-advanced #pg-registrar select:not([multiple]):not([size]),
body.ds-advanced #pg-gastos select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: var(--adv-seta);
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 11px;
  padding-right: 30px;
}
/* a descoberta: a seta só acende quando o usuário chega perto */
body.ds-advanced select:not([multiple]):not([size]):hover,
body.ds-advanced select:not([multiple]):not([size]):focus,
body.ds-advanced .ds-lista select:not([multiple]):not([size]):hover,
body.ds-advanced .ds-lista select:not([multiple]):not([size]):focus,
body.ds-advanced .modal-box select:not([multiple]):not([size]):hover,
body.ds-advanced .modal-box select:not([multiple]):not([size]):focus,
body.ds-advanced #pg-registrar select:not([multiple]):not([size]):hover,
body.ds-advanced #pg-registrar select:not([multiple]):not([size]):focus,
body.ds-advanced #pg-gastos select:not([multiple]):not([size]):hover,
body.ds-advanced #pg-gastos select:not([multiple]):not([size]):focus {
  background-image: var(--adv-seta-viva);
}
.ds-advanced .acao, .ds-advanced .ds-lista .acao, .ds-advanced button.acao {
  background: var(--ds-grad-marca); color: #fff; border: 0; border-radius: 8px; min-height: 40px; padding: 9px 16px;
  font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; }
.ds-advanced .acao:hover { background: var(--ds-grad-marca-hover); }
.ds-advanced .leve, .ds-advanced .ds-lista .leve, .ds-advanced button.leve {
  background: var(--card); border: 1px solid var(--ds-n-300); border-radius: 7px; color: var(--ds-texto-sec);
  font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.ds-advanced .leve:hover { border-color: var(--ds-brand-400); color: var(--ds-brand-700); background: var(--ds-brand-50); }
.ds-advanced .leve.perigo { color: var(--adv-erro); }
.ds-advanced .leve.perigo:hover { background: var(--adv-erro-fundo); border-color: var(--adv-erro); }
.ds-advanced table, .ds-advanced .ds-lista table { font-size: 13px; }
.ds-advanced th, .ds-advanced .ds-lista th { background: var(--ds-n-100); color: var(--ds-texto-sec); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; padding: 9px 10px; border-bottom: 1px solid var(--borda); }
.ds-advanced td, .ds-advanced .ds-lista td { padding: 9px 10px; border-bottom: 1px solid var(--borda); color: var(--texto); vertical-align: middle; }
.ds-advanced .ds-lista th:first-child, .ds-advanced .ds-lista th:last-child { border-radius: 0; }
.ds-advanced .selo, .ds-advanced .ds-lista .selo { border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; }
.ds-advanced .vazio, .ds-advanced .ds-lista .vazio { padding: 28px; color: var(--ds-texto-meta); font-size: 13.5px; text-align: center; }
.ds-advanced .grade { gap: 0 14px; }
.ds-advanced .modal-box { border-radius: 12px; }
.ds-advanced .campo-grupo, .ds-advanced .passo { border-radius: 12px; }
.ds-advanced .reg-tipo, .ds-advanced .source-option { border-radius: 10px; }
.ds-advanced #em-cobranca-box { display: block; }
#em-cobranca-box { display: none; margin: 8px 0 12px; padding: 12px 14px; border: 1px dashed var(--borda); border-radius: 10px; background: var(--painel); }
#em-cobranca-box .adv-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); margin: 0 0 4px; }
#em-cobranca-box .adv-check input { width: 16px; height: 16px; margin: 0; }
#em-cobranca-box .grade { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ── blocos do produto ───────────────────────────────────── */
.adv-passos { display: grid; gap: 8px; margin-top: 8px; }
.adv-passo { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); }
.adv-passo .num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--adv-neutro-fundo); color: var(--adv-neutro); font-weight: 700; font-size: 12px; flex: none; }
.adv-passo.feito .num { background: var(--adv-ok-fundo); color: var(--adv-ok); }
.adv-passo.feito b { text-decoration: line-through; color: var(--ds-texto-meta); }
.adv-passo .corpo { flex: 1; min-width: 0; }
.adv-passo .corpo b { display: block; font-size: 14px; color: var(--texto); }
.adv-passo .corpo small { display: block; color: var(--ds-texto-meta); font-size: 12.5px; margin-top: 2px; }
/* o passo pode levar para fora (a página do Google): link com cara de botão */
.adv-passo a.leve { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.adv-voo-casou { display: block; margin-top: 3px; font-size: 12px; color: var(--ds-texto-meta); font-style: italic; }
.adv-senha-dica { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ds-texto-meta); }
.adv-senha-dica.ok { color: var(--adv-ok); }
.adv-senha-dica.ruim { color: var(--adv-erro); }

.adv-progresso { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ds-texto-meta); }
.adv-progresso .barra { flex: 1; height: 6px; border-radius: 3px; background: var(--ds-n-200); overflow: hidden; }
.adv-progresso .barra i { display: block; height: 100%; background: var(--ds-grad-marca); }

.adv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.adv-kpi { text-align: left; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px;
  cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; color: var(--texto); }
.adv-kpi:hover { border-color: var(--ds-brand-400); }
.adv-kpi .rot { font-size: 12.5px; color: var(--ds-texto-sec); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.adv-kpi b { font-size: 24px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.adv-kpi .sub { font-size: 12.5px; color: var(--ds-texto-meta); }
.adv-kpi .criterio { font-size: 12px; color: var(--ds-texto-meta); line-height: 1.4; border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 4px; }
.adv-kpi.alerta { border-color: var(--adv-erro); }
.adv-kpi.alerta b { color: var(--adv-erro); }
.adv-kpi.positivo b { color: var(--adv-ok); }

/* ══ INÍCIO — contexto, painéis por assunto e fila do dia ══════
   A tela tinha cinco cartões soltos de igual peso, cada um com um
   parágrafo de critério embaixo: um paredão de texto onde deveria
   estar um painel. Aqui os números continuam os mesmos e ganham
   três coisas: uma faixa que diz DE QUEM e DE QUANDO é o que está
   na tela, um agrupamento por assunto (o que vendi · o que tenho a
   receber · o que embarca) e o critério guardado atrás de um botão
   — continua escrito, só não grita mais alto que o número.
   ════════════════════════════════════════════════════════════ */
.adv-contexto { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.adv-contexto .quem { flex: 1 1 240px; min-width: 200px; }
.adv-contexto .quem b { display: block; font-size: 19px; font-weight: 650; color: var(--ds-titulo); letter-spacing: -.01em; }
.adv-contexto .quem > span { display: block; font-size: 12.5px; color: var(--ds-texto-meta); margin-top: 3px; white-space: nowrap; }
.adv-contexto .quem span i { font-style: normal; color: var(--adv-ok, var(--ok, #15803D)); font-weight: 600; }
.adv-contexto .filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adv-fichinha { display: inline-flex; align-items: center; gap: 7px; background: var(--card);
  border: 1px solid var(--ds-n-300); border-radius: 999px; padding: 5px 13px; font-size: 13px; color: var(--texto); }
.adv-fichinha label { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ds-texto-meta); white-space: nowrap; flex: none; }
.adv-fichinha select { border: 0; background: none; font: inherit; font-weight: 600; color: var(--texto);
  padding: 0; margin: 0; height: auto; min-height: 0; max-width: 170px; cursor: pointer; box-shadow: none; }
.adv-fichinha select:focus { outline: 0; }
/* A ficha é uma pastilha, não um campo: a seta entra colada ao texto
   (6px, não 11px) e some a folga de 30px da regra geral, senão abre
   um vão dentro da pastilha e ela deixa de parecer uma coisa só.

   ⚠️ O `border: 0; background: none` de `.adv-fichinha select` acima
   NUNCA pegou: a ficha vive dentro de `.ds-lista`, e tanto
   `.ds-theme .ds-lista select` (ds-screens) quanto
   `.ds-advanced .ds-lista select` são (0,2,1) contra os (0,1,1) dele.
   Resultado: um campo branco com borda desenhado DENTRO da pastilha,
   duas molduras para um valor só. Por isso a anulação é repetida aqui,
   onde a especificidade (0,4,2) ganha — e em longhand, senão o
   shorthand `background` apagaria a seta que a regra geral acabou
   de pôr. */
body.ds-advanced .adv-fichinha select:not([multiple]):not([size]) {
  background-position: right center; background-size: 10px 10px;
  background-color: transparent; border: 0; box-shadow: none;
  height: auto; min-height: 0; padding: 0 16px 0 0; }
body.ds-advanced .adv-fichinha select:not([multiple]):not([size]):focus {
  outline: 0; box-shadow: none; }
body.ds-advanced .adv-fichinha:hover select:not([multiple]):not([size]) { background-image: var(--adv-seta-viva); }
/* prefixada: `.adv-contexto` está no console.html das DUAS edições, e o
   AGENTS.md manda que a casa não mude por causa do produto. */
body.ds-advanced .adv-fichinha:hover { border-color: var(--ds-brand-300); }
/* Foco pelo teclado: a pastilha suprime o anel do campo (anel dentro de
   pastilha são duas molduras de novo), então quem acende é a PASTILHA
   inteira — mesma borda do hover, mais o anel por fora. Sem isto, quem
   navega por Tab passava pelo seletor sem ver onde estava. */
body.ds-advanced .adv-fichinha:focus-within {
  border-color: var(--ds-foco); box-shadow: 0 0 0 2px var(--ds-brand-200); }
body.ds-advanced .adv-fichinha:focus-within select:not([multiple]):not([size]) {
  background-image: var(--adv-seta-viva); }
.adv-fichinha b { font-weight: 600; }
.adv-explicar { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ds-n-300);
  background: var(--card); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; color: var(--ds-texto-sec); cursor: pointer; white-space: nowrap; flex: none;
  align-self: flex-start; }
.adv-explicar:hover { border-color: var(--ds-brand-400); color: var(--ds-brand-700); }
.adv-explicar.ligado { background: var(--ds-brand-50); border-color: var(--ds-brand-300); color: var(--ds-brand-800); }
.adv-explicar .marca { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  flex: none; line-height: 1; }

/* ── painéis de números, um por assunto ─────────────────── */
/* A célula é a UNIDADE da grade: todas com a mesma altura, em qualquer painel.
   Sem isso, um rodapé de duas linhas empurrava a divisória de uma coluna para
   baixo e o conjunto perdia o prumo — três painéis lado a lado terminando em
   alturas diferentes é o que faz a tela parecer remendada. */
.adv-paineis { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px;
  margin-bottom: 14px; align-items: stretch; }
.adv-painel-num { background: var(--card); border: 1px solid var(--borda); border-radius: var(--ds-raio-secao);
  overflow: hidden; display: flex; flex-direction: column; }
.adv-painel-num > header, .adv-painel-lista > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--ds-painel-frio); border-bottom: 1px solid var(--borda); }
.adv-painel-num > header svg, .adv-painel-lista > header svg { width: 15px; height: 15px; color: var(--ds-brand-600); flex: none; }
.adv-painel-num > header h3, .adv-painel-lista > header h3 { margin: 0; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ds-texto-sec); }
.adv-painel-num > header .escopo, .adv-painel-lista > header .escopo { margin-left: auto; font-size: 11.5px; color: var(--ds-texto-meta);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Ação secundária no cabeçalho do painel (hoje só o "mais colunas" das
   Compras). Tem de ler como a contagem ao lado, não como um botão de formulário
   — moldura só quando o ponteiro chega. */
/* Três classes de propósito: `.ds-advanced .ds-lista .leve` (a régua geral dos
   botões discretos) também tem três, e sem empatar com ela o botão continuava
   com a moldura e o fundo branco de formulário dentro do cabeçalho. */
.ds-advanced .adv-painel-lista > header > button.leve { margin-left: 10px; padding: 3px 9px; font-size: 11.5px;
  font-family: inherit; line-height: 1.5; white-space: nowrap; cursor: pointer;
  color: var(--ds-brand-600); background: none; border: 1px solid transparent; border-radius: 999px; }
.ds-advanced .adv-painel-lista > header > button.leve:hover { border-color: var(--borda); background: var(--ds-brand-00); }
.ds-advanced .adv-painel-lista > header > button.leve:focus-visible { outline: 2px solid var(--ds-brand-600); outline-offset: 1px; }
.adv-painel-num .adv-nums { display: grid; flex: 1; grid-auto-rows: minmax(var(--adv-celula, 86px), 1fr); }
.adv-num { text-align: left; background: none; border: 0; padding: 12px 14px;
  font-family: inherit; color: var(--texto); cursor: pointer; display: grid; gap: 2px; position: relative;
  align-content: start; min-height: var(--adv-celula, 86px); }
.adv-nums > .adv-num + .adv-num { border-top: 1px solid var(--borda); }
.adv-num:hover { background: var(--ds-brand-00); }
/* número que não leva a lugar nenhum (o Resultado do mês é leitura, não porta) */
.adv-num.estatico { cursor: default; }
.adv-num.estatico:hover { background: none; }
.adv-painel-num > footer.escopo { padding: 6px 14px; border-top: 1px solid var(--borda);
  background: var(--ds-painel-frio); font-size: 11.5px; color: var(--ds-texto-meta); text-align: right; }
/* Painel dentro de um card (o que não tem título próprio): a moldura é a do
   card. Duas molduras encaixadas, uma dentro da outra, é o que mais suja um
   painel — aqui sobram só as divisórias entre as células. */
.adv-painel-num.sem-titulo { border: 0; border-radius: 0; background: none; }
.adv-painel-num.sem-titulo .adv-nums { border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda); }
.adv-painel-num.sem-titulo > footer.escopo { background: none; padding-right: 0; border-top: 0; }
/* faixa: um painel só ocupando a linha inteira, com as células lado a lado */
.adv-painel-num.faixa { grid-column: 1 / -1; }
/* Na faixa as células quebram de linha quando são muitas (a ficha do cliente
   tem cinco). Divisória por box-shadow em vez de borda: assim a linha aparece
   entre QUALQUER par de vizinhas, e a que sobra na moldura é cortada pelo
   overflow do painel — com borda, a célula que caía para a segunda linha ficava
   sem divisória em cima e com uma solta na lateral. */
/* 170px: com cinco células (a ficha do cliente) a linha ainda fecha inteira em
   vez de deixar uma órfã embaixo e três buracos ao lado. */
.adv-painel-num.faixa .adv-nums { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: -1px; }
.adv-painel-num.faixa .adv-nums > .adv-num { border-top: 0;
  box-shadow: -1px 0 0 var(--borda), 0 -1px 0 var(--borda); }
.adv-num .rot { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ds-texto-sec); }
.adv-num .rot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-n-400); flex: none; }
/* Rótulo de duas linhas ("Negociações abertas") empurrava para baixo só aquele
   número: num monitor largo os cinco rótulos da ficha cabem numa linha e a
   faixa parece certa; num notebook um quebra e a linha de base some. Na faixa
   o rótulo reserva as duas linhas sempre — os números começam todos na mesma
   altura, em qualquer largura. */
.adv-painel-num.faixa .adv-num > .rot { align-items: flex-start; min-height: 2.8em; }
.adv-painel-num.faixa .adv-num > .rot::before { margin-top: .42em; }
.adv-num b { font-size: 23px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums;
  color: var(--ds-titulo); overflow-wrap: anywhere; }
/* Uma linha, sempre: o texto de apoio é o que mais varia de tamanho, e foi ele
   que desalinhou as caixas. O que não couber aqui vive no critério (botão
   "Explicar os números") e no title da célula. */
.adv-num .sub { font-size: 12.5px; color: var(--ds-texto-meta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-num .criterio { display: none; font-size: 12px; line-height: 1.45; color: var(--ds-texto-meta);
  border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 5px; }
.adv-num .ir { position: absolute; top: 12px; right: 12px; font-size: 12px; color: var(--ds-brand-600);
  opacity: 0; transition: opacity .12s; }
.adv-num:hover .ir, .adv-num:focus-visible .ir { opacity: 1; }
/* o critério só aparece com "Explicar os números" ligado */
.adv-explica-ligado .adv-num .criterio,
.adv-explica-ligado .adv-foco-bloco .criterio { display: block; }
.adv-num.ok .rot::before { background: var(--adv-ok, var(--ok, #15803D)); }
.adv-num.ok b { color: var(--adv-ok, var(--ok, #15803D)); }
.adv-num.aviso .rot::before { background: var(--adv-aviso, var(--alerta, #B45309)); }
.adv-num.alerta .rot::before { background: var(--adv-erro, var(--erro, #B91C1C)); }
.adv-num.alerta b { color: var(--adv-erro, var(--erro, #B91C1C)); }
.adv-num.marca .rot::before { background: var(--ds-brand-600); }
/* célula que está com a lista aberta embaixo (o "precisa de você") */
.adv-num.aberto { background: var(--ds-brand-25, var(--ds-brand-00)); box-shadow: -1px 0 0 var(--borda),
  0 -1px 0 var(--borda), inset 0 -2px 0 var(--ds-brand-600); }

/* ── painel de lista: a irmã do painel de números ────────── */
/* Mesma moldura, mesmo cabeçalho, mesmo canto — o que muda é só o corpo.
   A ficha do cliente empilhava cinco blocos com cinco tratamentos (faixa com
   moldura, tabela nua, cartão com borda colorida, tabela larga com rolagem) e
   cada um começava numa régua diferente. Aqui todos passam a começar na
   mesma. */
.adv-painel-lista { background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--ds-raio-secao); overflow: hidden; }
.adv-painel-lista > .adv-painel-corpo > .rolagem { margin: 0; }
/* A tabela não tem moldura própria: a moldura é a do painel. Duas bordas
   encaixadas era o que dava a impressão de "caixa dentro de caixa". */
.adv-painel-lista table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Cabeçalho de tabela sem fundo próprio: com ele, a faixa fria do título do
   painel e a da tabela viravam duas tarjas cinza empilhadas e o título do bloco
   perdia a primazia. São TRÊS classes de propósito: com duas (`.ds-advanced
   .adv-painel-lista th`) a conta empatava com `.ds-dark .ds-advanced th` e, no
   tema escuro, quem vem depois no arquivo ganhava — a tarja voltava só no
   escuro, que é onde ninguém repara antes de publicar. */
.ds-advanced .adv-painel-lista .adv-painel-corpo th { background: none; padding: 9px 14px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ds-texto-meta);
  text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borda); border-radius: 0; }
/* a primeira coluna da tabela larga é sticky: precisa de fundo OPACO, senão o
   resto da tabela passa por baixo dela ao rolar */
.ds-advanced .adv-painel-lista .adv-painel-corpo .rolagem.fixa-1 table th:first-child { background: var(--card); }
.adv-painel-lista td { padding: 11px 14px; border-top: 1px solid var(--borda); border-bottom: 0;
  vertical-align: middle; color: var(--texto); }
/* o HTML destas tabelas não tem <thead>: a 2ª linha é a 1ª de dados, e sem
   isto ela ficaria com borda dupla logo abaixo do cabeçalho */
.adv-painel-lista tr:nth-child(2) td { border-top: 0; }
.adv-painel-lista th.num, .adv-painel-lista td.num { text-align: right;
  font-variant-numeric: tabular-nums; }
/* Coluna de data, valor ou situação não precisa de espaço sobrando: sem isto a
   tabela reparte a largura em partes iguais e o texto longo (a descrição) fica
   espremido enquanto "17/08/2026" nada numa coluna de 300px. */
.adv-painel-lista th.enxuta, .adv-painel-lista td.enxuta { width: 1%; white-space: nowrap; }
.adv-painel-vazio { margin: 0; padding: 13px 14px; font-size: 13px; color: var(--ds-texto-meta); }
/* a tabela de compras traz o próprio "nada aqui" (<p class="vazio">): dentro do
   painel ele tem de ler igual ao dos outros blocos */
.adv-painel-corpo > .vazio { margin: 0; padding: 13px 14px; font-size: 13px; color: var(--ds-texto-meta); }
/* Lista dentro do painel perde o cartão próprio: a barra de situação vira
   faixa interna, e as linhas alinham com as das tabelas vizinhas. */
.adv-painel-corpo .adv-lista { gap: 0; }
.adv-painel-corpo .adv-item { border: 0; border-radius: 0; background: none;
  border-top: 1px solid var(--borda); padding: 11px 14px; }
.adv-painel-corpo .adv-item:first-child { border-top: 0; }
.adv-painel-corpo .adv-item.atrasado { box-shadow: inset 3px 0 0 var(--adv-erro, var(--erro, #B91C1C)); }
.adv-painel-corpo .adv-item.hoje { box-shadow: inset 3px 0 0 var(--adv-aviso, var(--alerta, #B45309)); }
.adv-painel-corpo .adv-item.proximo { box-shadow: inset 3px 0 0 var(--ds-n-300); }
/* Um respiro só entre os blocos da ficha, venham eles do HTML ou do JS. */
.adv-ficha-bloco, #cliente-historico > .adv-painel-lista { margin-bottom: 12px; }
.adv-paineis.adv-ficha-bloco { margin-bottom: 12px; }
#cliente-historico > .adv-painel-lista:last-child { margin-bottom: 0; }
/* Uma régua só para os campos da ficha: as bordas da segunda linha caem
   exatamente sob as da primeira. */
.ds-advanced .adv-ficha-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* A tabela de compras tem 17 colunas e rola na horizontal: o nome do cliente
   quebrado em cinco linhas esticava a linha inteira e desalinhava tudo que
   vinha depois. Uma linha e reticências — o nome completo está no título da
   ficha, logo acima. */
#cliente-compras td { max-width: 220px; }
#cliente-compras td > small { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* ── "precisa de você" e a fila do dia ──────────────────── */
.adv-card-topo { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.adv-card-topo > div:first-child { flex: 1 1 260px; min-width: 0; }
.adv-card-topo .adv-pill { margin-left: auto; flex: none; }
.adv-card-topo .adv-explicar { margin-left: auto; }
.adv-foco-bloco .criterio { display: none; }
.adv-fila-grupo + .adv-fila-grupo { margin-top: 14px; }
.adv-fila-mais { margin-top: 8px; border: 1px dashed var(--ds-n-300); background: none; border-radius: 9px;
  width: 100%; padding: 8px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ds-texto-sec); cursor: pointer; }
.adv-fila-mais:hover { border-color: var(--ds-brand-400); color: var(--ds-brand-700); }

/* ── cadastro que não come a tela ────────────────────────────
   Financeiro e Negociações abriam com um formulário de 700px na
   primeira dobra e a lista lá embaixo — quem abre o Financeiro
   quer ver o que tem a receber, não cadastrar. O formulário vira
   uma linha; clicar abre. É <details> puro: sem JS, e se o CSS
   cair o conteúdo continua acessível. */
.adv-dobra { padding: 0 !important; }
.adv-dobra > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; user-select: none; }
.adv-dobra > summary::-webkit-details-marker { display: none; }
.adv-dobra > summary::marker { content: ""; }
.adv-dobra > summary:hover .titulo b { color: var(--ds-brand-700); }
.adv-dobra > summary .mais { width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; background: var(--ds-brand-50); color: var(--ds-brand-700);
  font-size: 17px; font-weight: 700; line-height: 1; transition: transform .15s; }
.adv-dobra[open] > summary .mais { transform: rotate(45deg); }
.adv-dobra > summary .titulo { min-width: 0; }
.adv-dobra > summary .titulo b { display: block; font-size: var(--ds-tam-h2); font-weight: var(--ds-peso-secao);
  color: var(--ds-titulo); }
.adv-dobra > summary .titulo small { display: block; font-size: 12.5px; color: var(--ds-texto-meta); margin-top: 2px; }
.adv-dobra[open] > summary { border-bottom: 1px solid var(--borda); }
.adv-dobra-corpo { padding: 16px 18px 18px; }
.adv-dobra-corpo > h3:first-child { margin-top: 0; }

/* O período aparecia duas vezes no Início: na barra do topo (que serve a
   todas as telas) e na ficha daqui. A barra some SÓ quando o espelho já foi
   preenchido — a classe é posta por advEspelharPeriodo(); se o JS falhar, o
   seletor do topo continua na tela e ninguém fica sem escolher o mês.
   O display da barra é escrito em estilo inline pelo irPara(): sem
   `!important` esta regra nunca venceria. */
body.adv-periodo-espelhado[data-pagina="hoje"] .topbar #filtro-periodo { display: none !important; }

@media (max-width: 640px) {
  .adv-contexto { align-items: flex-start; }
  .adv-contexto .filtros { width: 100%; }
  .adv-contexto .adv-fichinha { flex: 1 1 100%; justify-content: space-between; }
  .adv-fichinha select { max-width: none; text-align: right; }
  .adv-paineis { grid-template-columns: 1fr; }
  .adv-painel-num.faixa .adv-nums { grid-template-columns: 1fr; }
  /* O recorte não cabe ao lado do título numa tela estreita: em vez de ser
     cortado pela direita ("a vida inteira deste cliente na agênc…"), ele desce
     para a linha de baixo do próprio cabeçalho. */
  .adv-painel-num > header, .adv-painel-lista > header { flex-wrap: wrap; row-gap: 2px; }
  .adv-painel-num > header .escopo, .adv-painel-lista > header .escopo {
    margin-left: 0; flex-basis: 100%; white-space: normal; }
  /* No celular a contagem cai para a linha de baixo; o botão vai junto e
     encosta nela, em vez de abrir uma terceira linha só para ele. */
  .ds-advanced .adv-painel-lista > header > button.leve { margin-left: 0; order: 1; }
  .adv-painel-lista > header .escopo { flex-basis: auto; }
  /* Cinco células empilhadas a 86px são 430px de rolagem só para o resumo da
     ficha: no celular a altura mínima cai para o que o número ocupa. */
  #adv-ficha-resumo { --adv-celula: 62px; }
  .ds-advanced .adv-ficha-grade { grid-template-columns: 1fr; }
}

.adv-lista { display: grid; gap: 6px; }
.adv-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 9px; background: var(--card); }
.adv-item.atrasado { border-left: 4px solid var(--adv-erro); }
.adv-item.hoje { border-left: 4px solid var(--adv-aviso); }
.adv-item.proximo { border-left: 4px solid var(--ds-n-300); }
.adv-item.feito { opacity: .6; }
.adv-item .tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-texto-meta);
  min-width: 78px; flex: none; }
.adv-item .quando { font-size: 12.5px; color: var(--ds-texto-sec); min-width: 92px; flex: none; font-variant-numeric: tabular-nums; }
.adv-item .corpo { flex: 1; min-width: 0; }
.adv-item .corpo b { font-size: 13.5px; color: var(--texto); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-item .corpo small { color: var(--ds-texto-meta); font-size: 12px; }
.adv-item .acoes { display: flex; gap: 6px; flex: none; }

/* A fila mistura assunto curto ("TAREFA") com longo ("RETORNO AO CLIENTE") e
   data com e sem hora. Em flex, cada rótulo empurrava o vizinho: o título de
   cada linha começava num lugar diferente e os botões caíam em degrau. Com
   colunas fixas — assunto · quando · demanda · ação — a vista desce em linha
   reta e a ação alinha sempre pela direita.
   O `:has(> .tipo)` é de propósito: o item do "Precisa de você" não tem
   assunto e continua no flex de antes, sem coluna vazia. */
.adv-item:has(> .tipo) {
  display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: 124px 88px minmax(0, 1fr) minmax(190px, auto);
}
.adv-item:has(> .tipo) > .tipo { min-width: 0; line-height: 1.25; }
.adv-item:has(> .tipo) > .quando { min-width: 0; }
/* Hora embaixo da data em vez de ao lado: mantém a coluna estreita e impede
   que "11/09/2026 10:00" desloque o título só daquela linha. */
.adv-item .quando i { display: block; font-style: normal; font-size: 11.5px; color: var(--ds-texto-meta); }
.adv-item .acoes { justify-content: flex-end; }
/* Botão de largura igual: "Feito" e "Concluir" na mesma régua da direita. */
.adv-item .acoes > * { min-width: 92px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Link de ação ("Site da companhia") tem que parecer botão: sublinhado no meio
   de botões faz a mesma coluna ter dois pesos visuais. */
.adv-item .acoes > a { text-decoration: none; }
.adv-item .valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.adv-secao-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ds-texto-sec); margin: 14px 0 8px; }
.adv-secao-titulo .cont { background: var(--adv-neutro-fundo); color: var(--adv-neutro); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.adv-secao-titulo.atrasado .cont { background: var(--adv-erro-fundo); color: var(--adv-erro); }
.adv-secao-titulo.hoje .cont { background: var(--adv-aviso-fundo); color: var(--adv-aviso); }

.adv-pill { display: inline-block; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.adv-pill.ok { background: var(--adv-ok-fundo); color: var(--adv-ok); }
.adv-pill.aviso { background: var(--adv-aviso-fundo); color: var(--adv-aviso); }
.adv-pill.erro { background: var(--adv-erro-fundo); color: var(--adv-erro); }
.adv-pill.neutro { background: var(--adv-neutro-fundo); color: var(--adv-neutro); }
.adv-pill.info { background: var(--ds-brand-50); color: var(--ds-brand-800); }

.adv-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; flex-wrap: wrap; }
.adv-aba { border: 0; background: none; padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ds-texto-meta); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.adv-aba:hover { color: var(--texto); }
.adv-aba.ativa { color: var(--ds-brand-700); border-bottom-color: var(--ds-brand-600); }
.adv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.adv-chip { border: 1px solid var(--ds-n-300); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 12.5px;
  font-weight: 600; color: var(--ds-texto-sec); cursor: pointer; font-family: inherit; }
.adv-chip.ativa { background: var(--ds-brand-600); border-color: var(--ds-brand-600); color: #fff; }
.adv-chip .cont { opacity: .75; margin-left: 4px; }
.adv-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; align-items: end; }
.adv-form .larga { grid-column: 1 / -1; }
.adv-form-acoes { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.adv-duplo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.adv-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.adv-resumo div { border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; background: var(--painel); }
.adv-resumo span { display: block; font-size: 12px; color: var(--ds-texto-meta); }
.adv-resumo b { font-size: 18px; font-variant-numeric: tabular-nums; }
.adv-criterio { font-size: 12.5px; color: var(--ds-texto-meta); line-height: 1.5; margin: 4px 0 0; }
.adv-linha-total td { font-weight: 700; background: var(--painel); }
/* 132px já cortava "Proposta enviada"; com os 30px que a seta pede
   à direita, o rótulo mais longo precisa de 172px para caber inteiro. */
.adv-etapa-select { min-width: 172px; }

/* logo: prévia e enquadramento */
.adv-logo { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
.adv-logo-previa { width: 160px; height: 160px; border: 1px solid var(--borda); border-radius: 12px; background:
  repeating-conic-gradient(var(--ds-n-100) 0 25%, var(--card) 0 50%) 0 0 / 20px 20px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.adv-logo-previa img, .adv-logo-previa canvas { max-width: 100%; max-height: 100%; display: block; }
.adv-logo-previa .mono { width: 96px; height: 96px; border-radius: 16px; background: var(--ds-grad-marca); color: #fff;
  font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.adv-logo-ajustes { display: none; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-size: 13px; }
.adv-logo-ajustes.ativo { display: flex; }
.adv-logo-ajustes input[type=range] { width: 140px; }
.adv-logo small { display: block; color: var(--ds-texto-meta); font-size: 12px; margin-top: 6px; }

/* alerta em faixa (restauração, licença) */
.adv-aviso { padding: 10px 12px; border-radius: 9px; font-size: 13px; margin: 8px 0; }
.adv-aviso.perigo { background: var(--adv-erro-fundo); color: var(--adv-erro); border: 1px solid var(--adv-erro); }
.adv-aviso.atencao { background: var(--adv-aviso-fundo); color: var(--adv-aviso); }
.adv-aviso.ok { background: var(--adv-ok-fundo); color: var(--adv-ok); }

/* ── celular ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ds-advanced main { padding: 14px; }
  .adv-duplo { grid-template-columns: 1fr; }
  .adv-logo { grid-template-columns: 1fr; }
  .adv-item { flex-wrap: wrap; }
  .adv-item .quando { min-width: 0; }
  .adv-item .acoes { width: 100%; justify-content: flex-end; }
  /* No celular não cabem quatro colunas: assunto e data dividem a primeira
     linha, demanda e ação ocupam a largura inteira. */
  .adv-item:has(> .tipo) { grid-template-columns: 1fr auto; row-gap: 6px; }
  .adv-item:has(> .tipo) > .tipo { grid-column: 1; }
  .adv-item:has(> .tipo) > .quando { grid-column: 2; text-align: right; }
  .adv-item:has(> .tipo) > .corpo { grid-column: 1 / -1; }
  .adv-item:has(> .tipo) > .acoes { grid-column: 1 / -1; }
  .adv-kpis { grid-template-columns: 1fr 1fr; }
  .ds-advanced .adv-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Tipo + data cabem lado a lado; o texto da linha, não. Numa tela de 390px a
     soma dos três dava 341px numa caixa de 318 e o nome do cliente saía cortado
     pela direita — com o botão de ação junto. O corpo passa a ocupar a linha
     inteira e o título quebra em vez de ser cortado: no celular, ler o nome do
     cliente vale mais que manter tudo numa linha só. */
  .adv-item .corpo { flex: 1 0 100%; }
  .adv-item .corpo b { white-space: normal; overflow: visible; }
  .adv-item .acoes { justify-content: flex-start; flex-wrap: wrap; }
  .adv-item .acoes > * { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .adv-kpis { grid-template-columns: 1fr; }
}
@media print { .ds-advanced aside, .ds-advanced .topbar { display: none; } }

/* ── Assinatura do CRM ─────────────────────────────────────────
   A tela dizia o estado e pedia uma chave, sem explicar o que a
   assinatura faz. Quem compra na Hotmart nunca viu "licença" numa
   ferramenta antes, e um campo pedindo chave sem contexto assusta
   mais do que informa: as quatro perguntas ficam escritas na tela. */
.adv-assinatura-estado {
  border: 1px solid var(--ds-borda, #e2e8f0); border-left-width: 4px;
  border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.adv-assinatura-estado > b { font-size: 1.02rem; }
.adv-assinatura-estado .msg { font-size: .84rem; opacity: .8; }
.adv-assinatura-estado.ok   { border-left-color: #16a34a; }
.adv-assinatura-estado.aviso { border-left-color: #d97706; }
.adv-assinatura-estado.ruim { border-left-color: #dc2626; }
.adv-assinatura-estado.ruim > b { color: #b91c1c; }
.adv-assinatura-estado.aviso > b { color: #b45309; }
.adv-assinatura-estado dl {
  display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 4px 0 0;
}
.adv-assinatura-estado dl div { display: flex; flex-direction: column; }
.adv-assinatura-estado dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6;
  font-weight: 700;
}
.adv-assinatura-estado dd { margin: 0; font-size: .9rem; font-weight: 600; }
.adv-assinatura-explica {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px; margin: 4px 0 16px;
}
.adv-assinatura-explica > div { display: flex; flex-direction: column; gap: 3px; }
.adv-assinatura-explica b { font-size: .88rem; }
.adv-assinatura-explica span { font-size: .84rem; opacity: .82; line-height: 1.45; }

/* ── Tipo de cliente: escolher clicando, nunca digitando ───────
   Três botões e um "não classificado" que também é botão — porque
   deixar em branco precisa ser uma escolha visível, não o efeito
   de não ter mexido em nada. */
.adv-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.adv-tipos button {
  border: 1px solid var(--ds-borda, #e2e8f0); border-radius: 999px; background: transparent;
  padding: 6px 13px; font-size: .84rem; cursor: pointer; color: inherit;
}
.adv-tipos button:hover { border-color: var(--ds-brand-400, #7D87DC); }
.adv-tipos button.ativo {
  border-color: var(--ds-brand-600, #3F49A8); color: var(--ds-brand-600, #3F49A8);
  background: color-mix(in srgb, var(--ds-brand-600, #3F49A8) 12%, transparent); font-weight: 600;
}
.adv-tipos-filtro button b { font-weight: 700; opacity: .65; margin-left: 3px; }
.adv-selo-tipo {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.adv-selo-tipo.direto { color: #0369a1; }
.adv-selo-tipo.parceiro { color: #7c3aed; }
.adv-selo-tipo.balcao { color: #b45309; }
/* `sem-tipo`, não `vazio`: `.vazio` é o estado-vazio do design system e
   traz padding de 28px — o selo virava um oval de 78px de altura. */
.adv-selo-tipo.sem-tipo { color: var(--ds-texto-fraco, #64748B); border-style: dashed; font-weight: 500; }

/* ── O que se repete ──────────────────────────────────────────
   O interruptor fica DENTRO do formulário que a pessoa já está
   preenchendo: ela acabou de escrever "Internet" e R$ 99,90, e a
   pergunta natural naquele instante é "isso se repete?". Uma tela
   separada de "recorrências" obrigaria a digitar tudo de novo. */
.adv-repetir {
  border: 1px dashed var(--ds-borda, #e2e8f0); border-radius: 12px;
  padding: 10px 14px; margin: 4px 0 12px;
}
.adv-repetir.ligado {
  border-style: solid; border-color: var(--ds-brand-400, #7D87DC);
  background: color-mix(in srgb, var(--ds-brand-600, #3F49A8) 5%, transparent);
}
.adv-repetir-chave { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.adv-repetir-chave input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.adv-repetir-chave span { display: flex; flex-direction: column; }
.adv-repetir-chave small { opacity: .7; font-size: .78rem; }
.adv-repetir-campos { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
/* `display:flex` vence o [hidden] do navegador: sem esta linha, os campos da
   recorrência ficavam na tela mesmo com a chave desligada — 250px de formulário
   que ninguém pediu, em toda cobrança e toda conta a pagar. */
.adv-repetir-campos[hidden] { display: none; }
.adv-repetir-campos > label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  opacity: .65; font-weight: 700; margin-top: 8px;
}
.adv-repetir-resumo { margin: 10px 0 0; font-weight: 600; opacity: .9; }
.adv-vezes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adv-vezes button {
  border: 1px solid var(--ds-borda, #e2e8f0); border-radius: 999px; background: transparent;
  padding: 6px 14px; cursor: pointer; color: inherit; font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.adv-vezes button.ativo {
  border-color: var(--ds-brand-600, #3F49A8); color: var(--ds-brand-600, #3F49A8);
  background: color-mix(in srgb, var(--ds-brand-600, #3F49A8) 12%, transparent); font-weight: 700;
}
.adv-vezes input { width: 84px; }
.adv-rec-linha {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--ds-borda, #e2e8f0); border-radius: 10px;
  margin-bottom: 6px;
}
.adv-rec-linha .corpo b { display: block; }
.adv-rec-linha .corpo small { display: block; opacity: .72; font-size: .78rem; }
.adv-rec-linha .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adv-rec-linha .acoes { display: flex; gap: 5px; flex-wrap: wrap; }
.adv-rec-linha.encerrada { opacity: .6; border-style: dashed; }
@media (max-width: 640px) {
  .adv-rec-linha { grid-template-columns: 1fr auto; }
  .adv-rec-linha .acoes { grid-column: 1 / -1; }
}

/* ── Aviso de alteração de voo ─────────────────────────────────
   Fica acima de tudo, e some quando não há nenhum. Voo cancelado
   é a única coisa neste CRM que precisa ser vista HOJE — moldura
   permanente vira exatamente aquilo que o olho aprende a ignorar. */
.adv-voo-alerta {
  border-left: 4px solid var(--adv-erro);
  background: color-mix(in srgb, var(--adv-erro) 6%, var(--card, #fff));
}
.adv-voo-alerta h2 { color: var(--adv-erro); }
.adv-voo-item {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--ds-borda, #E3E6F0);
  border-radius: 10px; margin-top: 8px; background: var(--card, #fff);
}
.adv-voo-item .corpo b { display: block; font-size: .95rem; }
.adv-voo-item .corpo small { display: block; opacity: .75; font-size: .78rem; }
.adv-voo-item .corpo .trecho {
  margin-top: 5px; padding-left: 8px; border-left: 2px solid var(--ds-borda, #E3E6F0);
  font-style: italic; opacity: .65;
}
.adv-voo-item .acoes { display: flex; flex-direction: column; gap: 5px; }
.adv-voo-item.cancelamento { border-left: 3px solid var(--adv-erro); }
.adv-voo-item.alteracao { border-left: 3px solid var(--adv-aviso); }
.adv-voo-item.atraso, .adv-voo-item.antecipacao { border-left: 3px solid var(--adv-neutro); }
@media (max-width: 640px) {
  .adv-voo-item { grid-template-columns: 1fr; }
  .adv-voo-item .acoes { flex-direction: row; flex-wrap: wrap; }
}

/* ── Trazer o que a agência já tem ─────────────────────────────
   O primeiro card da tela de dados, e o mais importante do
   primeiro dia: é ele que transforma um CRM vazio num CRM com o
   histórico da agência dentro. Por isso ganha destaque de marca,
   e não o cinza dos cards de manutenção. */
.adv-trazer { border-left: 4px solid var(--ds-brand-600); }
.adv-trazer-envio {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px;
}
.adv-trazer-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0;
}
.adv-trazer-numeros > div {
  border: 1px solid var(--ds-borda, #E3E6F0); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; background: var(--card, #fff);
}
.adv-trazer-numeros span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  opacity: .6; font-weight: 700;
}
.adv-trazer-numeros b { font-size: 1.18rem; font-variant-numeric: tabular-nums; }
.adv-trazer-numeros small { font-size: .74rem; opacity: .7; }
.adv-trazer-titulo { margin: 18px 0 4px; font-size: .95rem; }

/* Barras por mês, desenhadas com div: o produto não carrega biblioteca de
   gráfico, e "em que meses eu vendi" não precisa de uma. */
.adv-trazer-meses {
  display: flex; gap: 8px; align-items: flex-end; overflow-x: auto;
  padding: 10px 2px 4px; margin-bottom: 6px;
}
.adv-trazer-meses .mes {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 62px;
}
.adv-trazer-meses .barra {
  width: 30px; height: 90px; display: flex; align-items: flex-end;
  background: var(--ds-n-100, #F1F5F9); border-radius: 6px; overflow: hidden;
}
.adv-trazer-meses .barra i {
  width: 100%; background: var(--ds-brand-600); border-radius: 6px 6px 0 0;
}
.adv-trazer-meses .rot { font-size: .7rem; opacity: .7; font-variant-numeric: tabular-nums; }
.adv-trazer-meses .val { font-size: .68rem; opacity: .55; font-variant-numeric: tabular-nums; }

.adv-trazer-sumidos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px;
}
.adv-trazer-sumidos > div {
  border: 1px solid var(--ds-borda, #E3E6F0); border-radius: 9px; padding: 8px 11px;
}
.adv-trazer-sumidos b { display: block; font-size: .9rem; }
.adv-trazer-sumidos small { display: block; opacity: .7; font-size: .76rem; }
.adv-trazer-aviso {
  border-left: 3px solid var(--adv-aviso); padding-left: 10px; margin: 12px 0;
}
.adv-trazer-ignoradas { margin: 12px 0; font-size: .85rem; }
.adv-trazer-ignoradas summary { cursor: pointer; opacity: .8; }
.adv-trazer-ignoradas ul { margin: 6px 0 0 18px; opacity: .78; font-size: .82rem; }

/* ── Precisa de você: alertas de omissão e gatilhos comerciais ──
   Grade que desce para uma coluna no celular sem cortar texto — o
   erro que o concorrente comete é justamente esse: barra de ação e
   título que somem na borda da tela de 390px.                    */
.adv-foco { display: grid; gap: 10px;
  /* auto-FILL, não auto-fit: com um alerta só, o auto-fit esticaria o
     cartão pela largura inteira da tela e o número pareceria um banner */
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.adv-foco-bloco { text-align: left; background: var(--card); border: 1px solid var(--borda); border-left: 4px solid var(--ds-n-300);
  border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  font-family: inherit; color: var(--texto); }
.adv-foco-bloco:hover { border-color: var(--ds-brand-400); }
.adv-foco-bloco.aberto { border-color: var(--ds-brand-600); box-shadow: 0 0 0 2px var(--adv-neutro-fundo); }
.adv-foco-bloco .rot { font-size: 12.5px; font-weight: 600; color: var(--ds-texto-sec); text-transform: uppercase; letter-spacing: .04em; }
.adv-foco-bloco b { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adv-foco-bloco .sub { font-size: 12.5px; color: var(--ds-texto-meta); }
.adv-foco-bloco .criterio { font-size: 12px; color: var(--ds-texto-meta); line-height: 1.4;
  border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 6px; }
.adv-foco-bloco.alerta { border-left-color: var(--adv-erro); }
.adv-foco-bloco.alerta b { color: var(--adv-erro); }
.adv-foco-bloco.aviso { border-left-color: var(--adv-aviso); }
.adv-foco-bloco.aviso b { color: var(--adv-aviso); }
.adv-foco-bloco.oportunidade { border-left-color: var(--adv-ok); }
.adv-foco-bloco.oportunidade b { color: var(--adv-ok); }
.adv-foco-limpo { color: var(--adv-ok); font-weight: 600; margin: 4px 0 0; }
.adv-foco-detalhe { margin-top: 12px; border-top: 1px solid var(--borda); padding-top: 12px; }
.adv-foco-detalhe .dica { margin-bottom: 8px; }
.adv-sem-dado { color: var(--adv-aviso); font-size: 12.5px; font-weight: 600; cursor: help; }

/* ── Como está o funil ──────────────────────────────────────── */
.adv-funil-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.adv-funil-numeros > div { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.adv-funil-numeros .rot { display: block; font-size: 12.5px; font-weight: 600; color: var(--ds-texto-sec);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.adv-funil-numeros b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adv-funil-numeros .sub { display: block; font-size: 12.5px; color: var(--ds-texto-meta); line-height: 1.45; margin-top: 3px; }
.adv-funil-etapas { display: grid; gap: 8px; }
.adv-funil-etapa { display: grid; grid-template-columns: 130px 1fr 42px 96px; align-items: center; gap: 10px; }
.adv-funil-etapa .nome { font-size: 13px; color: var(--ds-texto-sec); font-weight: 600; }
.adv-funil-etapa .barra { height: 10px; border-radius: 5px; background: var(--ds-n-200); overflow: hidden; }
.adv-funil-etapa .barra i { display: block; height: 100%; background: var(--ds-grad-marca); min-width: 2px; }
.adv-funil-etapa .num { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.adv-funil-etapa .val { font-size: 12.5px; color: var(--ds-texto-meta); text-align: right; font-variant-numeric: tabular-nums; }
.adv-funil-titulo { font-size: 14px; margin: 18px 0 8px; color: var(--texto); }
.adv-funil-motivos { display: grid; gap: 6px; }
.adv-funil-motivo { display: grid; grid-template-columns: 1fr 52px 96px; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--borda); border-left: 4px solid var(--adv-erro); border-radius: 9px; background: var(--card); }
.adv-funil-motivo .nome { font-size: 13.5px; }
.adv-funil-motivo .num, .adv-funil-motivo .val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }
.adv-funil-motivo .val { color: var(--ds-texto-meta); }
@media (max-width: 560px) {
  /* No celular a grade de 4 colunas espreme o nome da etapa até sumir; o valor
     desce para a linha de baixo e o texto continua legível. */
  .adv-funil-etapa { grid-template-columns: 1fr 46px; grid-template-areas: "nome num" "barra barra" "val val"; }
  .adv-funil-etapa .nome { grid-area: nome; }
  .adv-funil-etapa .num { grid-area: num; }
  .adv-funil-etapa .barra { grid-area: barra; }
  .adv-funil-etapa .val { grid-area: val; text-align: left; }
  .adv-funil-motivo { grid-template-columns: 1fr 52px; grid-template-areas: "nome num" "val val"; }
  .adv-funil-motivo .nome { grid-area: nome; }
  .adv-funil-motivo .num { grid-area: num; }
  .adv-funil-motivo .val { grid-area: val; text-align: left; }
}

/* ── O que o sistema faz sozinho ────────────────────────────── */
.adv-regra { border: 1px solid var(--borda); border-left: 4px solid var(--ds-n-300); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.adv-regra.ligada { border-left-color: var(--adv-ok); }
.adv-regra .titulo { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.adv-regra .titulo b { font-size: 14px; }
.adv-regra .porque { color: var(--ds-texto-meta); font-size: 12.5px; line-height: 1.5; margin: 6px 0 8px; }
.adv-regra .prazo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ds-texto-sec); }
.adv-regra .prazo input { width: 84px; }
.adv-modelo { margin-bottom: 12px; }
.adv-modelo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.adv-modelo textarea { width: 100%; font-family: inherit; font-size: 13px; line-height: 1.5; }

/* ── Metas do mês no Início ─────────────────────────────────── */
.adv-meta { border: 1px solid var(--borda); border-left: 4px solid var(--ds-n-300); border-radius: 10px; padding: 10px 14px; background: var(--card); }
.adv-meta.perto { border-left-color: var(--adv-aviso); }
.adv-meta.batida { border-left-color: var(--adv-ok); }
.adv-meta .topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.adv-meta .topo b { font-size: 14px; }
.adv-meta .quem { font-size: 12px; color: var(--ds-texto-meta); }
.adv-meta small { display: block; margin-top: 6px; color: var(--ds-texto-meta); font-size: 12.5px; }
.adv-meta.batida small { color: var(--adv-ok); font-weight: 600; }

/* ── filtro por vendedor no Início ──────────────────────────── */
.adv-filtro-vendedor { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; color: var(--ds-texto-sec); }
.adv-filtro-vendedor select { max-width: 260px; }
.adv-origem-vazia .nome { color: var(--adv-aviso); font-style: italic; }

/* ══ FAIXA DE EMBARQUE (Início do Advanced) ═══════════════════
   Um CRM de viagens tem de se anunciar na primeira dobra. Antes
   dela a tela abria com dois cabeçalhos empilhados — o h1 "Início"
   com uma frase explicativa e, logo abaixo, a saudação com os
   filtros — que juntos comiam ~260px sem dizer nada que só este
   sistema saberia dizer.
   A faixa junta os dois num bloco só e usa o espaço para o que a
   agência abre o CRM para ver: quem voa nos próximos sete dias.
   Escolhas que sustentam isso:
   · índigo da marca no fundo, com as rotas desenhadas em traço
     quase invisível — textura, não ilustração: foto de praia
     envelhece em um mês e rouba a leitura dos números;
   · os cartões são CLAROS sobre o índigo. O contraste põe o voo
     acima da saudação e dos filtros, que é a ordem de importância;
   · o âmbar (as milhas, na paleta do produto) marca só quem
     embarca HOJE. Acento que aparece sempre deixa de ser acento.
   ════════════════════════════════════════════════════════════ */
body.ds-advanced .adv-hero {
  position: relative; overflow: hidden;
  margin: 0 0 var(--ds-bloco-gap); padding: 18px 20px 16px;
  border-radius: var(--ds-raio-secao);
  background:
    /* as rotas: dois arcos pontilhados saindo do canto, como num mapa de voos */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220' fill='none'><path d='M-20 190 C 120 60, 300 40, 540 120' stroke='white' stroke-opacity='.16' stroke-width='1.4' stroke-dasharray='5 7'/><path d='M-20 220 C 160 150, 320 130, 540 40' stroke='white' stroke-opacity='.10' stroke-width='1.2' stroke-dasharray='4 8'/><circle cx='118' cy='105' r='2.6' fill='white' fill-opacity='.22'/><circle cx='372' cy='72' r='2.2' fill='white' fill-opacity='.18'/><circle cx='268' cy='142' r='2' fill='white' fill-opacity='.14'/></svg>") right -40px top -20px / 620px auto no-repeat,
    linear-gradient(118deg, #232859 0%, #3F49A8 62%, #4E59C4 100%);
  color: #fff;
}
body.ds-advanced .adv-hero-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
body.ds-advanced .adv-hero .quem { flex: 1 1 240px; min-width: 200px; }
body.ds-advanced .adv-hero .quem b {
  display: block; font-size: 21px; font-weight: 650; color: #fff; letter-spacing: -.01em;
}
body.ds-advanced .adv-hero .quem > span {
  display: block; font-size: 12.5px; color: rgba(255,255,255,.74); margin-top: 3px;
}
/* a hora da última leitura: clara, mas sem competir com a saudação */
body.ds-advanced .adv-hero .quem span i { font-style: normal; color: #BFE8CF; font-weight: 600; }
body.ds-advanced .adv-hero .filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Os controles viram vidro: a mesma ficha de antes, legível sobre o índigo.
   Sem isto o seletor ficava branco sobre branco e a seta cinza sumia. */
body.ds-advanced .adv-hero .adv-fichinha {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); color: #fff;
}
body.ds-advanced .adv-hero .adv-fichinha label { color: rgba(255,255,255,.72); }
body.ds-advanced .adv-hero .adv-fichinha select:not([multiple]):not([size]) {
  color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
}
/* o menu nativo herda a cor do texto e ficaria branco sobre branco ao abrir */
body.ds-advanced .adv-hero .adv-fichinha select option { color: var(--ds-texto); background: var(--card); }
body.ds-advanced .adv-hero .adv-fichinha:hover { border-color: rgba(255,255,255,.5); }
body.ds-advanced .adv-hero .adv-fichinha:hover select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
}
body.ds-advanced .adv-hero .adv-explicar {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.92);
}
body.ds-advanced .adv-hero .adv-explicar:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }
body.ds-advanced .adv-hero .adv-explicar.ligado { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.6); color: #fff; }

/* ── cabeçalho da faixa de voos ─────────────────────────────── */
body.ds-advanced .adv-embarques { margin-top: 16px; }
body.ds-advanced .adv-emb-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
body.ds-advanced .adv-emb-cab h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
body.ds-advanced .adv-emb-cab > span { font-size: 12.5px; color: rgba(255,255,255,.62); }
body.ds-advanced .adv-emb-cab > span b { color: #F2C879; font-weight: 700; }
body.ds-advanced .adv-emb-tudo {
  margin-left: auto; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.34);
}
body.ds-advanced .adv-emb-tudo:hover { color: #fff; border-bottom-color: #fff; }

/* ── a fila de cartões ──────────────────────────────────────── */
body.ds-advanced .adv-emb-fila {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximate; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.3) transparent;
}
body.ds-advanced .adv-emb-fila::-webkit-scrollbar { height: 6px; }
body.ds-advanced .adv-emb-fila::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }

body.ds-advanced .adv-emb {
  flex: 0 0 236px; scroll-snap-align: start; cursor: pointer;
  background: var(--card); color: var(--ds-texto);
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 11px 13px 12px;
  box-shadow: 0 6px 18px rgba(16,18,45,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
body.ds-advanced .adv-emb:hover,
body.ds-advanced .adv-emb:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,18,45,.26); outline: 0;
}
body.ds-advanced .adv-emb:focus-visible { border-color: #fff; }
body.ds-advanced .adv-emb header {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
body.ds-advanced .adv-emb-tipo {
  background: var(--ds-brand-50); color: var(--ds-brand-700);
  border-radius: 999px; padding: 2px 7px;
}
body.ds-advanced .adv-emb-quando { color: var(--ds-texto-meta); letter-spacing: .04em; }
body.ds-advanced .adv-emb-cia { margin-left: auto; color: var(--ds-texto-sec); letter-spacing: .04em; }

/* quem voa hoje: a única linha do dia que não dá para empurrar para amanhã */
body.ds-advanced .adv-emb.hoje { border-color: var(--adv-milhas); }
body.ds-advanced .adv-emb.hoje .adv-emb-tipo { background: var(--adv-milhas-fundo); color: var(--adv-milhas); }
body.ds-advanced .adv-emb.hoje .adv-emb-quando { color: var(--adv-milhas); font-weight: 700; }

/* ── a rota: o desenho que diz "isto é uma passagem" ────────── */
body.ds-advanced .adv-emb-rota { display: flex; align-items: center; gap: 8px; }
body.ds-advanced .adv-emb-rota .ponta { min-width: 0; }
body.ds-advanced .adv-emb-rota .ponta.fim { text-align: right; }
body.ds-advanced .adv-emb-rota .ponta b {
  display: block; font-size: 20px; font-weight: 700; letter-spacing: .04em;
  color: var(--ds-titulo); line-height: 1.1;
}
body.ds-advanced .adv-emb-rota .ponta small {
  display: block; font-size: 11px; color: var(--ds-texto-meta); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px;
}
body.ds-advanced .adv-emb-rota .trilho {
  flex: 1; display: flex; align-items: center; gap: 3px; color: var(--ds-brand-400); margin-bottom: 12px;
}
body.ds-advanced .adv-emb-rota .trilho .linha {
  flex: 1; height: 0; border-top: 1.5px dotted var(--ds-brand-300);
}
body.ds-advanced .adv-emb-rota .trilho svg { width: 14px; height: 14px; flex: none; transform: rotate(90deg); }
body.ds-advanced .adv-emb .escala {
  display: block; font-size: 11px; color: var(--ds-texto-meta); margin-top: 2px;
}
body.ds-advanced .adv-emb footer {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--borda);
}
body.ds-advanced .adv-emb-quem {
  display: block; font-size: 13px; font-weight: 600; color: var(--ds-titulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ds-advanced .adv-emb-voo { display: block; font-size: 11.5px; color: var(--ds-texto-meta); margin-top: 2px; }
body.ds-advanced .adv-emb-voo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  letter-spacing: .04em; color: var(--ds-texto-sec);
}

/* ── o localizador: dado de copiar, não de ler ───────────────────
   Ele sai da tela o tempo todo (site da companhia, WhatsApp do passageiro,
   busca do CRM) e, dentro de um cartão que inteiro é clicável, não dava para
   selecionar à mão. Vira botão — mas botão discreto: quem manda no cartão é o
   "Fazer o check-in", e mais um retângulo desenhado ao lado disputaria o olho
   com a ação que tem prazo. O contorno só aparece na aproximação. */
body.ds-advanced .adv-emb-pnr {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px;
  margin: 0 0 0 1px; padding: 1px 5px; cursor: pointer; font: inherit;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--ds-texto-sec); transition: background .12s ease, border-color .12s ease, color .12s ease;
}
body.ds-advanced .adv-emb-pnr code { color: inherit; }
body.ds-advanced .adv-emb-pnr svg { width: 12px; height: 12px; flex: none; opacity: .6; }
body.ds-advanced .adv-emb-pnr:hover {
  background: var(--ds-brand-25); border-color: var(--ds-brand-200); color: var(--ds-brand-700);
}
body.ds-advanced .adv-emb-pnr:hover svg { opacity: 1; }
body.ds-advanced .adv-emb-pnr:focus-visible {
  outline: 2px solid var(--ds-brand-400); outline-offset: 1px;
}
/* copiado: a confirmação acontece no próprio botão, onde o olho já está — o
   toast da casa continua aparecendo, mas some no canto e quem copia vários
   PNRs seguidos precisa saber QUAL já foi */
body.ds-advanced .adv-emb-pnr .ico-ok,
body.ds-advanced .adv-emb-pnr.copiou .ico-copiar { display: none; }
body.ds-advanced .adv-emb-pnr.copiou .ico-ok { display: block; opacity: 1; }
body.ds-advanced .adv-emb-pnr.copiou {
  /* as duas linhas de cada par são de propósito: onde color-mix não existe,
     o navegador descarta a segunda e fica com a cor cheia */
  color: var(--ok); border-color: var(--ok); background: none;
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

body.ds-advanced .adv-emb-acoes { margin-top: 9px; }
body.ds-advanced .adv-emb-acao {
  display: inline-block; text-decoration: none; font-size: 12px; font-weight: 600;
  border-radius: 7px; padding: 5px 10px; border: 1px solid var(--ds-brand-300);
  color: var(--ds-brand-700); background: var(--ds-brand-25);
}
body.ds-advanced .adv-emb-acao:hover { background: var(--ds-brand-50); border-color: var(--ds-brand-400); }
/* check-in ABERTO — a razão de esses cartões virem na frente da fila. O botão
   é cheio para a leitura bater com a ordem: o que está na frente é o que tem
   prazo correndo. Os demais cartões seguem com o botão de contorno. */
body.ds-advanced .adv-emb-acao.forte {
  background: var(--ds-brand-600, #4C56C0); border-color: var(--ds-brand-600, #4C56C0);
  color: #fff; box-shadow: 0 2px 8px rgba(76,86,192,.28);
}
body.ds-advanced .adv-emb-acao.forte:hover {
  background: var(--ds-brand-700, #3C45A6); border-color: var(--ds-brand-700, #3C45A6);
}
body.ds-advanced .adv-emb-espera { font-size: 11.5px; color: var(--ds-texto-meta); }
body.ds-advanced .adv-emb-vazio {
  margin-top: 14px; border: 1px dashed rgba(255,255,255,.3); border-radius: 12px;
  padding: 14px 16px; background: rgba(255,255,255,.07);
}
body.ds-advanced .adv-emb-vazio b { display: block; font-size: 13.5px; color: #fff; }
body.ds-advanced .adv-emb-vazio span { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 3px; }

/* ── atalhos: começar algo sem sair do Início ───────────────── */
body.ds-advanced .adv-hero-atalhos {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid rgba(255,255,255,.16);
}
body.ds-advanced .adv-atalho {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 6px 13px 6px 11px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: #fff;
  transition: background .12s ease, border-color .12s ease;
}
body.ds-advanced .adv-atalho:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.46); }
body.ds-advanced .adv-atalho svg { width: 15px; height: 15px; flex: none; opacity: .9; }

/* O cabeçalho genérico da tela é redundante AQUI e só aqui: a faixa já traz
   a saudação, o período e o dia. As ferramentas do topo (busca, limpar tela)
   continuam — só encostam à direita agora que o título saiu. */
body.ds-advanced[data-pagina="hoje"] .topo > div:not(.topbar) { display: none; }
body.ds-advanced[data-pagina="hoje"] .topo {
  justify-content: flex-end; align-items: center; padding-top: 10px; padding-bottom: 10px;
  min-height: 0;
}

@media (max-width: 720px) {
  body.ds-advanced .adv-hero { padding: 15px 15px 14px; }
  body.ds-advanced .adv-hero .quem b { font-size: 19px; }
  body.ds-advanced .adv-hero .filtros { width: 100%; }
  body.ds-advanced .adv-hero .adv-fichinha { flex: 1 1 100%; justify-content: space-between; }
  /* o cartão passa a ocupar quase a tela inteira: dois pela metade na mesma
     largura não deixam ler nem um */
  body.ds-advanced .adv-emb { flex-basis: 84%; }
  /* no dedo, o localizador precisa de área: com o padding do desktop a pessoa
     acerta o cartão (que abre o bilhete) em vez do botão */
  body.ds-advanced .adv-emb-pnr { padding: 5px 8px; border-color: var(--borda); }
  body.ds-advanced .adv-atalho { flex: 1 1 auto; justify-content: center; }
}

/* ── a faixa no tema escuro ─────────────────────────────────────
   No claro a hierarquia vem do contraste: cartão branco sobre índigo. No
   escuro o cartão é escuro (#222534) e, contra o mesmo índigo médio, os dois
   encostam — a faixa passava a parecer mais acesa que os voos, invertendo a
   ordem de leitura. Aqui o fundo desce para o índigo profundo (a mesma cor,
   levada ao escuro, como o resto do tema faz) e a borda do cartão sobe. */
.ds-dark body.ds-advanced .adv-hero {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220' fill='none'><path d='M-20 190 C 120 60, 300 40, 540 120' stroke='white' stroke-opacity='.13' stroke-width='1.4' stroke-dasharray='5 7'/><path d='M-20 220 C 160 150, 320 130, 540 40' stroke='white' stroke-opacity='.08' stroke-width='1.2' stroke-dasharray='4 8'/><circle cx='118' cy='105' r='2.6' fill='white' fill-opacity='.18'/><circle cx='372' cy='72' r='2.2' fill='white' fill-opacity='.14'/></svg>") right -40px top -20px / 620px auto no-repeat,
    linear-gradient(118deg, #141732 0%, #232859 64%, #2C3270 100%);
}
.ds-dark body.ds-advanced .adv-emb {
  border-color: rgba(167,176,238,.28);
  box-shadow: 0 6px 18px rgba(0,0,0,.34);
}
.ds-dark body.ds-advanced .adv-emb:hover,
.ds-dark body.ds-advanced .adv-emb:focus-visible { box-shadow: 0 10px 26px rgba(0,0,0,.45); }
/* o traço pontilhado da rota é decoração: no escuro ele precisa existir sem
   competir com os códigos IATA, que são a informação */
.ds-dark body.ds-advanced .adv-emb-rota .trilho .linha { border-top-color: rgba(167,176,238,.42); }
/* no escuro o índigo da marca é claro: o botão cheio pede texto escuro, senão
   "Fazer o check-in" fica branco sobre lavanda e some */
.ds-dark body.ds-advanced .adv-emb-acao.forte,
.ds-dark body.ds-advanced .adv-emb-acao.forte:hover { color: #141732; box-shadow: none; }

/* ── Para onde você está vendendo ───────────────────────────────
   Três colunas fixas (destino · barra · dinheiro) em vez de tabela: a leitura
   é de cima para baixo pela barra, e o valor fica alinhado à direita para
   comparar sem ler. */
body.ds-advanced .adv-destinos { display: flex; flex-direction: column; gap: 2px; }
body.ds-advanced .adv-destino {
  display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 2fr) auto;
  align-items: center; gap: 12px; padding: 7px 0;
}
body.ds-advanced .adv-destino + .adv-destino { border-top: 1px solid var(--borda); }
body.ds-advanced .adv-destino .nome { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
body.ds-advanced .adv-destino .nome b {
  font-size: 14px; font-weight: 600; color: var(--ds-titulo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ds-advanced .adv-destino .nome .pais {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ds-texto-meta);
  border: 1px solid var(--borda); border-radius: 4px; padding: 0 4px; flex: none;
}
body.ds-advanced .adv-destino .barra {
  height: 8px; border-radius: 999px; background: var(--ds-n-100); overflow: hidden;
}
body.ds-advanced .adv-destino .barra i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-brand-400), var(--ds-brand-600));
}
body.ds-advanced .adv-destino .valor { text-align: right; white-space: nowrap; }
body.ds-advanced .adv-destino .valor b { display: block; font-size: 13.5px; color: var(--ds-titulo); }
body.ds-advanced .adv-destino .valor small { display: block; font-size: 11.5px; color: var(--ds-texto-meta); }
body.ds-advanced .adv-destinos-mais { margin: 10px 0 0; }
.ds-dark body.ds-advanced .adv-destino .barra { background: rgba(255,255,255,.08); }

@media (max-width: 560px) {
  /* no celular a barra sai: cidade e dinheiro é o que cabe e o que decide */
  body.ds-advanced .adv-destino { grid-template-columns: 1fr auto; }
  body.ds-advanced .adv-destino .barra { display: none; }
}