/* MVPG — COMPONENTES compartilhados (spec 069, 25/ago).
 *
 * Existe por dois pedidos do dono no mesmo dia:
 *
 *   "Está muito pesado, tem muitas coisas repetidas em telas."
 *   "Precisamos de um CSS padrão para continuidade."
 *
 * O que foi medido antes de escrever isto: 28 templates carregam <style> próprio, somando 3.265
 * linhas — 3,5x o CSS central inteiro (936). E as classes já divergiram sozinhas:
 *
 *   .btn        redefinida em 11 templates
 *   .vazio       6      .st  5      .pg-tag  5      .htmx-indicator  4
 *
 * leadgen, licitação e rag têm .btn IDÊNTICA byte a byte (copy-paste); a campanha ficou AZUL
 * enquanto as outras são verdes — ninguém decidiu isso, aconteceu. Mudar o botão do sistema hoje
 * exige lembrar de 11 arquivos, e é assim que um vira azul.
 *
 * REGRA: o que está aqui NÃO se redefine em template. Componente novo entra neste arquivo.
 * Um teste (tests/web/test_css_sem_duplicata.py) reprova o deploy quando um template redefine.
 *
 * Usa as vars --abz-* de brand.css; nunca redefine a marca.
 */

/* --- Botão -------------------------------------------------------------------------------------
 * O verde é o padrão (leadgen, licitação, rag, sinais, perguntas). `filter: brightness` no hover
 * porque funciona em qualquer cor de fundo — `box-shadow` exigia acertar o glow por tela. */
.btn {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  background: var(--abz-verde-medio);
  color: #fff;
  font-family: var(--abz-font-titulo);
  text-decoration: none;
  display: inline-block;
}
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn--sm { padding: 4px 9px; font-size: 11px; }
.btn--ghost {
  background: transparent;
  color: var(--abz-tinta-2);
  border: 1px solid var(--abz-linha);
}
.btn--perigo { background: var(--abz-card); color: var(--abz-tinta-2); border: 1px solid var(--abz-linha); }
.btn--perigo:hover { color: var(--abz-chip-danger-fg); border-color: #e8b4ae; filter: none; }

/* --- Estado vazio ------------------------------------------------------------------------------
 * Lista sem resultado. Estava em 6 templates com o mesmo desenho. */
.vazio {
  color: var(--abz-tinta-2);
  font-size: 13px;
  padding: 18px;
  text-align: center;
}

/* --- Indicador de carregamento (htmx) ---------------------------------------------------------- */
.htmx-indicator { display: none; font-size: 13px; color: var(--abz-cyan); font-weight: 700; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline; }

/* --- AJUDA "?" (spec 069) ----------------------------------------------------------------------
 * O dono, olhando a tela de Sinais de Rota:
 *
 *   "Preciso melhorar esse padrão de página, pois o que realmente importa está ficando muito para
 *    baixo. E tem muito texto explicativo na tela, isso rouba espaço de tela — isso em todo o MVPG.
 *    Explicação tem que ficar em botão de ? ajuda."
 *
 * Ele está certo, e o número mostra: naquela tela, dois blocos de explicação (8 linhas) empurram o
 * campo de digitar para ~600px. Quem usa a tela todo dia já leu aquilo na primeira semana e paga o
 * scroll para sempre.
 *
 * ⚠️ O texto COLAPSA, não some. Fica no HTML e abre no clique — quem chega pela primeira vez ainda
 * precisa dele, e um tooltip que some ao mover o mouse não dá tempo de ler um parágrafo.
 * Implementado com <details>/<summary>: funciona sem JavaScript, é acessível por teclado e o
 * navegador cuida do estado aberto/fechado. */
.ajuda {
  display: inline;
}
.ajuda > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--abz-linha);
  background: var(--abz-card);
  color: var(--abz-tinta-2);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--abz-font-titulo);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  list-style: none;
  user-select: none;
}
/* O triângulo padrão do <details> apareceria ao lado do "?" — some nos dois motores. */
.ajuda > summary::-webkit-details-marker { display: none; }
.ajuda > summary::marker { content: ""; }
.ajuda > summary:hover { color: var(--abz-cyan); border-color: var(--abz-cyan); }
.ajuda > summary:focus-visible { outline: 2px solid var(--abz-cyan); outline-offset: 2px; }

/* ⚠️ O corpo é irmão do <summary> dentro do <details>: quando fechado, o navegador o remove do
 * fluxo por completo — não é `display:none` escrito aqui, é comportamento nativo, e é exatamente o
 * que faz o campo de trabalho subir.
 *
 * O `font-*` é reafirmado porque o "?" costuma morar dentro de <h1>/<h3>: sem isto o corpo herdaria
 * o tamanho e a família do título, e a explicação sairia gigante ao abrir. */
.ajuda__corpo {
  display: block;
  font-family: var(--abz-font-texto);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  background: var(--abz-card);
  border: 1px solid var(--abz-linha);
  border-left: 3px solid var(--abz-verde-medio);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--abz-tinta-2);
}
.ajuda__corpo b { color: var(--abz-verde-escuro); }
.ajuda__corpo p { margin: 0 0 8px; }
.ajuda__corpo p:last-child { margin-bottom: 0; }

/* --- Cabeçalho de tela -------------------------------------------------------------------------
 * Título + subtítulo curto + o "?" na mesma linha. O subtítulo continua visível porque é UMA linha
 * e diz o que a tela faz; o parágrafo explicativo é que vai para dentro do "?". */
.tela-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tela-topo h1 { margin: 0; }
.tela-topo .tela-sub {
  color: var(--abz-tinta-2);
  font-size: 13px;
}

/* ==========================================================================================
   DESIGN SYSTEM MVPG — docs/UI-UX.md §15 (aprovado pelo dono em 10/out, prévia de Mídias).
   A cor diz a intenção: verde CRIA, ciano PROCURA, neutro LÊ. Só cores da marca e os tons fortes
   delas (contraste AA). Vale dentro de `.ds-pagina`: a tela migra inteira, uma por commit (§15.9).
   ========================================================================================== */
:root {
  --ds-font-titulo: "Montserrat", system-ui, sans-serif;
  --ds-font-texto: "Open Sans", system-ui, sans-serif;
  /* 6 tamanhos (razão 1,25) e 6 espaços, em rem. */
  --ds-t1: .8125rem; --ds-t2: .875rem; --ds-t3: 1rem; --ds-t4: 1.25rem; --ds-t5: 1.5625rem; --ds-t6: 1.953rem;
  --ds-e1: .25rem; --ds-e2: .5rem; --ds-e3: .75rem; --ds-e4: 1rem; --ds-e5: 1.5rem; --ds-e6: 2rem;
  --ds-criar: var(--abz-verde-escuro);
  --ds-criar-fundo: color-mix(in srgb, var(--abz-verde-medio) 7%, var(--abz-card));
  --ds-criar-borda: color-mix(in srgb, var(--abz-verde-medio) 45%, var(--abz-linha));
  --ds-procurar: var(--abz-cyan);
  --ds-procurar-fundo: color-mix(in srgb, var(--abz-cyan) 12%, var(--abz-card));
  /* Tons fortes: a letra branca só vai sobre eles (4,5:1). */
  --ds-criar-forte: color-mix(in srgb, var(--abz-verde-escuro) 78%, #000);
  --ds-procurar-forte: color-mix(in srgb, var(--abz-cyan) 66%, #000);
  /* Cor de TEXTO de cada intenção (11/out). O tom forte serve de fundo de botão; como letra, no tema
     escuro, ele some sobre o cartão escuro (o "sem contraste" do dono). No claro é o mesmo tom forte. */
  --ds-criar-texto: var(--ds-criar-forte);
  --ds-procurar-texto: var(--ds-procurar-forte);
  /* Misturados com o cartão, e não com o branco: continuam certos no tema escuro. */
  --ds-texto-2: color-mix(in srgb, var(--abz-tinta) 78%, var(--abz-card));
  --ds-borda-campo: color-mix(in srgb, var(--abz-tinta) 52%, var(--abz-card));
  --ds-raio-campo: .5rem; --ds-raio-painel: .875rem; --ds-raio-pilula: 999px;
}
:root[data-theme="dark"] { --ds-criar-texto: #5fdc96; --ds-procurar-texto: #6cd3ff; }
.ds-pagina { font-family: var(--ds-font-texto); color: var(--abz-tinta); max-width: 100rem; margin: 0 auto;
             padding: var(--ds-e5) 0; display: grid; gap: var(--ds-e5); }

/* Topo: título, ajuda e uma frase. */
.ds-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-e4); flex-wrap: wrap; }
.ds-topo h1 { font-family: var(--ds-font-titulo); font-weight: 800; font-size: var(--ds-t6); letter-spacing: -.02em;
              margin: 0; display: flex; align-items: center; gap: var(--ds-e3); color: var(--abz-tinta); }
.ds-topo p { margin: var(--ds-e1) 0 0; color: var(--ds-texto-2); font-size: var(--ds-t2); }

/* Botões: criar = verde forte cheio; leve = contorno; perigo = contorno vermelho. */
.ds-btn { font-family: var(--ds-font-titulo); font-weight: 700; font-size: var(--ds-t2); border-radius: var(--ds-raio-campo);
          padding: .625rem 1.125rem; border: 1px solid transparent; cursor: pointer; display: inline-flex;
          align-items: center; gap: var(--ds-e2); text-decoration: none; line-height: 1.2; }
.ds-btn--criar { background: var(--ds-criar-forte); color: #fff; }
.ds-btn--criar:hover { background: color-mix(in srgb, var(--ds-criar-forte) 85%, #000); }
.ds-btn--leve { background: var(--abz-card); color: var(--abz-tinta); border-color: var(--ds-borda-campo); }
.ds-btn--perigo { background: var(--abz-card); color: var(--abz-perigo-fg); border-color: currentColor; }
.ds-btn--sm { padding: .375rem .75rem; font-size: var(--ds-t1); }
.ds-btn:disabled { opacity: .55; cursor: not-allowed; }
.htmx-request .ds-btn--criar, .htmx-request.ds-btn--criar { opacity: .6; pointer-events: none; }
.ds-btn:focus-visible, .ds-campo :is(input, select, textarea):focus-visible, .ds-pilula:focus-visible,
.ds-busca:focus-within, .ds-arquivo:focus-within, .ds-criar > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ds-procurar) 45%, transparent); outline-offset: 2px; }

/* Painel de CRIAR: verde, abre e fecha pelo próprio título; o único botão de criar fica no fim. */
.ds-criar { border: 1px solid var(--ds-criar-borda); border-top: 4px solid var(--ds-criar-forte);
            border-radius: var(--ds-raio-painel); background: var(--ds-criar-fundo); }
.ds-criar > summary { list-style: none; cursor: pointer; padding: var(--ds-e4) var(--ds-e5); font-family: var(--ds-font-titulo);
                      font-weight: 700; font-size: var(--ds-t4); color: var(--ds-criar-texto); display: flex;
                      justify-content: space-between; align-items: center; gap: var(--ds-e3); }
.ds-criar > summary::-webkit-details-marker { display: none; }
/* "abrir ou fechar" com cara de botão: como texto cinza, o dono demorou a achar (11/out). */
.ds-criar > summary small { font-family: var(--ds-font-titulo); font-weight: 700; font-size: var(--ds-t1); white-space: nowrap;
                            color: var(--abz-tinta); background: var(--abz-card); border: 1px solid var(--ds-borda-campo);
                            border-radius: var(--ds-raio-campo); padding: .375rem .75rem; }
.ds-criar > summary:hover small { border-color: var(--ds-criar-forte); }
.ds-criar__corpo { padding: 0 var(--ds-e5) var(--ds-e5); display: grid; gap: var(--ds-e5); }
.ds-grupo { display: grid; gap: var(--ds-e4); grid-template-columns: repeat(3, 1fr); align-items: start; }
.ds-grupo--2 { grid-template-columns: 1fr 1fr; }
.ds-grupo--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grupo--5 { grid-template-columns: 1fr 1.2fr 2fr 2fr 1.4fr; }
.ds-rodape { display: flex; justify-content: flex-end; align-items: center; gap: var(--ds-e3); flex-wrap: wrap; }

/* Campo: rótulo em letra normal em cima, dica embaixo, caixa retangular. */
.ds-campo { display: grid; gap: var(--ds-e1); align-content: start; min-width: 0; }
.ds-campo > span { font-weight: 600; font-size: var(--ds-t2); color: var(--abz-tinta); }
.ds-campo > small { color: var(--ds-texto-2); font-size: var(--ds-t1); }
.ds-campo :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  font: inherit; font-size: var(--ds-t2); color: var(--abz-tinta); background: var(--abz-card); width: 100%;
  border: 1px solid var(--ds-borda-campo); border-radius: var(--ds-raio-campo); padding: .625rem .75rem; box-sizing: border-box; }
.ds-campo textarea { min-height: 4.5rem; resize: vertical; }
.ds-campo ::placeholder, .ds-busca input::placeholder { color: var(--ds-texto-2); opacity: 1; }
.ds-campo--arquivo { max-width: 32rem; }
.ds-arquivo { border: 2px dashed var(--ds-criar-forte); border-radius: var(--ds-raio-campo); background: var(--abz-card);
              padding: .75rem; text-align: center; color: var(--ds-criar-texto); font-weight: 600; font-size: var(--ds-t2);
              cursor: pointer; display: block; }
.ds-arquivo input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ds-check { display: inline-flex; align-items: center; gap: var(--ds-e2); font-size: var(--ds-t2); }
.ds-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--ds-procurar-forte); }

/* LISTA: painel neutro; a barra de PROCURAR é ciano e fica colada na tabela que filtra. */
/* Bloco com DEFINIÇÃO (dono, 11/out: "sem contraste, sem borda, padding na mesma cor"): contorno firme, sombra
   leve e o cabeçalho numa faixa de outro tom, separada do corpo por uma linha. */
.ds-catalogo { background: var(--abz-card); border: 1px solid var(--abz-btn-borda); border-radius: var(--ds-raio-painel);
               overflow: hidden; box-shadow: var(--abz-sombra); }
.ds-catalogo__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-e3);
                    padding: var(--ds-e4) var(--ds-e5); flex-wrap: wrap;
                    background: color-mix(in srgb, var(--abz-tinta) 5%, var(--abz-card)); border-bottom: 1px solid var(--abz-linha); }
.ds-catalogo__cab h2 { margin: 0; font-family: var(--ds-font-titulo); font-size: var(--ds-t4); font-weight: 700; color: var(--abz-tinta); }
.ds-catalogo__cab span { color: var(--ds-texto-2); font-size: var(--ds-t2); }
.ds-catalogo__corpo { padding: var(--ds-e4) var(--ds-e5) var(--ds-e5); }
.ds-procurar { display: flex; gap: var(--ds-e2); align-items: center; flex-wrap: wrap; margin: var(--ds-e3) var(--ds-e5) 0;
               padding: var(--ds-e3); background: var(--ds-procurar-fundo); border-radius: var(--ds-raio-pilula); }
.ds-busca { flex: 1 1 16rem; display: flex; align-items: center; gap: var(--ds-e2); background: var(--abz-card);
            border-radius: var(--ds-raio-pilula); padding: 0 var(--ds-e4); border: 1px solid var(--ds-borda-campo); }
.ds-busca svg { flex: none; color: var(--ds-procurar-texto); }
.ds-busca input { border: 0; outline: 0; font: inherit; font-size: var(--ds-t2); padding: .5rem 0; width: 100%;
                  background: transparent; color: var(--abz-tinta); box-shadow: none; }
.ds-pilula { font: inherit; font-size: var(--ds-t2); border-radius: var(--ds-raio-pilula); border: 1px solid var(--ds-borda-campo);
             padding: .5rem 2rem .5rem 1rem; cursor: pointer; flex: 0 1 auto; max-width: 16rem; }
.ds-limpar { font-size: var(--ds-t2); color: var(--ds-procurar-texto); text-decoration: underline; background: none; border: 0;
             cursor: pointer; padding: 0 var(--ds-e2); font-weight: 600; }
.ds-contagem { color: var(--ds-texto-2); font-size: var(--ds-t2); white-space: nowrap; padding: 0 var(--ds-e2); }

/* Tabela: rola dentro do painel, a página não. */
.ds-rolagem { overflow-x: auto; }
.ds-tabela { width: 100%; border-collapse: collapse; font-size: var(--ds-t2); margin-top: var(--ds-e3); }
.ds-tabela th { text-align: left; font-weight: 700; color: var(--abz-tinta); padding: var(--ds-e3) var(--ds-e4);
                border-bottom: 2px solid var(--abz-btn-borda); white-space: nowrap;
                background: color-mix(in srgb, var(--abz-tinta) 4%, var(--abz-card)); }
.ds-tabela td { padding: var(--ds-e3) var(--ds-e4); border-bottom: 1px solid var(--abz-linha); vertical-align: top; color: var(--abz-tinta); }
.ds-tabela tr:last-child td { border-bottom: 0; }
.ds-tabela tbody tr:hover td { background: color-mix(in srgb, var(--abz-fundo) 70%, var(--abz-card)); }
.ds-tabela tr.inativa td { color: var(--ds-texto-2); }
.ds-miniatura { width: 3rem; height: 3rem; border-radius: var(--ds-raio-campo); background: var(--abz-fundo); display: grid;
                place-items: center; color: var(--abz-tinta); font-size: var(--ds-t4); font-weight: 700;
                border: 1px solid var(--abz-linha); object-fit: cover; overflow: hidden; }
.ds-forte { font-weight: 600; }
.ds-etiqueta { display: inline-block; font-size: var(--ds-t1); padding: .125rem .5rem; border-radius: var(--ds-raio-pilula); font-weight: 600;
               background: color-mix(in srgb, var(--abz-verde-medio) 14%, var(--abz-card)); color: var(--ds-criar-texto); white-space: nowrap; }
.ds-etiqueta--off { background: var(--abz-chip-warn-bg); color: var(--abz-chip-warn-fg); }
.ds-etiqueta--info { background: var(--abz-chip-info-bg); color: var(--abz-chip-info-fg); }
.ds-etiqueta--perigo { background: var(--abz-chip-danger-bg); color: var(--abz-chip-danger-fg); }
.ds-aviso { padding: var(--ds-e3) var(--ds-e5); font-size: var(--ds-t2); font-weight: 600; color: var(--ds-criar-texto);
            background: var(--ds-criar-fundo); border-bottom: 1px solid var(--abz-linha); }

/* O seletor segue a intenção, não o preto global de 12/jul (app.css:355, !important): sai quando a
   última tela migrar (§15.8). */
.ds-campo select, .ds-campo select option, .ds-pilula, .ds-pilula option {
  color: var(--abz-tinta) !important; background-color: var(--abz-card) !important; }
.ds-pilula.ativo { color: #fff !important; background-color: var(--ds-procurar-forte) !important;
                   border-color: var(--ds-procurar-forte); font-weight: 700; }

@media (max-width: 760px) {
  .ds-grupo, .ds-grupo--2, .ds-grupo--4, .ds-grupo--5 { grid-template-columns: 1fr; }
  .ds-procurar { border-radius: var(--ds-raio-painel); }
  .ds-pilula { max-width: none; flex: 1 1 45%; }
  .ds-topo h1 { font-size: var(--ds-t5); }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ficha e detalhe (docs/UI-UX.md §15): grade de 2 colunas, lista de dados e conversa em bolhas.
   Bolha do agente em verde forte com letra branca (contraste AA); a do cliente, neutra. */
.ds-ficha { display: grid; grid-template-columns: minmax(18rem, 22rem) 1fr; gap: var(--ds-e5); align-items: start; }
.ds-ficha > div { display: grid; gap: var(--ds-e5); align-content: start; }
.ds-dados { margin: 0; }
.ds-dados > div { display: flex; justify-content: space-between; gap: var(--ds-e3); padding: var(--ds-e2) 0;
                  border-bottom: 1px dashed var(--abz-linha); font-size: var(--ds-t2); }
.ds-dados > div:last-child { border-bottom: 0; }
.ds-dados dt { color: var(--ds-texto-2); }
.ds-dados dd { margin: 0; font-weight: 600; text-align: right; }
.ds-chat { display: flex; flex-direction: column; gap: var(--ds-e2); max-height: 40rem; overflow-y: auto; padding-right: var(--ds-e2); }
.ds-msg { max-width: 80%; padding: var(--ds-e2) var(--ds-e3); border-radius: var(--ds-raio-painel); font-size: var(--ds-t2); line-height: 1.5; }
.ds-msg--inbound { align-self: flex-start; background: var(--abz-fundo); border: 1px solid var(--abz-linha); }
.ds-msg--outbound { align-self: flex-end; background: var(--ds-criar-forte); color: #fff; }
.ds-msg__meta { font-size: var(--ds-t1); opacity: .85; margin-bottom: 2px; }
.ds-msg__txt { white-space: pre-wrap; word-break: break-word; }
/* Voltar como botão leve pequeno, com a seta: como link cinza, o dono demorou a achar (11/out). */
.ds-voltar { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: var(--ds-e2);
             font-family: var(--ds-font-titulo); font-weight: 700; font-size: var(--ds-t1); color: var(--abz-tinta);
             background: var(--abz-card); border: 1px solid var(--ds-borda-campo); border-radius: var(--ds-raio-campo);
             padding: .375rem .75rem; text-decoration: none; line-height: 1.2; }
.ds-voltar::before { content: "←"; }
.ds-voltar:hover { border-color: var(--abz-tinta); }
@media (max-width: 860px) { .ds-ficha { grid-template-columns: 1fr; } }
.ds-btn--atual { background: var(--ds-procurar-forte); color: #fff; border-color: var(--ds-procurar-forte); }

/* Painel de PROCURAR com formulário (buscar leads, licitações): o mesmo molde do painel de criar, em
   ciano, porque a intenção é procurar (docs/UI-UX.md §15.1). */
.ds-painel-procurar { border: 1px solid color-mix(in srgb, var(--abz-cyan) 45%, var(--abz-linha));
                      border-top: 4px solid var(--ds-procurar-forte); border-radius: var(--ds-raio-painel);
                      background: var(--ds-procurar-fundo); }
.ds-painel-procurar > summary, .ds-painel-procurar__titulo {
  list-style: none; cursor: pointer; padding: var(--ds-e4) var(--ds-e5); font-family: var(--ds-font-titulo);
  font-weight: 700; font-size: var(--ds-t4); color: var(--ds-procurar-texto); display: flex;
  justify-content: space-between; align-items: baseline; gap: var(--ds-e3); }
.ds-painel-procurar > summary::-webkit-details-marker { display: none; }
.ds-painel-procurar > summary small { font-family: var(--ds-font-texto); font-weight: 400; font-size: var(--ds-t2); color: var(--ds-texto-2); }
.ds-btn--procurar { background: var(--ds-procurar-forte); color: #fff; }
.ds-btn--procurar:hover { background: color-mix(in srgb, var(--ds-procurar-forte) 85%, #000); }
/* Medidor (franquia, cota): a barra mostra quanto foi usado; a cor diz o nível. */
.ds-medidor { height: .375rem; border-radius: var(--ds-raio-pilula); background: var(--abz-linha); overflow: hidden; }
.ds-medidor > div { height: 100%; background: var(--ds-criar-forte); }
.ds-nivel--atencao { color: var(--abz-chip-warn-fg); }
.ds-nivel--critico, .ds-nivel--esgotado { color: var(--abz-perigo-fg); }
.ds-nivel--ok { color: var(--ds-criar-texto); }
.ds-medidor > div.ds-nivel--atencao { background: var(--abz-chip-warn-fg); }
.ds-medidor > div.ds-nivel--critico, .ds-medidor > div.ds-nivel--esgotado { background: var(--abz-perigo-fg); }

/* Peças pequenas de lista (docs/UI-UX.md §15.6): texto de apoio, etiqueta neutra, nota A–D, termo
   realçado na busca e sub-tabela aberta dentro de uma linha. */
.ds-sub { font-size: var(--ds-t1); color: var(--ds-texto-2); }
.ds-etiqueta--neutra { background: var(--abz-fundo); color: var(--abz-tinta); border: 1px solid var(--abz-linha); }
.ds-nota { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: var(--ds-raio-campo);
           font-family: var(--ds-font-titulo); font-weight: 800; font-size: var(--ds-t2); color: #fff; }
.ds-nota--A { background: var(--ds-criar-forte); }
.ds-nota--B { background: var(--ds-procurar-forte); }
.ds-nota--C { background: var(--abz-chip-warn-fg); }
.ds-nota--D { background: color-mix(in srgb, var(--abz-tinta) 60%, var(--abz-card)); }
.ds-pagina mark { background: var(--abz-chip-warn-bg); color: inherit; border-radius: 3px; padding: 0 2px; }
.ds-subtabela { background: var(--abz-fundo); padding: var(--ds-e2) var(--ds-e4) var(--ds-e3); }
.ds-subtabela .ds-tabela { margin-top: var(--ds-e1); }
.ds-subtabela .ds-tabela td, .ds-subtabela .ds-tabela th { border-bottom: 0; padding: var(--ds-e1) var(--ds-e3); }

/* Abas de uma lista (filtrar por situação é procurar: ciano), edição na própria linha e o painel de
   números (docs/UI-UX.md §15.6). */
.ds-abas { display: flex; align-items: center; gap: var(--ds-e1); flex-wrap: wrap; padding: 0 var(--ds-e5);
           border-bottom: 1px solid var(--abz-linha); }
.ds-aba { padding: var(--ds-e3) var(--ds-e4); border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
          background: none; cursor: pointer; font-family: var(--ds-font-titulo); font-weight: 700; font-size: var(--ds-t2);
          color: var(--ds-texto-2); display: inline-flex; align-items: center; gap: var(--ds-e2); text-decoration: none; }
.ds-aba b { background: var(--abz-fundo); border-radius: var(--ds-raio-pilula); padding: 0 var(--ds-e2); font-size: var(--ds-t1); }
.ds-aba.on { color: var(--ds-procurar-texto); border-bottom-color: var(--ds-procurar-forte); }
.ds-aba.on b { background: var(--ds-procurar-fundo); }
/* Linhas do catálogo da revenda (spec 195 E9): escolher a linha é procurar, em botões; e a galeria de
   fotos e vídeos do material. */
.ds-linhas { display: flex; flex-wrap: wrap; gap: var(--ds-e2); margin: var(--ds-e4) 0; }
.ds-linhas .ds-btn { border-radius: var(--ds-raio-pilula); text-decoration: none; }
.ds-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--ds-e3); }
.ds-galeria figure { margin: 0; }
.ds-galeria img, .ds-galeria video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                                     border-radius: var(--ds-raio-campo); border: 1px solid var(--abz-linha); }
.ds-galeria figcaption { font-size: var(--ds-t1); color: var(--ds-texto-2); margin-top: var(--ds-e1); }
.ds-edita { border: 1px solid transparent; border-radius: var(--ds-raio-campo); padding: var(--ds-e1) var(--ds-e2);
            font: inherit; font-size: var(--ds-t2); background: transparent; color: var(--abz-tinta); width: 100%; min-width: 6rem; }
.ds-edita:hover { border-color: var(--abz-linha); background: var(--abz-card); }
.ds-edita:focus { border-color: var(--ds-procurar-forte); background: var(--abz-card); outline: none; }
.ds-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--ds-e3); }
.ds-numero { background: var(--abz-card); border: 1px solid var(--abz-linha); border-radius: var(--ds-raio-painel); padding: var(--ds-e3) var(--ds-e4); }
.ds-numero > span { font-size: var(--ds-t1); color: var(--ds-texto-2); font-weight: 600; }
.ds-numero > strong { display: block; font-family: var(--ds-font-titulo); font-size: var(--ds-t5); font-weight: 800; margin: var(--ds-e1) 0; }
.ds-numero > small { font-size: var(--ds-t1); color: var(--ds-texto-2); }
.ds-numero--zero > strong { color: var(--abz-perigo-fg); }

/* Ferramentas de cálculo (ROI, Precificação; docs/UI-UX.md §15.6): rótulo de campo em <label>, a conta
   nascendo à vista, faixa de arrastar (travada quando não há para onde ir), linhas de conta com total, e
   o texto dentro dos gráficos SVG (medido no viewBox de 620, não em pixel: dono, 13/jul). */
.ds-campo > label { font-weight: 600; font-size: var(--ds-t2); color: var(--abz-tinta); }
.ds-derivado { font-size: var(--ds-t1); color: var(--ds-procurar-texto); font-weight: 700; }
.ds-faixa { margin-bottom: var(--ds-e4); }
.ds-faixa__topo { display: flex; justify-content: space-between; align-items: baseline; }
.ds-faixa__topo label { font-weight: 600; font-size: var(--ds-t2); }
.ds-faixa__valor { font-family: var(--ds-font-titulo); font-weight: 800; font-size: var(--ds-t3); color: var(--ds-procurar-texto); }
.ds-faixa input[type=range] { width: 100%; accent-color: var(--ds-procurar-forte); cursor: pointer; }
.ds-faixa__pontas { display: flex; justify-content: space-between; font-size: var(--ds-t1); color: var(--ds-texto-2); }
.ds-faixa.travada { opacity: .5; }
.ds-faixa.travada input[type=range] { cursor: not-allowed; }
.ds-conta > div { display: flex; justify-content: space-between; gap: var(--ds-e3); padding: var(--ds-e2) 0;
                  border-bottom: 1px solid var(--abz-linha); font-size: var(--ds-t2); }
.ds-conta > div:last-child { border-bottom: 0; }
.ds-conta b { font-family: var(--ds-font-titulo); }
.ds-conta .ds-conta__total { border-top: 2px solid var(--abz-linha); font-size: var(--ds-t3); font-weight: 800; }
.ds-conta .ds-conta__total b { color: var(--ds-criar-texto); }
.ds-veredito { border-left: 4px solid var(--ds-criar-forte); background: var(--abz-fundo); border-radius: var(--ds-raio-campo);
               padding: var(--ds-e3) var(--ds-e4); margin-top: var(--ds-e3); }
.ds-veredito strong { display: block; margin-top: var(--ds-e2); color: var(--ds-criar-texto); }
.ds-veredito--negativo { border-left-color: var(--abz-perigo-fg); }
.ds-veredito--negativo strong { color: var(--abz-perigo-fg); }
.ds-alerta { border-left: 4px solid var(--abz-chip-warn-fg); background: var(--abz-chip-warn-bg); color: var(--abz-tinta);
             border-radius: var(--ds-raio-campo); padding: var(--ds-e3) var(--ds-e4); font-size: var(--ds-t2); line-height: 1.5; }
.g-txt { font-family: var(--ds-font-titulo); }
.g-eixo { font-size: 15px; font-weight: 700; fill: var(--ds-texto-2); }
.g-rotulo { font-size: 14px; font-weight: 700; fill: var(--ds-texto-2); }
.g-valor { font-size: 16px; font-weight: 800; }
.g-destaque { font-size: 17px; font-weight: 800; }
/* Painel de um elemento só (título + conteúdo), para telas de ferramenta (docs/UI-UX.md §15.6). */
.ds-painel { background: var(--abz-card); border: 1px solid var(--abz-linha); border-radius: var(--ds-raio-painel);
             padding: var(--ds-e4) var(--ds-e5); margin-bottom: var(--ds-e4); }
.ds-painel > h2 { margin: 0 0 var(--ds-e3); font-family: var(--ds-font-titulo); font-size: var(--ds-t4); font-weight: 700; color: var(--abz-tinta); }
/* Campo alterado e ainda não salvo: o dono vê o que falta gravar. */
.ds-edita.sujo { border-color: var(--abz-chip-warn-fg); background: var(--abz-chip-warn-bg); }
.ds-painel > .ds-campo, .ds-painel > .ds-grupo, .ds-painel > .ds-faixa { margin-bottom: var(--ds-e3); }
/* Grade de campos que se ajusta à largura, e o total em destaque (Precificação; docs/UI-UX.md §15.6). */
.ds-grupo--auto { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.ds-destaque { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-e3); margin-top: var(--ds-e3);
               padding: var(--ds-e3) var(--ds-e4); background: var(--abz-fundo); border: 1px solid var(--ds-procurar-forte);
               border-radius: var(--ds-raio-painel); }
.ds-destaque > span:first-child { font-size: var(--ds-t2); color: var(--ds-texto-2); }
.ds-destaque > span:last-child { font-family: var(--ds-font-titulo); font-size: var(--ds-t5); font-weight: 800; color: var(--ds-criar-texto); }
.ds-destaque--leve { border-style: dashed; }
.ds-destaque--leve > span:last-child { font-size: var(--ds-t3); }
/* Exportar uma lista (LeadGen → planilha ou Campanha; spec 160): é ENVIAR, então a borda é a do criar
   (verde). Nome e opções numa linha, os dois destinos no rodapé. */
.ds-exportar { border: 1px solid var(--ds-criar-borda); border-left: 4px solid var(--ds-criar-forte);
               border-radius: var(--ds-raio-painel); background: var(--abz-card); padding: var(--ds-e4) var(--ds-e5);
               margin-bottom: var(--ds-e4); display: grid; gap: var(--ds-e3); }
.ds-exportar__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-e3); flex-wrap: wrap; }
.ds-exportar__cab h3 { margin: 0; font-family: var(--ds-font-titulo); font-size: var(--ds-t4); font-weight: 700; color: var(--abz-tinta); }
.ds-exportar__campos { display: grid; grid-template-columns: minmax(14rem, 28rem) auto; gap: var(--ds-e4); align-items: end; }
.ds-exportar > .ds-sub { margin: 0; }
@media (max-width: 720px) { .ds-exportar__campos { grid-template-columns: 1fr; } }
/* Chave de envio automático da campanha (spec 160): desligada é neutra; ligada ganha a borda do criar
   para o dono ver de longe que a campanha está andando sozinha. */
.ds-auto { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-e4); flex-wrap: wrap;
           padding: var(--ds-e3) var(--ds-e5); border: 1px solid var(--abz-linha); border-radius: var(--ds-raio-painel);
           background: var(--abz-card); }
.ds-auto > div { display: grid; gap: var(--ds-e1); }
.ds-auto b { font-family: var(--ds-font-titulo); font-size: var(--ds-t3); color: var(--abz-tinta); }
.ds-auto--on { border-color: var(--ds-criar-borda); border-left: 4px solid var(--ds-criar-forte); background: var(--ds-criar-fundo); }
/* O número do passo de um funil (LeadGen: buscar → limpar → exportar). Herda a cor do título. */
.ds-passo { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: var(--ds-e2);
            border-radius: 50%; border: 2px solid currentColor; font-size: .8em; font-weight: 800;
            font-variant-numeric: tabular-nums; vertical-align: .1em; }
/* Prévia da mensagem da campanha (spec 161): a bolha verde do WhatsApp sobre o fundo da conversa, nos
   dois temas, com a mídia em cima e o texto com as quebras de linha que o dono digitou. */
.ds-previa { display: grid; gap: var(--ds-e2); align-content: start; }
.ds-previa__titulo { font-size: var(--ds-t2); font-weight: 600; color: var(--abz-tinta); }
.ds-previa__tela { background: #efeae2; border-radius: var(--ds-raio-painel); padding: var(--ds-e4); min-height: 8rem;
                   border: 1px solid var(--abz-linha); }
:root[data-theme="dark"] .ds-previa__tela { background: #0b141a; }
.ds-previa__bolha { background: #d9fdd3; color: #111b21; border-radius: .5rem; padding: .375rem; max-width: 20rem;
                    margin-left: auto; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
:root[data-theme="dark"] .ds-previa__bolha { background: #005c4b; color: #e9edef; }
.ds-previa__midia { display: block; width: 100%; border-radius: .375rem; margin-bottom: .25rem; }
.ds-previa__texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.35; padding: .125rem .25rem; }
.ds-previa__vazio { opacity: .7; font-style: italic; }
.ds-previa__bolha + .ds-previa__bolha { margin-top: .375rem; }
.ds-previa__anexo { display: block; padding: .5rem; margin-bottom: .25rem; border-radius: .375rem; font-weight: 600;
                    background: rgba(0, 0, 0, .06); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
/* O teste da campanha (spec 161): o número e o botão numa linha, embaixo da prévia. */
.ds-teste { display: flex; align-items: end; gap: var(--ds-e3); flex-wrap: wrap; }
.ds-teste > .ds-campo { flex: 1 1 12rem; }
/* Mídia da campanha (spec 161): o seletor e o "Subir arquivo" na mesma linha. */
.ds-midia-campanha { display: flex; align-items: end; gap: var(--ds-e3); flex-wrap: wrap; }
.ds-midia-campanha > .ds-campo { flex: 1 1 14rem; }
.ds-arquivo-btn { position: relative; overflow: hidden; }
.ds-arquivo-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }