/* ============================================================
   Melhor Passagem · Agency OS — Tema ESCURO (camada ds-)
   ------------------------------------------------------------
   Camada 100% aditiva, carregada por ÚLTIMO. Só liga quando a
   classe `ds-dark` está no <html> (posta pelo ds-dark.js a
   partir da escolha do usuário, gravada em localStorage).

   Reversão total: tirar a classe `ds-dark` do <html>, o <link>
   deste arquivo ou o <script ds-dark.js> — o CRM volta ao tema
   claro sem nenhum resíduo. Nenhuma regra aqui existe fora do
   escopo `.ds-dark`.

   Como funciona: o design system já é todo var(--ds-*) e o CSS
   legado tem seu próprio conjunto de vars. O tema escuro
   REDEFINE esses tokens no <body> (parte 1) e só depois trata
   à mão o que o legado deixou em hex fixo (parte 2).

   Regra de ouro do projeto (nenhum hex fora dos tokens) fica
   preservada: todo hex deste arquivo vive no bloco de tokens
   abaixo — a parte 2 só consome var().

   Impressão: tudo sob @media screen. Fatura/voucher/bilhete
   saem no papel em tema claro, como sempre.
   ============================================================ */

@media screen {

/* ════════════════════════════════════════════════════════════
   PARTE 1 — TOKENS DO TEMA ESCURO
   `.ds-dark body.ds-theme` (0,2,1) vence `.ds-theme` (0,1,0),
   então cada token claro é substituído no mesmo elemento.
   ════════════════════════════════════════════════════════════ */
.ds-dark { color-scheme: dark; }

.ds-dark body.ds-theme {
  /* ── marca (escala reordenada para fundo escuro) ─────────── */
  /* 00 continua claro: é a cor do TEXTO sobre o botão de ação */
  --ds-brand-00: #F7F9FF;
  --ds-brand-25: #171C29;   /* linha destacada da tabela        */
  --ds-brand-50: #16203A;   /* fundo de pill/PNR                */
  --ds-brand-200: rgba(88, 132, 255, .26);  /* pill info, anel de foco */
  --ds-brand-300: rgba(96, 138, 255, .32);  /* bordas azuladas  */
  --ds-brand-400: #7FA6FF;  /* ícones, pontos de timeline       */
  --ds-brand-600: #3B6BFF;  /* ação                             */
  --ds-brand-700: #5A82FF;
  --ds-brand-800: #A9C2FF;  /* usados como TEXTO em dark        */
  --ds-brand-900: #C9D9FF;
  --ds-brand-950: #E4EBFF;

  /* ── ação ───────────────────────────────────────────────── */
  --ds-acao: #3B6BFF;
  --ds-acao-hover: #5A82FF;
  --ds-foco: #6E9BFF;

  /* ── identidade oficial ─────────────────────────────────── */
  --ds-mp-navy: #C9D9FF;    /* era o navy do texto: clareia     */
  --ds-mp-vivo: #1E8BFF;
  --ds-mp-escuro: #2F6BFF;
  --ds-grad-marca: linear-gradient(118deg, #3B6BFF 20%, #1E8BFF 100%);
  --ds-grad-marca-hover: linear-gradient(118deg, #5A82FF 20%, #3D9BFF 100%);

  /* ── texto ──────────────────────────────────────────────── */
  --ds-texto: #DDE3EE;
  --ds-titulo: #EEF1F7;
  --ds-texto-sec: #A3ACBD;
  --ds-texto-meta: #7C8698;
  --ds-texto-forte: #EEF1F7;

  /* ── neutros (escala INVERTIDA: 50 = mais escuro) ───────── */
  --ds-n-50: #171B24;
  --ds-n-100: #1B2029;
  --ds-n-200: #262C39;      /* borda sutil (a borda do tema)    */
  --ds-n-300: #333A4A;      /* borda média                      */
  --ds-n-400: #5A6376;
  --ds-n-500: #7C8698;
  --ds-n-600: #A3ACBD;
  --ds-n-700: #C5CCD9;
  --ds-n-800: #EEF1F7;

  /* ── feedback (fundo translúcido, texto luminoso) ───────── */
  --ds-ok-icone: #34D399;
  --ds-ok-texto: #4BDCA0;
  --ds-ok-fundo: rgba(16, 185, 129, .15);
  --ds-erro-icone: #F87171;
  --ds-erro-texto: #FF9494;
  --ds-erro-fundo: rgba(239, 68, 68, .15);
  --ds-erro-borda-input: #C05B62;
  --ds-alerta-icone: #FB923C;
  --ds-alerta-texto: #FFBB70;
  --ds-alerta-fundo: rgba(251, 146, 60, .15);
  --ds-kpi-positivo: #34D399;
  --ds-kpi-negativo: #FB7185;

  /* ── superfícies ────────────────────────────────────────── */
  --ds-branco: #1A1F29;        /* superfície de card            */
  --ds-painel-frio: #1E242F;
  --ds-kpi-fundo: #1C212B;
  --ds-trilho: #0F1319;        /* trilho do menu na sidebar     */
  --ds-menu-hover: #212836;
  --ds-submenu-ativo: rgba(88, 132, 255, .22);

  /* superfícies próprias do escuro (não existem no claro) */
  --ds-d-fundo: #0A0C10;       /* moldura da janela             */
  --ds-d-sidebar: #0D1015;     /* trilho lateral (o mais escuro)*/
  --ds-d-conteudo: #12151C;    /* área de trabalho              */
  --ds-d-card: #1A1F29;        /* card                          */
  --ds-d-elev: #212734;        /* card sobre card / hover       */
  --ds-d-input: #10141B;       /* campo de formulário           */
  --ds-d-linha-hover: rgba(255, 255, 255, .035);
  --ds-d-topo: rgba(18, 21, 28, .88);   /* faixa sticky do topo */

  /* ── companhias: escurece o chapado para não vibrar ─────── */
  --ds-cia-neutra: #2C4BC9;

  /* ── sombras (no escuro, sombra é profundidade real) ────── */
  --ds-sombra-dropdown: 0 8px 24px rgba(0, 0, 0, .55);
  --ds-sombra-flyout: 0 14px 32px rgba(0, 0, 0, .55);
  --ds-sombra-modal: 0 24px 60px rgba(0, 0, 0, .65);
  --ds-sombra-drawer: -8px 0 40px rgba(0, 0, 0, .55);

  /* ── ícones embutidos: o cinza da lupa/chevron precisa
        clarear, senão some no campo escuro ───────────────── */
  --ds-icone-busca: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8698' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
  --ds-icone-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8698' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");

  /* ── vars do CSS LEGADO (o console tem as suas próprias) ── */
  --dourado: #3B6BFF; --dourado-claro: #7FA6FF;
  --fundo: #0A0C10; --painel: #0D1015; --card: #1A1F29;
  --borda: #262C39; --texto: #DDE3EE; --sub: #A3ACBD;
  --ok: #4BDCA0; --alerta: #FFBB70; --erro: #FF9494;
  --marca: #3B6BFF; --marca-escura: #C9D9FF;
  --menta: #34D399; --lima: #A3E635; --rosa: #FB7185; --ceu: #7FA6FF;
  --sombra: 0 24px 70px rgba(0, 0, 0, .6);

  /* vars da "sprint SaaS" legada */
  --azul-900: #C9D9FF; --azul-800: #A9C2FF; --azul-700: #5A82FF;
  --azul-600: #3B6BFF; --azul-100: rgba(88, 132, 255, .20); --azul-050: #171C29;
  --verde: #4BDCA0; --amber: #FFBB70; --vermelho: #FF9494;
  --cinza-900: #EEF1F7; --cinza-700: #C5CCD9; --cinza-600: #A3ACBD;
  --cinza-200: #262C39; --cinza-100: #1B2029;
  --surface: #1A1F29; --surface-soft: #12151C; --surface-blue: #1B2029;
  --sombra-suave: 0 10px 26px rgba(0, 0, 0, .45);
  --sombra-forte: 0 24px 60px rgba(0, 0, 0, .6);
}

/* ════════════════════════════════════════════════════════════
   PARTE 2 — ESTRUTURA
   As três camadas de profundidade da referência: moldura quase
   preta › trilho lateral › área de trabalho › card.
   ════════════════════════════════════════════════════════════ */

/* moldura da janela (o body legado tem gradiente claro fixo) */
.ds-dark body.ds-theme {
  background: var(--ds-d-fundo);
  color: var(--ds-texto);
}

/* a "janela" do app */
.ds-dark #app {
  background: var(--ds-d-conteudo);
  border-color: var(--ds-n-200);
  box-shadow: var(--ds-sombra-forte);
}

/* trilho lateral: o mais escuro da tela, como na referência */
.ds-dark #app aside,
.ds-dark #app aside.ds-shell {
  background: var(--ds-d-sidebar);
  border-right: 1px solid var(--ds-n-200);
}
.ds-dark aside .logo { border-bottom-color: var(--ds-n-200); }
.ds-dark aside .rodape { border-top-color: var(--ds-n-200); background: none; }

/* área de trabalho (o legado pinta um gradiente branco por cima) */
.ds-dark main { background: var(--ds-d-conteudo); }

/* faixa sticky do cabeçalho: mesma translucidez, no escuro */
.ds-dark .topo {
  background: var(--ds-d-topo);
  border-bottom-color: var(--ds-n-200);
}
.ds-dark .topo h1 { color: var(--ds-titulo); }
.ds-dark .topo p { color: var(--ds-texto-meta); }

/* A marca oficial é o símbolo em azul cheio com o MP branco: no escuro ele já
   tem contraste sozinho. A inversão de luminância aqui existia para a faixa
   antiga (azul-marinho sobre transparente) e agora só desbotava o símbolo. */
.ds-dark .logo .logo-marca,
.ds-dark .logo-login .logo-marca,
.ds-dark .ds-mono {
  filter: none;
}

/* botão de recolher o trilho */
.ds-dark .ds-shell-toggle {
  background: var(--ds-d-elev); border-color: var(--ds-n-300); color: var(--ds-texto-sec);
}
.ds-dark .ds-shell-toggle:hover { background: var(--ds-menu-hover); color: var(--ds-brand-400); }

/* Grupo de menu aberto. No claro o cabeçalho é uma barra de gradiente;
   no escuro isso empilharia três blocos azuis grandes no trilho e brigaria
   com o item ativo. Aqui o grupo vira superfície elevada neutra e o AZUL
   fica reservado a uma coisa só: onde a pessoa está. */
.ds-dark .ds-nav-grupo.ds-aberto {
  background: var(--ds-d-elev); border-color: var(--ds-n-300);
}
.ds-dark .ds-nav-grupo.ds-aberto > .ds-nav-cab {
  background: var(--ds-d-elev); color: var(--ds-texto-forte);
}
.ds-dark .ds-nav-grupo.ds-aberto > .ds-nav-cab .ds-nav-cab-ic,
.ds-dark .ds-nav-grupo.ds-aberto > .ds-nav-cab .ds-nav-chevron {
  color: var(--ds-texto-meta);
}
.ds-dark aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo {
  background: var(--ds-submenu-ativo); color: var(--ds-brand-950);
  box-shadow: inset 2px 0 0 var(--ds-acao);
}
.ds-dark aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo .nav-icone {
  color: var(--ds-brand-400);
}
.ds-dark aside.ds-shell.ds-colapsada .ds-nav-lista {
  background: var(--ds-d-elev); border-color: var(--ds-n-300);
}

/* ── cabeçalho / topbar ──────────────────────────────────── */
.ds-dark .topbar .busca-global,
.ds-dark .topbar .filtro {
  background: var(--ds-d-input); border-color: var(--ds-n-300);
}
.ds-dark .atalho-topo {
  background: var(--ds-d-elev); border-color: var(--ds-n-300); color: var(--ds-texto);
}
.ds-dark .atalho-topo:hover { background: var(--ds-menu-hover); border-color: var(--ds-brand-600); }

/* ── superfícies de conteúdo ─────────────────────────────── */
.ds-dark .card,
.ds-dark .kpi,
.ds-dark .kpi:nth-child(4n+1), .ds-dark .kpi:nth-child(4n+2),
.ds-dark .kpi:nth-child(4n+3), .ds-dark .kpi:nth-child(4n+4),
.ds-dark .programa,
.ds-dark .template-card,
.ds-dark .estrategia-card,
.ds-dark .estrategia-mini,
.ds-dark .voo-link-card,
.ds-dark .mini-resumo div,
.ds-dark .calculo div,
.ds-dark .nota-campo {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
}
.ds-dark .card h2 { color: var(--ds-brand-400); }

/* ── tabelas ─────────────────────────────────────────────── */
.ds-dark th { background: var(--ds-n-100); color: var(--ds-texto-sec); }
.ds-dark th, .ds-dark td { border-bottom-color: var(--ds-n-200); }
.ds-dark tr:hover td { background: var(--ds-d-linha-hover); }

/* ── campos ──────────────────────────────────────────────── */
.ds-dark input, .ds-dark select, .ds-dark textarea {
  background: var(--ds-d-input); border-color: var(--ds-n-300); color: var(--ds-texto);
}
.ds-dark input::placeholder, .ds-dark textarea::placeholder { color: var(--ds-texto-meta); }
.ds-dark input:focus, .ds-dark select:focus, .ds-dark textarea:focus {
  border-color: var(--ds-foco); outline-color: var(--ds-foco);
}
.ds-dark input[type=file] { background: var(--ds-n-100); }
.ds-dark option { background: var(--ds-d-card); color: var(--ds-texto); }

/* ── botões legados ──────────────────────────────────────── */
.ds-dark button.leve {
  background: var(--ds-d-elev); border-color: var(--ds-n-300); color: var(--ds-texto);
}
.ds-dark button.leve:hover { background: var(--ds-menu-hover); border-color: var(--ds-brand-600); }
.ds-dark button.acao-editar {
  background: var(--ds-brand-50); border-color: var(--ds-brand-300); color: var(--ds-brand-800);
}
.ds-dark button.acao-excluir {
  background: var(--ds-erro-fundo); border-color: var(--ds-erro-borda-input); color: var(--ds-erro-texto);
}
.ds-dark button.acao-excluir:hover { background: var(--ds-erro-fundo); }
.ds-dark .seg-btn { background: var(--ds-d-elev); color: var(--ds-texto-sec); }
.ds-dark .seg-btn.ativo { background: var(--ds-acao); color: var(--ds-brand-00); }

/* ── selos (o legado pinta fundo claro + texto escuro) ───── */
.ds-dark .selo.pendente, .ds-dark .selo.cobrado,
.ds-dark .selo.reservado, .ds-dark .selo.vencendo,
.ds-dark .selo.a_lancar {
  background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto);
}
.ds-dark .selo.conferida, .ds-dark .selo.pago, .ds-dark .selo.disponivel,
.ds-dark .selo.venda_emitida, .ds-dark .selo.venda_paga, .ds-dark .selo.venda_pago,
.ds-dark .selo.lancado, .ds-dark .selo.recorrente {
  background: var(--ds-ok-fundo); color: var(--ds-ok-texto);
}
.ds-dark .selo.divergente, .ds-dark .selo.vencido {
  background: var(--ds-erro-fundo); color: var(--ds-erro-texto);
}
.ds-dark .selo.cancelado, .ds-dark .selo.usado, .ds-dark .selo.pontual {
  background: var(--ds-n-100); color: var(--ds-texto-sec);
}
.ds-dark .selo.a_receber {
  background: var(--ds-brand-200); color: var(--ds-brand-900);
}

/* ── faixas de insight / KPIs ─────────────────────────────
   No claro o status é um contorno pastel inteiro. Repetir isso no
   escuro acende um retângulo neon em volta de cada linha, então
   aqui o status vira faixa lateral e o contorno fica neutro. */
.ds-dark .insight-item,
.ds-dark #pg-inicio .insight-item,
.ds-dark #pg-painel .insight-item {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
}
.ds-dark #pg-inicio .insight-item.positivo, .ds-dark #pg-painel .insight-item.positivo,
.ds-dark .insight-item.positivo {
  background: var(--ds-ok-fundo); border-color: var(--ds-n-200); border-left: 3px solid var(--ds-ok-icone);
}
.ds-dark #pg-inicio .insight-item.alerta, .ds-dark #pg-painel .insight-item.alerta,
.ds-dark .insight-item.alerta {
  background: var(--ds-alerta-fundo); border-color: var(--ds-n-200); border-left: 3px solid var(--ds-alerta-icone);
}
.ds-dark #pg-inicio .insight-item.risco, .ds-dark #pg-painel .insight-item.risco,
.ds-dark .insight-item.risco {
  background: var(--ds-erro-fundo); border-color: var(--ds-n-200); border-left: 3px solid var(--ds-erro-icone);
}
.ds-dark #pg-inicio .insight-item.azul, .ds-dark #pg-painel .insight-item.azul,
.ds-dark .insight-item.azul {
  background: var(--ds-brand-50); border-color: var(--ds-n-200); border-left: 3px solid var(--ds-brand-600);
}
/* KPI: contorno neutro, o acento fica na barra lateral que a tela já usa */
.ds-dark .ds-lista .kpi { border-color: var(--ds-n-200); }

/* ── barras de progresso ─────────────────────────────────── */
.ds-dark .barra { background: var(--ds-n-200); }
.ds-dark .barra i { background: var(--ds-ok-icone); }

/* ── toast/mensagem flutuante ────────────────────────────── */
.ds-dark #msg {
  background: var(--ds-d-elev); border-color: var(--ds-brand-600);
  color: var(--ds-texto); box-shadow: var(--ds-sombra-modal);
}

/* ── modais (o legado tem overlay e caixa próprios) ──────── */
.ds-dark .modal-overlay { background: rgba(0, 0, 0, .66); }
.ds-dark .modal-box {
  background: var(--ds-d-card); border-color: var(--ds-n-300);
  box-shadow: var(--ds-sombra-modal);
}

/* ── drawer / painéis flutuantes ds- ─────────────────────── */
.ds-dark .ds-drawer, .ds-dark .ds-modal { background: var(--ds-d-card); }
.ds-dark .ds-modal-overlay { background: rgba(0, 0, 0, .6); }
.ds-dark .ds-drawer-rodape { background: var(--ds-d-card); border-top-color: var(--ds-n-200); }

/* ── tela de login ───────────────────────────────────────── */
.ds-dark #tela-login .card {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
  box-shadow: var(--ds-sombra-forte);
}

/* ── rolagem: no escuro a barra clara do sistema salta ───── */
.ds-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.ds-dark ::-webkit-scrollbar-track { background: var(--ds-d-fundo); }
.ds-dark ::-webkit-scrollbar-thumb {
  background: var(--ds-n-300); border-radius: var(--ds-raio-pill);
  border: 2px solid var(--ds-d-fundo);
}
.ds-dark ::-webkit-scrollbar-thumb:hover { background: var(--ds-n-400); }

/* ════════════════════════════════════════════════════════════
   PARTE 3 — O QUE O LEGADO DEIXOU EM COR FIXA
   Telas anteriores ao design system escrevem hex direto no CSS.
   Cada bloco abaixo devolve essas superfícies/tintas ao tema.
   ════════════════════════════════════════════════════════════ */

/* ── tinta clara sobre a cor da marca ─────────────────────────
   O DS usa --ds-branco como "tinta sobre o gradiente". No escuro
   esse token virou superfície, então estes casos são explícitos. */
.ds-dark aside.ds-shell nav#menu button[id^="nav-"].ativo,
.ds-dark aside.ds-shell nav#menu button[id^="nav-"].ativo .nav-icone,
.ds-dark .ds-pag-btn.ds-ativo,
.ds-dark .ds-avatar-cia,
.ds-dark .ds-vazio .ds-ilu,
.ds-dark #pg-registrar .passo h3 em,
.ds-dark .reg-tipo.ativo .reg-selo {
  color: var(--ds-brand-00);
}

/* ── tabelas: o legado fixa td em cinza-900 ──────────────── */
.ds-dark td { color: var(--ds-texto-sec); }
.ds-dark td b, .ds-dark td strong, .ds-dark td code { color: var(--ds-texto-forte); }
.ds-dark code { color: var(--ds-brand-800); }

/* ── selos que sobraram fora do mapa de cores ────────────── */
.ds-dark .selo { color: var(--ds-texto-sec); }
.ds-dark .selo.ok, .ds-dark .selo.ativo, .ds-dark .selo.sim {
  background: var(--ds-ok-fundo); color: var(--ds-ok-texto);
}
.ds-dark .selo.agendado, .ds-dark .selo.previsto, .ds-dark .selo.parcial {
  background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto);
}

/* ── chips de texto (estratégias, busca de voos) ─────────── */
.ds-dark .chip {
  background: var(--ds-brand-50); border-color: var(--ds-brand-300); color: var(--ds-brand-900);
}
.ds-dark .estrategia-card {
  background: var(--ds-d-card); border-color: var(--ds-n-200); box-shadow: var(--ds-sombra-suave);
}
.ds-dark .estrategia-card.prioritaria { border-color: var(--ds-brand-600); }
.ds-dark .estrategia-card p, .ds-dark .estrategia-card div,
.ds-dark .estrategia-mini p { color: var(--ds-texto-sec); }
.ds-dark .estrategia-card details { border-color: var(--ds-n-200); }
.ds-dark .voo-link-card.manual { background: var(--ds-n-100); }
.ds-dark .link-status { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }
.ds-dark .link-status.manual { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }

/* ── wizard de registro ──────────────────────────────────── */
.ds-dark #pg-registrar .campo-grupo,
.ds-dark #pg-registrar .registro-final,
.ds-dark .source-option,
.ds-dark .passo {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
}
.ds-dark #pg-registrar .campo-grupo h4 { background: var(--ds-n-100); }
.ds-dark #pg-registrar .campo-inativo input { background: var(--ds-n-100); }
.ds-dark .source-option.ativo { background: var(--ds-brand-50); border-color: var(--ds-brand-600); }
.ds-dark #pg-registrar .source-option::after { background: var(--ds-d-input); border-color: var(--ds-n-300); }
.ds-dark #leitura, .ds-dark #hp-leitura {
  background: var(--ds-ok-fundo); border-color: var(--ds-ok-icone); color: var(--ds-texto);
}
.ds-dark #leitura.erro, .ds-dark #hp-leitura.erro {
  background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone);
}
.ds-dark #dica-estrategia {
  background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone);
}
.ds-dark #cm-cartao-box, .ds-dark #wa-aviso {
  background: var(--ds-n-100); border-color: var(--ds-n-200);
}

/* ── hospedagem / passeio (kit hp-) e serviços ───────────── */
.ds-dark .hp-chip, .ds-dark .hp-dobra, .ds-dark .hp-venda-caixa,
.ds-dark .vinc-campo, .ds-dark .vinc-item, .ds-dark .vinc-chip {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
}
.ds-dark .hp-dobra > summary .hp-conta { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }
.ds-dark .hp-dobra > summary .hp-conta.neutra { background: var(--ds-n-100); color: var(--ds-texto-sec); }
.ds-dark .hp-venda-caixa .hp-cifrao, .ds-dark .hp-venda-modo { background: var(--ds-n-100); border-color: var(--ds-n-200); }
.ds-dark .hp-venda-modo button[aria-pressed="true"] { background: var(--ds-acao); color: var(--ds-brand-00); }
.ds-dark .hp-resultado .hp-item + .hp-item { border-color: var(--ds-n-200); }
.ds-dark .vinc-campo.ligado, .ds-dark .vinc-chip.ligado, .ds-dark .vinc-item.atual {
  background: var(--ds-brand-50); border-color: var(--ds-brand-600);
}
.ds-dark .vinc-item:hover { background: var(--ds-menu-hover); }
.ds-dark .vinc-campo .vinc-icone { background: var(--ds-brand-50); }
.ds-dark .vinc-item .vinc-tag { background: var(--ds-brand-50); color: var(--ds-brand-900); }
.ds-dark .vinc-item .vinc-tag.aviso { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }
.ds-dark .sv-filtro.ativo, .ds-dark .sv-tipo {
  background: var(--ds-brand-50); color: var(--ds-brand-900);
}
.ds-dark .sv-tipo.passeio { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }

/* ── roteiro do destino ──────────────────────────────────── */
.ds-dark .rt-chip.ativo, .ds-dark .rt-fixo, .ds-dark .rt-dica {
  background: var(--ds-brand-50); color: var(--ds-brand-900);
}
.ds-dark .rt-status.gerando { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }
.ds-dark .rt-status.pronto { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }
.ds-dark .rt-status.erro { background: var(--ds-erro-fundo); color: var(--ds-erro-texto); }
.ds-dark .rt-alerta { background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone); }
.ds-dark .rt-edit:hover { background: var(--ds-menu-hover); }
.ds-dark .rt-edit:focus { background: var(--ds-d-input); border-color: var(--ds-foco); }

/* ── gastos (tela com paleta própria) ────────────────────── */
.ds-dark #pg-gastos .gastos-hero-bloco,
.ds-dark #pg-gastos .gastos-status-mes,
.ds-dark #pg-gastos .gastos-form-bloco,
.ds-dark #pg-gastos .gastos-saude-card,
.ds-dark #pg-gastos .gastos-saude-faixa,
.ds-dark #pg-gastos .gastos-saude-metricas div,
.ds-dark #pg-gastos .gastos-categoria-linha,
.ds-dark #pg-gastos .gastos-pendencia-resumo,
.ds-dark #pg-gastos .gastos-alerta,
.ds-dark #pg-gastos .gasto-card {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
}
.ds-dark #pg-gastos .modulo-tag,
.ds-dark #pg-gastos .gastos-status-mes .linha,
.ds-dark #pg-gastos .gasto-card-meta span,
.ds-dark #pg-gastos .gasto-card-rodape {
  background: var(--ds-n-100); border-color: var(--ds-n-200);
}
.ds-dark #pg-gastos .gastos-barra { background: var(--ds-n-200); }
.ds-dark #pg-gastos .gastos-pendencia { background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone); }
.ds-dark #pg-gastos .gastos-pendencia.fatura { background: var(--ds-erro-fundo); border-color: var(--ds-erro-icone); }
.ds-dark #pg-gastos .gastos-pendencia.pago { background: var(--ds-ok-fundo); border-color: var(--ds-ok-icone); }
.ds-dark #pg-gastos .gastos-saude-faixa.positivo { background: var(--ds-ok-fundo); }
.ds-dark #pg-gastos .gastos-saude-faixa.alerta { background: var(--ds-alerta-fundo); }
.ds-dark #pg-gastos .gastos-saude-faixa.risco { background: var(--ds-erro-fundo); }
.ds-dark #pg-gastos .gastos-alerta.alerta { background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone); }
.ds-dark #pg-gastos .gastos-alerta.ok { background: var(--ds-ok-fundo); border-color: var(--ds-ok-icone); }

/* ── atendimento / conversas ─────────────────────────────── */
.ds-dark .atd-shell, .ds-dark .atd-lista, .ds-dark .atd-config,
.ds-dark .atd-contexto, .ds-dark .atd-busca, .ds-dark .atd-template,
.ds-dark .atd-template-previa, .ds-dark .atd-ficha, .ds-dark .chat-wrap,
.ds-dark .chat-lista, .ds-dark .atd-lista .chat-canal {
  background: var(--ds-d-card); border-color: var(--ds-n-200);
}
.ds-dark .atd-canais, .ds-dark .atd-lista-topo, .ds-dark .atd-contexto-topo,
.ds-dark .atd-nova, .ds-dark .chat-topo-conversa, .ds-dark .chat-input,
.ds-dark .atd-template-rodape, .ds-dark .atd-busca input {
  background: var(--ds-n-100); border-color: var(--ds-n-200);
}
.ds-dark .atd-chat, .ds-dark .atd-chat .chat-painel,
.ds-dark .chat-painel, .ds-dark .chat-msgs { background: var(--ds-d-conteudo); }
.ds-dark .atd-canal.ativo, .ds-dark .atd-lista .chat-canal.ativo,
.ds-dark .chat-canal.ativo { background: var(--ds-menu-hover); }
.ds-dark .atd-lista .chat-canal:hover, .ds-dark .chat-canal:hover { background: var(--ds-d-elev); }
.ds-dark .chat-msg { background: var(--ds-d-elev); }
.ds-dark .chat-msg.minha { background: var(--ds-brand-50); }
.ds-dark .chat-input textarea { background: var(--ds-d-input); border-color: var(--ds-n-300); }
.ds-dark .atd-avatar, .ds-dark .atd-canal-icone, .ds-dark .atd-avatar-claudia {
  background: var(--ds-n-200); color: var(--ds-texto);
}
.ds-dark .atd-avatar.instagram { background: var(--ds-erro-fundo); }
.ds-dark .atd-claudia-resposta { background: var(--ds-brand-50); }
.ds-dark .atd-janela { background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone); }
.ds-dark .atd-enviar { color: var(--ds-brand-00); }
.ds-dark .atd-enviar:disabled { color: var(--ds-texto-meta); }
.ds-dark .icone-btn:hover { background: var(--ds-menu-hover); border-color: var(--ds-n-300); }
.ds-dark .wa-qr-painel, .ds-dark .wa-como-painel, .ds-dark .wa-chip,
.ds-dark .atd-config .wa-qr-frame { background: var(--ds-d-card); border-color: var(--ds-n-200); }
.ds-dark .wa-qr-frame { background: var(--ds-branco); }
.ds-dark .wa-seguro { background: var(--ds-ok-fundo); }

/* textos da central que o legado fixou em tons escuros */
.ds-dark .atd-canal { color: var(--ds-texto-sec); }
.ds-dark .atd-canal.ativo { color: var(--ds-titulo); }
.ds-dark .atd-barra-acoes > span, .ds-dark .atd-config-linha,
.ds-dark #atd-status-texto, .ds-dark #atd-claudia-status,
.ds-dark .atd-claudia-titulo small, .ds-dark .atd-boas-vindas {
  color: var(--ds-texto-meta);
}
.ds-dark .atd-boas-vindas b, .ds-dark .atd-item-linha b,
.ds-dark .atd-ficha b, .ds-dark .atd-lista-topo strong { color: var(--ds-texto-forte); }

/* rótulo do filtro no cabeçalho */
.ds-dark .topo .filtro label { color: var(--ds-texto-meta); }

/* ── Cláudia (widget flutuante) ──────────────────────────── */
.ds-dark #claudia-panel, .ds-dark .claudia-topo, .ds-dark .claudia-input,
.ds-dark .claudia-msg { background: var(--ds-d-card); border-color: var(--ds-n-200); }
.ds-dark #claudia-msgs, .ds-dark .claudia-sugestoes { background: var(--ds-d-conteudo); }
.ds-dark .claudia-msg.usuario { background: var(--ds-brand-50); border-color: var(--ds-brand-300); }
.ds-dark .claudia-exec { background: var(--ds-n-100); border-color: var(--ds-n-300); }
.ds-dark .claudia-exec.sensivel { background: var(--ds-alerta-fundo); border-color: var(--ds-alerta-icone); }

/* ── alerta de check-in (modal do início) ────────────────── */
.ds-dark .checkin-alerta-box { border-color: var(--ds-alerta-icone); }
.ds-dark .checkin-alerta-item {
  background: var(--ds-n-100); border-color: var(--ds-n-200);
}
.ds-dark .checkin-alerta-icone { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }

/* ── botão de alternar tema (injetado na topbar) ─────────── */
.ds-tema-btn {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-input);
  background: var(--ds-branco); color: var(--ds-texto-sec); cursor: pointer;
}
.ds-tema-btn:hover { background: var(--ds-n-50); color: var(--ds-brand-600); }
.ds-tema-btn svg { width: 17px; height: 17px; }
.ds-tema-btn:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }
.ds-dark .ds-tema-btn { background: var(--ds-d-elev); border-color: var(--ds-n-300); }
.ds-dark .ds-tema-btn:hover { background: var(--ds-menu-hover); color: var(--ds-brand-400); }

/* ── escolha de aparência (modal do rodapé da barra lateral) ──
   Vive nos DOIS temas, então tudo aqui é var(--ds-*): no claro
   resolve claro, no escuro resolve escuro. */
.ds-aparencia-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-esp-12); margin: var(--ds-esp-16) 0 var(--ds-esp-4);
}
@media (max-width: 560px) { .ds-aparencia-grade { grid-template-columns: 1fr; } }

.ds-aparencia-op {
  display: flex; flex-direction: column; gap: var(--ds-esp-6);
  padding: var(--ds-esp-10); text-align: left; cursor: pointer;
  border: 1.5px solid var(--ds-n-200); border-radius: var(--ds-raio-kpi);
  background: var(--ds-branco); color: var(--ds-texto-forte);
  font-family: var(--ds-fonte); letter-spacing: var(--ds-espaco-letras);
}
.ds-aparencia-op:hover { border-color: var(--ds-brand-400); }
.ds-aparencia-op[aria-pressed="true"] {
  border-color: var(--ds-acao); background: var(--ds-brand-50);
}
.ds-aparencia-op:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }

.ds-aparencia-nome {
  display: flex; align-items: center; gap: var(--ds-esp-6);
  font-size: var(--ds-tam-sec); font-weight: 500;
}
.ds-aparencia-nome svg { width: 14px; height: 14px; flex: none; color: var(--ds-texto-sec); }
.ds-aparencia-op[aria-pressed="true"] .ds-aparencia-nome svg { color: var(--ds-acao); }
.ds-aparencia-dica { font-size: var(--ds-tam-meta); color: var(--ds-texto-meta); }

/* prévia: uma janelinha do CRM (trilho + área de trabalho) em cada tema.
   No automático, a janela escura entra por cima cortada na diagonal. */
.ds-aparencia-previa {
  position: relative; display: block; height: 54px;
  border-radius: var(--ds-esp-6); overflow: hidden; border: 1px solid var(--ds-n-200);
}
.ds-previa-camada { position: absolute; inset: 0; display: flex; }
.ds-previa-camada i { display: block; height: 100%; }
.ds-previa-trilho { width: 30%; }
.ds-previa-corpo { width: 70%; }
.ds-previa-claro .ds-previa-trilho { background: #EDF1F7; }
.ds-previa-claro .ds-previa-corpo { background: #FFFFFF; }
.ds-previa-escuro .ds-previa-trilho { background: #0D1015; }
.ds-previa-escuro .ds-previa-corpo { background: #12151C; }
.ds-previa-corte {
  position: absolute; inset: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

}  /* @media screen */
