/* ===========================================================================
   Fase 22: o layout novo do Dashboard Mensal (painel/dashboard.html).

   Todo o CSS novo do Dashboard mora aqui, e só aqui. Regras:
   - toda regra começa com .layout-dash (a classe do <body> do dashboard.html),
     então nada deste arquivo alcança o Painel, o relatório ou o login — que
     nem carregam este arquivo;
   - variáveis com o prefixo --d-, para não colidir com as do style.css
     (--largura-conteudo) nem com as do login.css (--bg, --card, --fg...);
   - sem @import, sem url() externa e sem fonte própria: o Dashboard usa a
     mesma fonte do Painel (a do body, em style.css);
   - carregado DEPOIS do style.css. As regras antigas dash-* e tendencia-* de
     lá continuam valendo até a etapa 22.7, que as remove.

   22.1: as variáveis, com os valores de partida do protótipo aprovado.
   22.2b: o topo novo (6 KPIs e Top 3), com classes novas dash-kpi-* e
   dash-top3-*. O resto do Dashboard segue no layout antigo até a sua etapa.
   22.3: cabeçalho (dash-cab-*), atalhos e filtro de comparação (dash-filtro-*).
   22.4b: o cartão da Distribuição de investimento (dash-dist-*).
   22.4a: o cartão do Ranking. Tudo preso a .dash-ranking: as classes
   dash-rank-item/-nome/-valor das barras são as mesmas da Distribuição, que
   só muda na 22.4b.
   22.5a: o comparativo por vendedor (dash-vend-*), preso a .dash-vend-secao,
   com o seletor de métrica, a variação em % e a etiqueta "2 meses";
   22.5b: o comparativo por conjunto (dash-conj-*), preso a .dash-conj-secao,
   só o layout do protótipo, sem variação, etiqueta nem seletor.
   22.6: as Tendências (dash-tend-*), presas a .dash-tend-secao: cartões,
   grade de 2 colunas e o visual do gráfico, sem mudar o desenho.
   22.7a: Score e Alertas do mês num cartão (dash-info-*, preso a
   .dash-score-radar) e a linha Distribuição + Informações a partir de 1201px.
   22.7b: os Destaques do mês (dash-dest-*), presos a .dash-dest-secao: os 3
   cartões numa fileira só a partir de 801px.
   23.2: Conversas por dia (dash-cdia-*), preso a .dash-cdia-secao: botões de
   linha, legenda, o gráfico diário em SVG, o aviso de dias excluídos e os
   5 cards. 23.3: os cards de Projeção de fechamento e Dias acima.
   23.6: saem o subtítulo do Top 3, a nota do Ranking e a do comparativo por
   vendedor (o subtítulo do Ranking perde a dica de ordenação).
   23.7: sai a nota de alcance do comparativo por conjunto.
   27: Criativo por vendedor (dash-cria-*), preso a .dash-cria-secao: o
   cartão do bloco, o filtro, os cartões por criativo em 2 colunas a partir
   de 801px e 1 abaixo disso.
   28: Cidades em atuação (dash-mapa-*), preso a .dash-mapa: o mapa do Ceará
   com o próprio mês, a cobertura e a lateral; 2 colunas acima de 900px.
   27.1: a folga de 189px dos títulos s-* (10 atalhos) e, nos criativos, os
   botões de etiqueta, a etiqueta clicável e os "Ver mais".
   27.2: nos criativos, o cabeçalho com o "Mês dos criativos", os estados
   carregando e erro e a pílula "Em aprendizado".
   =========================================================================== */

.layout-dash {
  /* Superfícies e texto */
  --d-fundo: #f4f5f7;
  --d-cartao: #ffffff;
  --d-texto: #0f1115;
  --d-texto-secundario: #4a4f5a;
  --d-texto-fraco: #666c78;
  --d-linha: #e6e8ec;

  /* Marca (o mesmo vermelho do Painel) */
  --d-marca: #c8102e;

  /* Mês de comparação (anterior): a barra e o texto */
  --d-anterior: #7fb2d6;
  --d-anterior-texto: #35729b;

  /* Bom e ruim: a cor de preenchimento e a cor de texto, mais escura para
     ter contraste sobre o fundo claro */
  --d-bom: #13a36b;
  --d-bom-texto: #0b7a4f;
  --d-ruim: #d6293e;
  --d-ruim-texto: #b3152b;

  /* Etiqueta de variação dos KPIs: o texto e o fundo da pílula */
  --d-bom-fundo: #e3f6ee;
  --d-ruim-fundo: #fde8eb;
  --d-neutro-fundo: #f0f1f4;

  /* Medalhas do Top 3: fundo, borda e texto */
  --d-ouro-fundo: #fdf4dc;
  --d-ouro-borda: #f3e2ae;
  --d-ouro-texto: #8a6700;
  --d-prata-fundo: #eef0f3;
  --d-prata-borda: #d9dce2;
  --d-prata-texto: #4f5565;
  --d-bronze-fundo: #f8ead9;
  --d-bronze-borda: #ecd3b4;
  --d-bronze-texto: #8a561a;

  /* Medidas */
  --d-raio: 14px;
  --d-espaco: 14px;
  --d-sombra: 0 1px 2px rgba(16, 17, 21, 0.04), 0 4px 16px rgba(16, 17, 21, 0.04);
}

/* --- Cabeçalho ------------------------------------------------------------
   Visual novo SÓ dentro dele: o #carimbo-atualizacao não ganha classe nova,
   porque aplicarFrescor (frescor.js) troca o className inteiro dele. */
/* Fase 32: o HTML diz só "Dashboard"; as maiúsculas são daqui (a aba do
   navegador continua com o <title> de sempre). */
.layout-dash .dash-cab-titulo h1 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--d-texto);
  text-transform: uppercase;
}

.layout-dash .dash-cab-acoes {
  flex-wrap: wrap;
  gap: 10px;
}

.layout-dash .dash-cab-acoes .botao-primario {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.85rem;
  letter-spacing: 0;
}

/* "Voltar ao painel" é navegação secundária: contorno neutro. "Sair" mantém
   o contorno vermelho de .botao-sair (style.css). Os 9px/15px compensam a
   borda de 1px para a altura bater com a do botão sólido. */
.layout-dash .dash-cab-acoes .dash-cab-voltar {
  padding: 9px 15px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
}

.layout-dash .dash-cab-acoes .dash-cab-voltar:hover {
  background-color: var(--d-fundo);
}

.layout-dash .dash-cab-acoes .botao-sair {
  padding: 9px 15px;
}

/* Atalhos: continuam visíveis só a partir de 1024px (regra da Fase 21.7 em
   style.css); aqui muda só o visual. */
.layout-dash .dash-atalhos a {
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--d-texto-secundario);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 999px;
}

.layout-dash .dash-atalhos a:hover,
.layout-dash .dash-atalhos a:focus-visible {
  color: var(--d-marca);
  border-color: var(--d-marca);
}

/* Fase 27.1: com os 10 atalhos, a linha deles quebra em 2 de 1024 a 1524px
   de tela (1 linha a partir de 1525px), e o cabeçalho fixo passa de 140 para
   173px (medido em 01/11/2026). A folga de 154px da Fase 21.7 (style.css) deixava o título
   19px embaixo dele: 173 + 16 = 189px. Só no Dashboard e só onde há atalhos
   (a partir de 1024px, como a regra de lá). */
@media (min-width: 1024px) {
  .layout-dash [id^="s-"] {
    scroll-margin-top: 189px;
  }
}

/* Foco visível em tudo que é clicável no cabeçalho e no filtro. */
.layout-dash .dash-cab-acoes .botao-primario:focus-visible,
.layout-dash .dash-atalhos a:focus-visible,
.layout-dash .dash-filtro select:focus-visible,
.layout-dash .dash-filtro .botao-primario:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* --- Filtro de comparação ---------------------------------------------------
   O arranjo é o de sempre (style.css): uma linha a partir de 1024px, os
   campos lado a lado no tablet e empilhados abaixo de 600px. Aqui, o cartão,
   os campos e o aviso de mês em andamento. */
.layout-dash .dash-filtro {
  margin-bottom: 18px;
  padding: 16px 18px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-filtro .dash-campo {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-filtro .dash-campo select {
  min-width: 190px;
  padding: 9px 12px;
  color: var(--d-texto);
  border: 1px solid var(--d-linha);
  border-radius: 10px;
}

.layout-dash .dash-filtro .botao-primario {
  border-radius: 10px;
}

/* Sem 'display' aqui: quem esconde é a classe .oculto (style.css). Em tela
   larga o filtro é flex, e o aviso ocupa uma linha só para ele. */
.layout-dash .dash-filtro-aviso {
  flex-basis: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
  border-left: 3px solid var(--d-texto-fraco);
  border-radius: 8px;
}

/* --- Ranking de vendedores (#s-rank) ----------------------------------------
   Uma tabela só (protótipo v4): título da seção e subtítulo fora do cartão;
   no cartão, título "N vendedores" com a busca à direita, a tabela com rolagem
   própria e a nota no rodapé. As barras antigas (#ranking-grafico) ficam fora
   da tela até a 22.8, que remove o código delas. Tudo preso a .dash-ranking:
   dash-rank-item/-nome/-valor são classes da Distribuição também. */
.layout-dash .dash-rank-secao {
  margin: 26px 0 12px;
}

.layout-dash .dash-rank-secao .dash-titulo-grupo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-rank-subtitulo {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--d-texto-fraco);
}

/* 'display: block' em toda largura: tira o cartão da grade antiga da
   Fase 21.3 (barras | tabela) e do flex de linha que o .card-score ganha no
   celular. Sem padding: cabeçalho e tabela têm o seu (o rodapé com a nota
   saiu na Fase 23.6). */
.layout-dash .dash-ranking {
  display: block;
  margin-bottom: 18px;
  padding: 0;
  overflow: hidden;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-ranking #ranking-grafico {
  display: none;
}

/* Título do cartão e busca na mesma linha; em tela estreita a busca desce
   para a linha de baixo, de ponta a ponta. */
.layout-dash .dash-ranking .dash-rank-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--d-linha);
}

.layout-dash .dash-ranking .dash-rank-titulo-cartao {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-ranking .dash-rank-contagem {
  font-size: 12.5px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-ranking .dash-rank-espaco {
  flex: 1 1 auto;
}

/* Só para leitor de tela: o rótulo da busca existe, mas não aparece. */
.layout-dash .dash-ranking .dash-rank-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.layout-dash .dash-ranking .dash-rank-busca {
  flex: 0 1 240px;
  min-width: 0;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 10px;
}

.layout-dash .dash-ranking .dash-rank-busca:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* A região que rola: até 440px de altura e, em tela estreita, de lado —
   sempre dentro do cartão, nunca a página. Substitui o teto e a linha de
   cima que a tabela antiga tinha (.dash-rolagem-tabela). */
.layout-dash .dash-ranking #ranking-tabela {
  max-height: 440px;
  overflow: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.layout-dash .dash-ranking #ranking-tabela:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: -2px;
}

.layout-dash .dash-rank-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.layout-dash .dash-rank-tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--d-texto-fraco);
  background-color: var(--d-fundo);
  border-bottom: 1px solid var(--d-linha);
}

.layout-dash .dash-rank-tabela td {
  padding: 10px 14px;
  white-space: nowrap;
  color: var(--d-texto);
  border-bottom: 1px solid var(--d-linha);
}

.layout-dash .dash-rank-tabela .dash-rank-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.layout-dash .dash-rank-tabela tbody tr:hover td {
  background-color: var(--d-fundo);
}

/* Botão do cabeçalho: parece o rótulo; escurece no hover e fica escuro na
   coluna ativa. */
.layout-dash .dash-rank-ordenar {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.layout-dash .dash-rank-ordenar:hover,
.layout-dash .dash-rank-ordenar-ativa {
  color: var(--d-texto);
}

.layout-dash .dash-rank-ordenar:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

.layout-dash .dash-rank-tabela .dash-rank-posicao {
  width: 28px;
  font-weight: 700;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-rank-celula-vendedor {
  font-weight: 700;
}

/* O nome no meio da linha, alinhado com o quadradinho das iniciais. */
.layout-dash .dash-rank-vendedor {
  vertical-align: middle;
}

.layout-dash .dash-rank-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  vertical-align: middle;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
  border-radius: 7px;
}

/* Conversas: ~32% da largura, barra (8px) e o número ao lado. */
.layout-dash .dash-rank-tabela .dash-rank-col-conversas {
  width: 32%;
}

.layout-dash .dash-rank-conversas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.layout-dash .dash-rank-trilho {
  flex: 1 1 auto;
  min-width: 60px;
  height: 8px;
  overflow: hidden;
  background-color: var(--d-neutro-fundo);
  border-radius: 999px;
}

.layout-dash .dash-rank-barra {
  height: 100%;
  background-color: var(--d-marca);
  border-radius: 999px;
}

.layout-dash .dash-rank-conversas-numero {
  min-width: 34px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Custo: etiqueta verde ou vermelha, pela classe que renderizarRanking deu. */
.layout-dash .dash-rank-custo {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}

.layout-dash .dash-rank-custo-bom {
  color: var(--d-bom-texto);
  background-color: var(--d-bom-fundo);
}

.layout-dash .dash-rank-custo-alto {
  color: var(--d-ruim-texto);
  background-color: var(--d-ruim-fundo);
}

.layout-dash .dash-rank-linha-vazia td {
  padding: 22px 14px;
  text-align: center;
  white-space: normal;
  color: var(--d-texto-fraco);
}

@media (max-width: 600px) {
  .layout-dash .dash-ranking .dash-rank-espaco {
    display: none;
  }

  .layout-dash .dash-ranking .dash-rank-busca {
    flex: 1 1 100%;
  }
}

/* --- Distribuição de investimento (#s-dist) ---------------------------------
   Cartão do protótipo v4: cabeçalho com título, mês e total; uma linha por
   vendedor em três colunas (nome | barra | %). Tudo preso a .dash-dist-cartao:
   dash-rank-item/-nome/-valor e as barras são classes do Ranking também, e o
   .dash-ver-mais é do Painel. A lista, a ordem, os % e o "Ver mais" são de
   renderizarDistribuicao (dashboard.js); aqui só a aparência. */
.layout-dash .dash-dist-cartao {
  margin: 26px 0 18px;
  overflow: hidden;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-dist-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--d-linha);
}

.layout-dash .dash-dist-cabecalho .dash-titulo-grupo {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-dist-mes {
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-dist-espaco {
  flex: 1 1 auto;
}

.layout-dash .dash-dist-total {
  font-size: 12.5px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-dist-total strong {
  font-weight: 800;
  color: var(--d-texto);
}

/* O corpo deixa de ser um cartão próprio (.card-score) e vira o miolo deste.
   'display: block' também tira o flex de linha que o .card-score ganha no
   celular, que espremia as linhas. */
.layout-dash .dash-dist-cartao #distribuicao-investimento {
  display: block;
  margin: 0;
  padding: 8px 18px 14px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Três colunas em qualquer largura (no celular a regra antiga punha o nome
   numa linha só dele): o nome é cortado com reticências e tem o nome
   completo no title (dashboard-distribuicao-ui.js). */
.layout-dash .dash-dist-cartao .dash-rank-item {
  grid-template-columns: 96px minmax(0, 1fr) 50px;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  font-weight: 600;
}

.layout-dash .dash-dist-cartao .dash-rank-nome {
  grid-column: auto;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  color: var(--d-texto);
}

.layout-dash .dash-dist-cartao .dash-barra-trilho {
  height: 8px;
  background-color: var(--d-neutro-fundo);
}

.layout-dash .dash-dist-cartao .dash-barra-atual {
  background-color: var(--d-marca);
}

.layout-dash .dash-dist-cartao .dash-rank-valor {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-dist-cartao .dash-nota-volume {
  margin-top: 10px;
  padding: 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-dist-cartao .dash-vazio {
  padding: 10px 0;
  color: var(--d-texto-fraco);
}

/* "Ver mais / Ver menos" dentro do cartão, embaixo da lista. */
.layout-dash .dash-dist-cartao .dash-ver-mais-area {
  margin: 0;
  padding: 0 18px 14px;
}

.layout-dash .dash-dist-cartao .dash-ver-mais:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* --- Comparativo por vendedor (#s-vend) -------------------------------------
   Cartões do protótipo v4. Tudo preso a .dash-vend-secao: dash-card-
   comparativo, dash-metrica, dash-barra-*, dash-cobertura-*, dash-legenda,
   dash-toggle e dash-ver-mais são classes do comparativo por conjunto (22.5b),
   do Score e do Painel também. Os cartões, os valores, a escala das barras, os
   avisos, a cobertura e o "Ver mais" são de desenharComparativoVendedores
   (dashboard.js); as iniciais, de dashboard-comparativo-ui.js. Aqui só a
   aparência. */
.layout-dash .dash-vend-secao {
  margin-bottom: 8px;
}

.layout-dash .dash-vend-secao .dash-vend-cabecalho-secao {
  margin: 26px 0 12px;
}

.layout-dash .dash-vend-secao .dash-titulo-grupo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-vend-secao .dash-nota-volume {
  padding: 0;
  font-size: 12.5px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-vend-secao .dash-vend-cabecalho-secao .dash-nota-volume {
  margin-top: 2px;
}

/* Barra de controles: o seletor de métrica, a caixa e, empurrada para a
   direita, a legenda; em tela estreita quebra em linhas (no celular a regra
   antiga empilhava tudo em coluna). */
.layout-dash .dash-vend-secao .dash-controles-comparativo {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.layout-dash .dash-vend-secao .dash-toggle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-vend-secao .dash-toggle input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--d-marca);
}

.layout-dash .dash-vend-secao .dash-toggle input:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* Seletor de métrica: grupo segmentado; o botão ativo (aria-pressed="true")
   fica branco, com sombra leve. Em tela estreita os botões quebram em linhas
   dentro do grupo. */
.layout-dash .dash-vend-secao .dash-vend-metricas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  background-color: #eceef1;
  border-radius: 10px;
}

.layout-dash .dash-vend-secao .dash-vend-metrica-botao {
  padding: 5px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--d-texto-secundario);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.layout-dash .dash-vend-secao .dash-vend-metrica-botao:hover {
  color: var(--d-texto);
}

.layout-dash .dash-vend-secao .dash-vend-metrica-botao[aria-pressed="true"] {
  color: var(--d-texto);
  background-color: var(--d-cartao);
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.12);
}

.layout-dash .dash-vend-secao .dash-vend-metrica-botao:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 1px;
}

.layout-dash .dash-vend-secao .dash-legenda {
  gap: 6px 14px;
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-vend-secao .dash-legenda-cor {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* As duas cores dos meses: a marca para o atual, o cinza-azulado para o de
   comparação — na legenda e nas barras. */
.layout-dash .dash-vend-secao .dash-barra-atual {
  background-color: var(--d-marca);
}

.layout-dash .dash-vend-secao .dash-barra-anterior {
  background-color: var(--d-anterior);
}

/* Grade: 1 coluna; 2 a partir de 640px de tela, 3 a partir de 1024px e 4 a
   partir de 1700px. Medido em 19/10/2026, com a variação em %: a 1366px, em 4
   colunas (cartão de ~285px), o grupo de valores descia para a linha de baixo
   em Custo e Investido de todos os cartões; em 3 colunas (~384px) não desce
   em nenhum. A 1700px o cartão de 4 colunas tem ~360px. A regra antiga de 6
   colunas (a partir de 1688px de tela) não vale aqui. */
.layout-dash .dash-vend-secao .dash-grade-comparativo {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .layout-dash .dash-vend-secao .dash-grade-comparativo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .layout-dash .dash-vend-secao .dash-grade-comparativo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1700px) {
  .layout-dash .dash-vend-secao .dash-grade-comparativo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.layout-dash .dash-vend-secao .dash-card-comparativo {
  min-width: 0;
  padding: 16px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

/* Cabeçalho do cartão: iniciais e nome. O nome quebra dentro do cartão
   (overflow-wrap da regra antiga), nunca para fora. */
.layout-dash .dash-vend-secao .dash-vend-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.layout-dash .dash-vend-secao .dash-vend-iniciais {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
  border-radius: 7px;
}

.layout-dash .dash-vend-secao .dash-vend-cabecalho .dash-card-comparativo-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: 800;
  line-height: 1.25;
  color: var(--d-texto);
}

/* Etiqueta à direita do nome: "2 meses" (verde) ou "só <mês>" (neutra), de
   dashboard-comparativo-ui.js. Não quebra; o nome é que quebra. */
.layout-dash .dash-vend-secao .dash-vend-etiqueta {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
}

.layout-dash .dash-vend-secao .dash-vend-etiqueta-dois {
  color: var(--d-bom-texto);
  background-color: var(--d-bom-fundo);
}

.layout-dash .dash-vend-secao .dash-vend-etiqueta-um {
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
}

/* Uma métrica: na primeira linha o rótulo à esquerda e, à direita, o grupo
   de valores (.dash-vend-valores: o do mês atual, o do anterior e a
   variação), que dashboard-comparativo-ui.js monta com os dois valores que
   criarMetricaComparada desenhou. Flex com quebra: se o grupo não cabe ao lado
   do rótulo, desce INTEIRO para a linha de baixo, encostado à direita — nunca
   quebra dentro de um valor. Embaixo, as duas barras de 6px (a do mês atual,
   depois a do de comparação) e o aviso, quando há. */
.layout-dash .dash-vend-secao .dash-metrica {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 12px;
}

.layout-dash .dash-vend-secao .dash-metrica-rotulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-vend-secao .dash-vend-valores {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.layout-dash .dash-vend-secao .dash-barra-valor {
  white-space: nowrap;
  text-align: right;
}

.layout-dash .dash-vend-secao .dash-vend-valores .dash-barra-valor:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-vend-secao .dash-vend-valores .dash-barra-valor:nth-child(2) {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-anterior-texto);
}

/* Variação em %: as mesmas cores das etiquetas dos KPIs do topo. */
.layout-dash .dash-vend-secao .dash-vend-variacao {
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 999px;
}

.layout-dash .dash-vend-secao .dash-vend-variacao-boa {
  color: var(--d-bom-texto);
  background-color: var(--d-bom-fundo);
}

.layout-dash .dash-vend-secao .dash-vend-variacao-ruim {
  color: var(--d-ruim-texto);
  background-color: var(--d-ruim-fundo);
}

.layout-dash .dash-vend-secao .dash-vend-variacao-neutra {
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
}

/* A linha antiga (trilho | valor, em grade) vira só o trilho, de ponta a
   ponta: o valor foi para o grupo. */
.layout-dash .dash-vend-secao .dash-metrica .dash-barra-linha {
  display: block;
  flex: 0 0 100%;
  margin: 0;
}

.layout-dash .dash-vend-secao .dash-vend-valores + .dash-barra-linha {
  margin-top: 4px;
}

.layout-dash .dash-vend-secao .dash-barra-trilho {
  height: 6px;
  background-color: var(--d-neutro-fundo);
}

/* O aviso continua na cor de atenção da regra antiga (a ausência "não some no
   cinza", ver style.css); só o tamanho segue o protótipo. */
.layout-dash .dash-vend-secao .dash-sem-dado {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: 11px;
}

/* Seletor de métrica: com uma métrica escolhida (data-metrica na grade), os
   blocos das outras somem — display: none, que também os tira do leitor de
   tela. O cabeçalho e o rodapé de cobertura do cartão ficam. */
.layout-dash .dash-vend-secao .dash-grade-comparativo[data-metrica="conversas"] .dash-metrica:not([data-metrica="conversas"]),
.layout-dash .dash-vend-secao .dash-grade-comparativo[data-metrica="custo"] .dash-metrica:not([data-metrica="custo"]),
.layout-dash .dash-vend-secao .dash-grade-comparativo[data-metrica="investido"] .dash-metrica:not([data-metrica="investido"]),
.layout-dash .dash-vend-secao .dash-grade-comparativo[data-metrica="alcance"] .dash-metrica:not([data-metrica="alcance"]),
.layout-dash .dash-vend-secao .dash-grade-comparativo[data-metrica="frequencia"] .dash-metrica:not([data-metrica="frequencia"]) {
  display: none;
}

/* Rodapé de cobertura: linha leve em cima; o botão ocupa a largura toda (alvo
   de toque da Fase 19) e a primeira linha parece link, sublinhada com
   pontilhado. */
.layout-dash .dash-vend-secao .dash-cobertura {
  margin-top: 12px;
  padding-top: 10px;
  font-size: 12px;
  color: var(--d-texto-fraco);
  border-top: 1px solid var(--d-linha);
}

.layout-dash .dash-vend-secao .dash-cobertura-numeros {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.layout-dash .dash-vend-secao .dash-cobertura-frase {
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-vend-secao .dash-cobertura-lista {
  font-size: 12px;
  color: var(--d-texto-secundario);
  overflow-wrap: anywhere;
}

.layout-dash .dash-vend-secao .dash-cobertura-vazio {
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-vend-secao .dash-cobertura-botao:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
  border-radius: 4px;
}

/* "Ver mais / Ver menos" centralizado embaixo dos cartões. */
.layout-dash .dash-vend-secao .dash-ver-mais-area {
  margin: 16px 0 8px;
}

/* Fase 23.6: sem a nota de alcance, a área do "Ver mais" é a última da seção;
   com o botão escondido, ela sai inteira, para os 16px de cima não sobrarem
   antes do comparativo por conjunto (o espaço volta aos 26px das outras). */
.layout-dash .dash-vend-secao .dash-ver-mais-area:has(> .dash-ver-mais.oculto) {
  display: none;
}

.layout-dash .dash-vend-secao .dash-ver-mais:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* --- Comparativo por conjunto de anúncios (#s-conj) ------------------------
   Cartões do protótipo v4, no mesmo visual dos do vendedor — e só o layout: o
   cartão de conjunto não ganha variação, etiqueta, seletor, Custo nem
   Investido. Tudo preso a .dash-conj-secao: dash-card-comparativo,
   dash-metrica, dash-barra-*, dash-legenda, dash-toggle e dash-ver-mais são
   classes do comparativo por vendedor, do Score e do Painel também. Os
   cartões, os valores, a escala das barras, os avisos, a segmentação e o "Ver
   mais" são de desenharComparativoConjuntos (dashboard.js); as iniciais do
   vendedor e o grupo de valores, de dashboard-conjunto-ui.js. As medidas são
   as do bloco do vendedor, repetidas aqui de propósito: mexer numa seção não
   pode mudar a outra. */
.layout-dash .dash-conj-secao {
  margin-bottom: 8px;
}

.layout-dash .dash-conj-secao .dash-conj-cabecalho-secao {
  margin: 26px 0 12px;
}

.layout-dash .dash-conj-secao .dash-titulo-grupo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-conj-secao .dash-nota-volume {
  padding: 0;
  font-size: 12.5px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-conj-secao .dash-conj-cabecalho-secao .dash-nota-volume {
  margin-top: 2px;
}

/* Barra de controles: a caixa à esquerda e, empurrada para a direita, a
   legenda; em tela estreita a legenda desce (no celular a regra antiga
   empilhava tudo em coluna). */
.layout-dash .dash-conj-secao .dash-controles-comparativo {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 14px;
  margin-bottom: 12px;
}

.layout-dash .dash-conj-secao .dash-toggle {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-conj-secao .dash-toggle input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--d-marca);
}

.layout-dash .dash-conj-secao .dash-toggle input:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

.layout-dash .dash-conj-secao .dash-legenda {
  gap: 6px 14px;
  margin: 0 0 0 auto;
  font-size: 12px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-conj-secao .dash-legenda-cor {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* As duas cores dos meses: a marca para o atual, o cinza-azulado para o de
   comparação — na legenda e nas barras. */
.layout-dash .dash-conj-secao .dash-barra-atual {
  background-color: var(--d-marca);
}

.layout-dash .dash-conj-secao .dash-barra-anterior {
  background-color: var(--d-anterior);
}

/* Grade: as mesmas faixas do vendedor — 1 coluna; 2 a partir de 640px de
   tela, 3 a partir de 1024px e 4 a partir de 1700px. A regra antiga de 6
   colunas (a partir de 1688px de tela) não vale aqui. */
.layout-dash .dash-conj-secao .dash-grade-comparativo {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .layout-dash .dash-conj-secao .dash-grade-comparativo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .layout-dash .dash-conj-secao .dash-grade-comparativo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1700px) {
  .layout-dash .dash-conj-secao .dash-grade-comparativo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.layout-dash .dash-conj-secao .dash-card-comparativo {
  min-width: 0;
  padding: 16px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

/* Cabeçalho do cartão: as iniciais do vendedor (quando há vendedor) e o
   título "Conjunto · VENDEDOR", que quebra dentro do cartão. */
.layout-dash .dash-conj-secao .dash-conj-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.layout-dash .dash-conj-secao .dash-conj-iniciais {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
  border-radius: 7px;
}

.layout-dash .dash-conj-secao .dash-conj-cabecalho .dash-card-comparativo-titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: 800;
  line-height: 1.25;
  color: var(--d-texto);
}

/* Segmentação logo abaixo do cabeçalho (até 3 áreas e "+ N"; a lista inteira
   fica no title) e o nome do conjunto: os dois quebram dentro do cartão. */
.layout-dash .dash-conj-secao .dash-card-comparativo-sub {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--d-texto-fraco);
  overflow-wrap: anywhere;
}

.layout-dash .dash-conj-secao .dash-card-comparativo-nome {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--d-texto);
  overflow-wrap: anywhere;
}

/* Uma métrica: na primeira linha o rótulo à esquerda e, à direita, o grupo
   de valores (.dash-conj-valores: o do mês atual e o do anterior, SEM
   variação), que dashboard-conjunto-ui.js monta com os dois valores que
   criarMetricaComparada desenhou. Flex com quebra: se o grupo não cabe ao lado
   do rótulo, desce INTEIRO para a linha de baixo, encostado à direita — nunca
   quebra dentro de um valor. Embaixo, as duas barras de 6px e o aviso. */
.layout-dash .dash-conj-secao .dash-metrica {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 12px;
}

.layout-dash .dash-conj-secao .dash-metrica-rotulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-conj-secao .dash-conj-valores {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.layout-dash .dash-conj-secao .dash-barra-valor {
  white-space: nowrap;
  text-align: right;
}

.layout-dash .dash-conj-secao .dash-conj-valores .dash-barra-valor:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-conj-secao .dash-conj-valores .dash-barra-valor:nth-child(2) {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-anterior-texto);
}

/* A linha antiga (trilho | valor, em grade) vira só o trilho, de ponta a
   ponta: o valor foi para o grupo. */
.layout-dash .dash-conj-secao .dash-metrica .dash-barra-linha {
  display: block;
  flex: 0 0 100%;
  margin: 0;
}

.layout-dash .dash-conj-secao .dash-conj-valores + .dash-barra-linha {
  margin-top: 4px;
}

.layout-dash .dash-conj-secao .dash-barra-trilho {
  height: 6px;
  background-color: var(--d-neutro-fundo);
}

/* O aviso continua na cor de atenção da regra antiga; só o tamanho segue o
   protótipo. */
.layout-dash .dash-conj-secao .dash-sem-dado {
  flex: 0 0 100%;
  margin: 2px 0 0;
  font-size: 11px;
}

/* "Ver mais / Ver menos" centralizado embaixo dos cartões. */
.layout-dash .dash-conj-secao .dash-ver-mais-area {
  margin: 16px 0 8px;
}

/* Fase 23.7: sem a nota de alcance, a área do "Ver mais" é a última da seção;
   com o botão escondido, ela sai inteira, para os 16px de cima não sobrarem
   antes das Tendências (o espaço fica nos 26px das outras seções), como no
   comparativo por vendedor (Fase 23.6). */
.layout-dash .dash-conj-secao .dash-ver-mais-area:has(> .dash-ver-mais.oculto) {
  display: none;
}

.layout-dash .dash-conj-secao .dash-ver-mais:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* --- Tendências mês a mês (#s-tend) ---------------------------------------
   Cartões do protótipo v4, só o layout. Tudo preso a .dash-tend-secao:
   card-score, dash-bloco, dash-titulo-bloco e dash-campo são classes do
   Score, do Painel e do filtro também. Os cartões, os seletores de ano (um
   por gráfico, nunca recriados) e o SVG são de carregarTendencias e
   criarGraficoTendencia (dashboard.js); a área sob a linha, o mês atual nos
   rótulos e o aria-label, de dashboard-tendencias-ui.js. O SVG continua com o
   viewBox na largura real da área (o texto sai no tamanho escrito em qualquer
   tela); aqui só cor, espessura e peso. Propriedade CSS vence o atributo de
   apresentação do SVG, e o tamanho das fontes não muda: a posição dos rótulos
   é calculada com ele. */
.layout-dash .dash-tend-secao {
  margin: 26px 0 8px;
}

.layout-dash .dash-tend-secao .dash-titulo-grupo {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

/* Uma coluna; duas a partir de 1201px de tela. */
.layout-dash .dash-tend-secao #tendencias {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 1201px) {
  .layout-dash .dash-tend-secao #tendencias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* O Alcance ocupa a linha inteira (pedido do Anderson, 22.6 ajuste 1).
     Pelo data-metrica real do cartão, nunca pela posição; e preso a
     #tendencias .tendencia: o mesmo data-metrica="alcance" existe num botão
     do seletor do comparativo por vendedor. Ao cruzar os 1201px a largura da
     área muda, e o 'resize' da janela redesenha o gráfico na largura nova
     (redesenharTendenciasNaNovaLargura, dashboard.js). */
  .layout-dash .dash-tend-secao #tendencias .tendencia[data-metrica="alcance"] {
    grid-column: 1 / -1;
  }
}

/* O cartão em coluna: cabeçalho, a nota (no Alcance, logo abaixo do título,
   como o subtítulo do protótipo) e o gráfico. Em coluna a área ocupa a
   largura toda — o gráfico mede a área ao desenhar. 'align-items: stretch',
   'flex-wrap' e os gaps desfazem a regra de celular do .card-score (style.css,
   até 600px: align-items center), que encolhia a área vazia a 0px na hora do
   desenho — medido: o gráfico caía na largura padrão de 640 e o texto em
   ~5px a 375px de tela. */
.layout-dash .dash-tend-secao #tendencias .tendencia {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-tend-secao .tendencia-cabecalho {
  order: 0;
  gap: 10px;
  margin-bottom: 6px;
}

.layout-dash .dash-tend-secao .tendencia-nota {
  order: 1;
  margin: 0 0 8px;
  padding: 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-tend-secao .tendencia-area {
  order: 2;
  min-width: 0;
}

.layout-dash .dash-tend-secao .tendencia-cabecalho .dash-titulo-bloco {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-texto-secundario);
}

/* O seletor de ano: o rótulo "Ano" pequeno e o select compacto. */
.layout-dash .dash-tend-secao .dash-campo-ano {
  gap: 6px;
  font-size: 11px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-tend-secao .dash-campo-ano select {
  padding: 5px 26px 5px 10px;
  font-size: 12px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 8px;
}

.layout-dash .dash-tend-secao .dash-campo-ano select:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* O gráfico: grade na cor das linhas do Dashboard, linha da marca com 2,5px,
   área da marca a 8%, ponto fechado cheio e o do mês em andamento vazado. */
.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-grade,
.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-eixo-x {
  stroke: var(--d-linha);
}

.layout-dash .dash-tend-secao .grafico-tendencia .dash-tend-area {
  fill: var(--d-marca);
  fill-opacity: 0.08;
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-segmento {
  stroke: var(--d-marca);
  stroke-width: 2.5px;
  stroke-linecap: round;
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-ponto {
  fill: var(--d-marca);
  stroke: var(--d-marca);
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-ponto.tendencia-parcial {
  fill: var(--d-cartao);
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-valor {
  fill: var(--d-texto);
  font-weight: 700;
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-ate,
.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-eixo-y,
.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-mes {
  fill: var(--d-texto-fraco);
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-mes.dash-tend-mes-atual {
  fill: var(--d-texto);
  font-weight: 700;
}

.layout-dash .dash-tend-secao .grafico-tendencia .tendencia-fio {
  stroke: var(--d-linha);
}

/* --- Informações: Score e Alertas do mês (#s-info) -------------------------
   Um cartão só, como o "Score & alertas do mês" do protótipo v4, feito do
   contêiner real .dash-score-radar: dentro dele, os dois blocos reais (o
   Score e os Alertas) perdem o fundo próprio e ficam lado a lado, quebrando
   de linha em tela estreita. Os títulos ("Score do mês", "Alertas do mês"),
   o número, o selo, a cobertura, as três linhas de alertas, os resolvidos e a
   campanha com mais alertas são os de renderizarScoreDoMes e
   renderizarRadarAlertas (dashboard.js); o anel, de dashboard-informacoes-ui.js.
   Tudo preso a .dash-score-radar: card-score, score-numero, situacao-badge,
   barra-progresso e dash-cobertura são classes do Painel e do comparativo
   também. Os Destaques do mês ficam para a 22.7b. */
.layout-dash .dash-score-radar {
  /* As cores das faixas, as mesmas de .situacao-* (style.css): o anel não tem
     fundo para herdar delas, então repete os valores aqui. */
  --d-situacao-boa: #1b8a3d;
  --d-situacao-atencao: #b7791f;
  --d-situacao-critica: #c8102e;
  --d-situacao-indeterminada: #757575;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

/* Os dois blocos reais sem cartão próprio. 'display: block' também desfaz o
   flex de linha que o .card-score ganha no celular. */
.layout-dash .dash-score-radar .dash-card-score,
.layout-dash .dash-score-radar .dash-card-radar {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* O bloco do Score pode encolher até a largura do cartão (22.8b): com 'flex:
   0 0 auto' ele ficava na largura do texto mais longo, e no mês sem score a
   cobertura ("calculado com 0 de 31 dias — nenhum score gravado neste mês.")
   o levava a 343px — passava do cartão abaixo de ~440px de tela e dava
   rolagem horizontal à página (11px a 375px). Encolhendo, a cobertura quebra
   de linha. Com score, o bloco cabe e nada muda. */
.layout-dash .dash-score-radar .dash-card-score {
  flex: 0 1 auto;
  max-width: 100%;
  text-align: center;
}

.layout-dash .dash-score-radar .dash-card-radar {
  flex: 1 1 220px;
}

.layout-dash .dash-score-radar .dash-titulo-bloco {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--d-texto-secundario);
}

/* O medidor: o anel e, no centro, o número real. */
.layout-dash .dash-score-radar .dash-info-medidor {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
}

.layout-dash .dash-score-radar .dash-info-anel {
  display: block;
}

.layout-dash .dash-score-radar .dash-info-anel-fundo,
.layout-dash .dash-score-radar .dash-info-anel-valor {
  fill: none;
  stroke-width: 12px;
}

.layout-dash .dash-score-radar .dash-info-anel-fundo {
  stroke: var(--d-linha);
}

.layout-dash .dash-score-radar .dash-info-anel-valor {
  stroke-linecap: round;
}

.layout-dash .dash-score-radar .dash-info-anel-valor.situacao-boa {
  stroke: var(--d-situacao-boa);
}

.layout-dash .dash-score-radar .dash-info-anel-valor.situacao-atencao {
  stroke: var(--d-situacao-atencao);
}

.layout-dash .dash-score-radar .dash-info-anel-valor.situacao-critica {
  stroke: var(--d-situacao-critica);
}

.layout-dash .dash-score-radar .dash-info-anel-valor.situacao-indeterminada {
  stroke: var(--d-situacao-indeterminada);
}

.layout-dash .dash-score-radar .dash-info-medidor .score-numero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--d-texto);
}

/* O selo da faixa: a cor continua vindo de .situacao-* (style.css). */
.layout-dash .dash-score-radar .situacao-badge {
  padding: 3px 10px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 7px;
}

/* A barra dá lugar ao anel: continua desenhada (o número exato está nela),
   só não aparece. */
.layout-dash .dash-score-radar .barra-progresso {
  display: none;
}

.layout-dash .dash-score-radar .dash-cobertura {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

/* Alertas: o mês, as três linhas e a campanha com mais alertas. */
.layout-dash .dash-score-radar .dash-card-radar .dash-periodo {
  margin: -6px 0 10px;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-score-radar .dash-radar-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Uma linha: o rótulo real (com a bolinha em emoji), a contagem e, à direita,
   os resolvidos. Se não couber, os resolvidos descem inteiros. */
.layout-dash .dash-score-radar .dash-radar-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 8px 10px;
  font-weight: 600;
  background-color: var(--d-fundo);
  border-bottom: 0;
  border-radius: 10px;
}

.layout-dash .dash-score-radar .dash-radar-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-texto);
}

.layout-dash .dash-score-radar .dash-radar-contagem {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--d-texto);
}

.layout-dash .dash-score-radar .dash-radar-resolvidos {
  flex: 0 0 130px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-score-radar .dash-radar-destaque {
  margin: 12px 0 0;
  padding: 10px 12px;
  background-color: var(--d-fundo);
  border-left: 3px solid var(--d-marca);
  border-radius: 0 8px 8px 0;
}

.layout-dash .dash-score-radar .dash-radar-destaque-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-score-radar .dash-radar-destaque-nome {
  font-size: 12.5px;
  color: var(--d-texto);
}

.layout-dash .dash-score-radar .dash-radar-destaque-valor {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-score-radar .dash-vazio {
  font-size: 13px;
  color: var(--d-texto-fraco);
}

/* --- Pareamento: Distribuição à esquerda, Informações à direita ------------
   A partir de 1201px de tela (o protótipo: 1 coluna até 1200px), em
   1,1fr / 1fr — no lugar da linha da Fase 21.4 (style.css: 5fr / 7fr só a
   partir de 1516px). Os contêineres são os reais (.dash-linha-inferior e as
   duas colunas); a ordem é a do HTML, a Distribuição primeiro. Mesmo
   seletor da regra antiga, carregado depois: vence nas larguras em que as
   duas valem. */
@media (min-width: 1201px) {
  .layout-dash .dash-linha-inferior {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
  }

  /* O título das Informações na mesma altura do da Distribuição (26px). */
  .layout-dash .dash-linha-inferior .dash-coluna-informacoes .dash-rotulo-informacoes {
    margin-top: 26px;
  }
}

/* --- Destaques do mês ------------------------------------------------------
   Os cartões do protótipo v4. Tudo preso a .dash-dest-secao. Os cartões, os
   textos ("Melhor conjunto: …", "R$ … por conversa", "N conversas em D dias
   de veiculação"), a ordem (melhor conjunto, pior conjunto, criativo mais
   eficiente), os cartões neutros de "sem volume" e as notas de volume são de
   renderizarDestaques e criarCardDestaque (dashboard.js); aqui só a
   aparência. Bom e ruim continuam ditos por extenso no título ("Melhor",
   "Pior"); a cor só reforça. */
.layout-dash .dash-dest-secao {
  /* As cores reais da marcação de cada cartão (style.css:
     .dash-destaque-positivo/-negativo/-neutro), agora na borda de cima. */
  --d-dest-positivo: #1b8a3d;
  --d-dest-negativo: #c8102e;
  --d-dest-neutro: #b7791f;
  margin-bottom: 8px;
}

.layout-dash .dash-dest-secao .dash-titulo-grupo {
  margin: 26px 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-dest-secao .dash-destaques {
  gap: 14px;
}

.layout-dash .dash-dest-secao .dash-card-destaque {
  min-width: 0;
  margin: 0 0 12px;
  padding: 16px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-top: 3px solid var(--d-dest-neutro);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-dest-secao .dash-card-destaque.dash-destaque-positivo {
  border-top-color: var(--d-dest-positivo);
}

.layout-dash .dash-dest-secao .dash-card-destaque.dash-destaque-negativo {
  border-top-color: var(--d-dest-negativo);
}

.layout-dash .dash-dest-secao .dash-destaque-titulo {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--d-texto-fraco);
  overflow-wrap: anywhere;
}

.layout-dash .dash-dest-secao .dash-destaque-nome {
  margin: 8px 0 2px;
  font-weight: 800;
  color: var(--d-texto);
}

.layout-dash .dash-dest-secao .dash-destaque-sub {
  margin: 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
  overflow-wrap: anywhere;
}

/* O valor: o número em "R$" não quebra (o espaço depois de "R$" é o que não
   quebra, do toLocaleString); "por conversa" pode descer. */
.layout-dash .dash-dest-secao .dash-destaque-valor {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--d-texto);
}

.layout-dash .dash-dest-secao .dash-destaque-positivo .dash-destaque-valor {
  color: var(--d-bom-texto);
}

.layout-dash .dash-dest-secao .dash-destaque-negativo .dash-destaque-valor {
  color: var(--d-ruim-texto);
}

.layout-dash .dash-dest-secao .dash-destaque-base {
  margin-top: 4px;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-dest-secao .dash-nota-volume {
  padding: 0;
  font-size: 12.5px;
  color: var(--d-texto-fraco);
}

/* A fileira única a partir de 801px de tela (pedido do Anderson; o real já
   fazia isso, mas só a partir de 1907px). Como na regra antiga, as duas
   caixas (#destaque-conjuntos e #destaque-criativos — divs sem papel nem
   rótulo) somem com 'display: contents' e os cartões viram itens da mesma
   grade, na ordem do HTML: todos na fileira 1, sem coluna fixa, então com
   um conjunto só o criativo encosta nele em vez de deixar buraco. As notas
   de volume ficam na fileira 2, cada uma embaixo dos cartões que descreve.
   Abaixo de 801px, nada muda: as duas caixas lado a lado (style.css) e uma
   coluna até 600px. */
@media (min-width: 801px) {
  .layout-dash .dash-dest-secao .dash-destaques {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }

  .layout-dash .dash-dest-secao .dash-destaques #destaque-conjuntos,
  .layout-dash .dash-dest-secao .dash-destaques #destaque-criativos {
    display: contents;
  }

  .layout-dash .dash-dest-secao .dash-destaques #destaque-conjuntos .dash-card-destaque,
  .layout-dash .dash-dest-secao .dash-destaques #destaque-criativos .dash-card-destaque {
    grid-row: 1;
    grid-column: auto;
  }

  .layout-dash .dash-dest-secao .dash-destaques #destaque-conjuntos .dash-nota-volume,
  .layout-dash .dash-dest-secao .dash-destaques #destaque-criativos .dash-nota-volume {
    grid-row: 2;
  }

  /* Um cartão de conjunto: a nota dele na coluna 1, a do criativo na 2. */
  .layout-dash .dash-dest-secao .dash-destaques #destaque-conjuntos .dash-nota-volume {
    grid-column: 1;
  }

  .layout-dash .dash-dest-secao .dash-destaques #destaque-criativos .dash-nota-volume {
    grid-column: 2;
  }

  /* Dois cartões de conjunto (melhor e pior): a nota deles embaixo dos dois,
     a do criativo na coluna 3. */
  .layout-dash .dash-dest-secao .dash-destaques:has(#destaque-conjuntos .dash-card-destaque + .dash-card-destaque) #destaque-conjuntos .dash-nota-volume {
    grid-column: 1 / 3;
  }

  .layout-dash .dash-dest-secao .dash-destaques:has(#destaque-conjuntos .dash-card-destaque + .dash-card-destaque) #destaque-criativos .dash-nota-volume {
    grid-column: 3;
  }
}

/* --- Topo: os 6 KPIs ------------------------------------------------------ */

/* 6 colunas; 3 até 1200px de tela, 2 até 800px e 1 até 520px. */
.layout-dash .dash-kpi-secao {
  margin: 0 0 24px;
}

.layout-dash .dash-kpi-grade {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--d-espaco);
}

.layout-dash .dash-kpi {
  /* O cartão é a referência do tamanho do valor (13cqi = 13% da largura
     dele): o número encolhe com o cartão em vez de quebrar a linha. */
  container-type: inline-size;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  font-family: inherit;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-kpi-rotulo {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-kpi-valor {
  font-size: clamp(16px, 13cqi, 26px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--d-texto);
}

.layout-dash .dash-kpi-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-kpi-variacao {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.layout-dash .dash-kpi-variacao-boa {
  color: var(--d-bom-texto);
  background-color: var(--d-bom-fundo);
}

.layout-dash .dash-kpi-variacao-ruim {
  color: var(--d-ruim-texto);
  background-color: var(--d-ruim-fundo);
}

.layout-dash .dash-kpi-variacao-neutra {
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
}

.layout-dash .dash-kpi-legenda,
.layout-dash .dash-kpi-sem-dado {
  font-size: 12px;
  color: var(--d-texto-fraco);
}

/* --- Topo: o Top 3 -------------------------------------------------------- */

/* 3 colunas; 2 até 800px de tela e 1 até 520px. */
.layout-dash .dash-top3-secao {
  margin: 0 0 28px;
}

/* Fase 23.6: o subtítulo saiu; o título encosta nos cartões com o mesmo
   respiro do título das Tendências (12px). */
.layout-dash .dash-top3-titulo {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-top3-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--d-espaco);
}

.layout-dash .dash-top3-card {
  position: relative;
  min-width: 0;
  padding: 18px 16px 12px;
  overflow: hidden;
  font-family: inherit;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

/* A faixa vermelha de 3px no alto, cortada pelo raio do cartão. */
.layout-dash .dash-top3-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--d-marca);
}

.layout-dash .dash-top3-lugar {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  background-color: var(--d-neutro-fundo);
}

.layout-dash .dash-top3-medalha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
}

.layout-dash .dash-top3-pos-1 .dash-top3-medalha {
  color: var(--d-ouro-texto);
  background-color: var(--d-ouro-fundo);
  border-color: var(--d-ouro-borda);
}

.layout-dash .dash-top3-pos-2 .dash-top3-medalha {
  color: var(--d-prata-texto);
  background-color: var(--d-prata-fundo);
  border-color: var(--d-prata-borda);
}

.layout-dash .dash-top3-pos-3 .dash-top3-medalha {
  color: var(--d-bronze-texto);
  background-color: var(--d-bronze-fundo);
  border-color: var(--d-bronze-borda);
}

.layout-dash .dash-top3-nome {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
  color: var(--d-texto);
}

.layout-dash .dash-top3-conversas {
  margin: 2px 0 10px;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--d-texto);
}

.layout-dash .dash-top3-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  border-top: 1px solid var(--d-linha);
}

.layout-dash .dash-top3-rotulo {
  color: var(--d-texto-secundario);
}

.layout-dash .dash-top3-valor {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--d-texto);
}

.layout-dash .dash-top3-vazio {
  padding: 16px;
  font-size: 13px;
  color: var(--d-texto-fraco);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
}

@media (max-width: 1200px) {
  .layout-dash .dash-kpi-grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Filtro empilhado (abaixo de 600px, style.css): o cartão é flex em linha
   (.card-score), e o bloco dos campos ficava só da largura do conteúdo, com
   os seletores e o botão em 190px numa tela de 327px. Ocupando a linha
   toda, os três vão de ponta a ponta. */
@media (max-width: 600px) {
  .layout-dash .dash-filtro-campos {
    flex: 1 1 100%;
  }

  .layout-dash .dash-filtro .dash-campo select {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .layout-dash .dash-kpi-grade,
  .layout-dash .dash-top3-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .layout-dash .dash-kpi-grade,
  .layout-dash .dash-top3-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Conversas por dia (Fase 23.2) -------------------------------------------
   Tudo preso a .dash-cdia-secao. O gráfico é SVG (dashboard-conversas-dia-ui.js)
   com largura 100% e mínimo IGUAL à largura do viewBox (1000px), para o
   texto nunca sair menor que o tamanho de desenho: abaixo disso rola o contêiner do
   gráfico, nunca a página. Os cards: 5 colunas; 3 até 1200px de tela e 2 até
   800px, com o 5º na linha toda. A pílula da variação é a dos KPIs
   (.dash-kpi-variacao-*). */
.layout-dash {
  /* O botão de linha escolhido: fundo escuro e texto branco */
  --d-botao-ativo: #0f1115;
  --d-botao-ativo-texto: #ffffff;
  /* A linha de base do gráfico, mais forte que a grade */
  --d-eixo: #b9bec7;
}

.layout-dash .dash-cdia-secao {
  margin: 0 0 28px;
}

/* .card-score vira flex no celular (style.css, "Score e situação lado a
   lado"); aqui o cartão é sempre um bloco. */
.layout-dash .dash-cdia-secao .dash-cdia-cartao {
  display: block;
  margin: 0;
  padding: 18px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-cdia-secao .dash-cdia-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.layout-dash .dash-cdia-secao .dash-cdia-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.layout-dash .dash-cdia-secao .dash-cdia-botao {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-texto-secundario);
  background-color: transparent;
  border: 1px solid var(--d-linha);
  border-radius: 10px;
  cursor: pointer;
}

.layout-dash .dash-cdia-secao .dash-cdia-botao:hover {
  color: var(--d-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-botao[aria-pressed="true"] {
  color: var(--d-botao-ativo-texto);
  background-color: var(--d-botao-ativo);
  border-color: var(--d-botao-ativo);
}

.layout-dash .dash-cdia-secao .dash-cdia-botao:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

.layout-dash .dash-cdia-secao .dash-cdia-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cdia-secao .dash-cdia-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.layout-dash .dash-cdia-secao .dash-cdia-amostra {
  flex: 0 0 auto;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--d-marca);
}

.layout-dash .dash-cdia-secao .dash-cdia-amostra-anterior {
  background-color: var(--d-anterior);
}

.layout-dash .dash-cdia-secao .dash-cdia-legenda-mes {
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-legenda-anterior .dash-cdia-legenda-mes {
  color: var(--d-anterior-texto);
}

/* A rolagem é a do Ranking (.dash-rolagem, style.css), só na horizontal e
   sem a altura máxima. */
.layout-dash .dash-cdia-secao .dash-cdia-rolagem {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
}

.layout-dash .dash-cdia-secao .dash-cdia-plano {
  position: relative;
  min-width: 1000px;
}

.layout-dash .dash-cdia-secao .dash-cdia-svg {
  display: block;
  width: 100%;
  height: auto;
}

.layout-dash .dash-cdia-secao .dash-cdia-faixa {
  fill: var(--d-fundo);
}

.layout-dash .dash-cdia-secao .dash-cdia-faixa-texto {
  fill: var(--d-texto-fraco);
}

.layout-dash .dash-cdia-secao .dash-cdia-grade {
  stroke: var(--d-linha);
  stroke-width: 1;
}

.layout-dash .dash-cdia-secao .dash-cdia-eixo-x {
  stroke: var(--d-eixo);
  stroke-width: 1;
}

.layout-dash .dash-cdia-secao .dash-cdia-rotulo-y,
.layout-dash .dash-cdia-secao .dash-cdia-rotulo-x {
  fill: var(--d-texto-fraco);
}

.layout-dash .dash-cdia-secao .dash-cdia-rotulo-foco {
  font-weight: 700;
  fill: var(--d-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-linha {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.layout-dash .dash-cdia-secao .dash-cdia-linha-atual {
  stroke: var(--d-marca);
  stroke-width: 3;
}

.layout-dash .dash-cdia-secao .dash-cdia-linha-anterior {
  stroke: var(--d-anterior);
  stroke-width: 2.5;
}

.layout-dash .dash-cdia-secao .dash-cdia-area {
  fill: var(--d-marca);
  fill-opacity: 0.07;
  stroke: none;
}

.layout-dash .dash-cdia-secao .dash-cdia-isolado-atual {
  fill: var(--d-marca);
}

.layout-dash .dash-cdia-secao .dash-cdia-isolado-anterior {
  fill: var(--d-anterior);
}

.layout-dash .dash-cdia-secao .dash-cdia-ultimo,
.layout-dash .dash-cdia-secao .dash-cdia-marca {
  stroke: var(--d-cartao);
  stroke-width: 2;
}

.layout-dash .dash-cdia-secao .dash-cdia-ultimo,
.layout-dash .dash-cdia-secao .dash-cdia-marca-atual {
  fill: var(--d-marca);
}

.layout-dash .dash-cdia-secao .dash-cdia-marca-anterior {
  fill: var(--d-anterior);
}

.layout-dash .dash-cdia-secao .dash-cdia-guia {
  stroke: var(--d-texto-fraco);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.layout-dash .dash-cdia-secao .dash-cdia-acerto {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

.layout-dash .dash-cdia-secao .dash-cdia-acerto:focus-visible {
  stroke: var(--d-texto);
  stroke-width: 1.5;
}

/* O detalhe do dia: à direita da coluna; perto da borda direita, à esquerda. */
.layout-dash .dash-cdia-secao .dash-cdia-detalhe {
  position: absolute;
  top: 8px;
  z-index: 2;
  margin-left: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 10px;
  box-shadow: var(--d-sombra);
  pointer-events: none;
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-esquerda {
  margin-left: 0;
  transform: translateX(calc(-100% - 8px));
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-dia {
  margin: 0 0 4px;
  font-weight: 700;
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.layout-dash .dash-cdia-secao .dash-cdia-bolinha {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--d-marca);
}

.layout-dash .dash-cdia-secao .dash-cdia-bolinha-anterior {
  background-color: var(--d-anterior);
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-variacao {
  margin: 4px 0 0;
  font-weight: 700;
  white-space: nowrap;
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-variacao-boa,
.layout-dash .dash-cdia-secao .dash-cdia-dif-boa {
  color: var(--d-bom-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-variacao-ruim,
.layout-dash .dash-cdia-secao .dash-cdia-dif-ruim {
  color: var(--d-ruim-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-detalhe-variacao-neutra,
.layout-dash .dash-cdia-secao .dash-cdia-dif-neutra {
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cdia-secao .dash-cdia-aviso {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cdia-secao .dash-cdia-titulo-cards {
  margin: 14px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cdia-secao .dash-cdia-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.layout-dash .dash-cdia-secao .dash-cdia-cards-extra {
  margin-top: 10px;
}

.layout-dash .dash-cdia-secao .dash-cdia-card {
  min-width: 0;
  padding: 12px 14px;
  background-color: var(--d-fundo);
  border-radius: 12px;
}

.layout-dash .dash-cdia-secao .dash-cdia-card-titulo {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cdia-secao .dash-cdia-card-anterior .dash-cdia-card-titulo {
  color: var(--d-anterior-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-card-valor {
  margin: 4px 0 2px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--d-texto);
}

.layout-dash .dash-cdia-secao .dash-cdia-card-valor .dash-kpi-variacao {
  font-size: 15px;
}

.layout-dash .dash-cdia-secao .dash-cdia-card-sub {
  margin: 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cdia-secao .dash-cdia-vazio {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

@media (max-width: 1200px) {
  .layout-dash .dash-cdia-secao .dash-cdia-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .layout-dash .dash-cdia-secao .dash-cdia-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-dash .dash-cdia-secao .dash-cdia-cards .dash-cdia-card:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* Fase 23.3: a Parte 2 (Projeção de fechamento e Dias acima), no mesmo estilo
   dos 5 cards. 2 colunas; 1 até 800px. Com um card só (mês fechado: sem
   projeção), ele fica com a largura de uma coluna. O seletor com as duas
   classes vence as colunas de .dash-cdia-cards em qualquer ordem. */
.layout-dash .dash-cdia-secao .dash-cdia-cards.dash-cdia-cards-extra {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-dash .dash-cdia-secao .dash-cdia-etiqueta {
  display: inline-block;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  vertical-align: 1px;
  color: var(--d-texto-fraco);
  border: 1px solid var(--d-prata-borda);
  border-radius: 999px;
}

.layout-dash .dash-cdia-secao .dash-cdia-card-pct {
  font-size: 14px;
  font-weight: 600;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cdia-secao .dash-cdia-barra {
  height: 8px;
  margin: 6px 0 8px;
  overflow: hidden;
  background-color: var(--d-prata-borda);
  border-radius: 999px;
}

.layout-dash .dash-cdia-secao .dash-cdia-barra-preenchimento {
  height: 100%;
  background-color: var(--d-marca);
  border-radius: 999px;
}

@media (max-width: 800px) {
  .layout-dash .dash-cdia-secao .dash-cdia-cards.dash-cdia-cards-extra {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Criativo por vendedor (Fase 27) ------------------------------------------
   O protótipo aprovado: um cartão com o título, o mês, o filtro "Vendedor" e,
   por vendedor, o resumo e um cartão por criativo — miniatura (ou o quadrado
   cinza), nome, etiqueta, as 4 métricas e a barra da parte nas conversas do
   vendedor. 2 colunas a partir de 801px (o ponto dos Destaques); 1 abaixo,
   com miniatura menor. "Poucos dados": miniatura apagada e barra cinza. */
.layout-dash .dash-cria-secao {
  /* A barra de um criativo com poucos dados */
  --d-cria-barra-poucos: #7b8290;
  /* O cinza do quadrado no lugar da miniatura (degradê a partir de --d-neutro-fundo) */
  --d-cria-quadrado: #c3c8d2;
  margin: 26px 0 8px;
  padding: 28px;
  background-color: var(--d-cartao);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

.layout-dash .dash-cria-secao .dash-titulo-grupo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-cria-secao .dash-cria-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

/* Fase 27.2: o cabeçalho com o "Mês dos criativos", na mesma aparência do
   "Mês do mapa" (.dash-mapa-cabecalho e .dash-mapa-mes): título à esquerda e o
   seletor à direita, que desce para a linha toda até 560px. */
.layout-dash .dash-cria-secao .dash-cria-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.layout-dash .dash-cria-secao .dash-cria-cabecalho-texto {
  flex: 1 1 320px;
  min-width: 0;
}

.layout-dash .dash-cria-secao .dash-cria-mes {
  display: flex;
  flex: 0 1 260px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.layout-dash .dash-cria-secao .dash-cria-mes label {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cria-secao .dash-cria-mes select {
  max-width: 100%;
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-eixo);
  border-radius: 8px;
}

.layout-dash .dash-cria-secao .dash-cria-mes select:focus-visible,
.layout-dash .dash-cria-secao .dash-cria-botao:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* Os estados trocam pelo atributo hidden; o display:flex do erro passaria por
   cima dele (a mesma regra do mapa, dentro do bloco). */
.layout-dash .dash-cria-secao [hidden] {
  display: none !important;
}

/* Estados: carregando e erro (só neste bloco), como os do mapa. */
.layout-dash .dash-cria-secao .dash-cria-carregando p {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cria-secao .dash-cria-erro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--d-linha);
  border-left: 4px solid var(--d-marca);
  border-radius: 10px;
}

.layout-dash .dash-cria-secao .dash-cria-erro p {
  margin: 0;
  font-size: 13px;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cria-secao .dash-cria-erro .dash-cria-erro-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-cria-secao .dash-cria-botao {
  min-height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--d-texto);
  cursor: pointer;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-eixo);
  border-radius: 8px;
}

.layout-dash .dash-cria-secao .dash-cria-botao:hover {
  background-color: var(--d-fundo);
}

.layout-dash .dash-cria-secao .dash-cria-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.layout-dash .dash-cria-secao .dash-cria-filtro label {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-cria-secao .dash-cria-filtro select {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-eixo);
  border-radius: 8px;
}

.layout-dash .dash-cria-secao .dash-cria-filtro select:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* Fase 27.1: os botões de etiqueta, no visual dos botões de linha de
   Conversas por dia (44px de altura, o ativo cheio). */
.layout-dash .dash-cria-secao .dash-cria-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta-botao {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-texto-secundario);
  background-color: transparent;
  border: 1px solid var(--d-linha);
  border-radius: 10px;
  cursor: pointer;
}

/* Fora o ativo: com o mouse em cima dele, este seletor (mais específico)
   deixaria o texto escuro sobre o fundo escuro do ativo. */
.layout-dash .dash-cria-secao .dash-cria-etiqueta-botao:hover:not(:disabled):not([aria-pressed="true"]) {
  color: var(--d-texto);
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta-botao[aria-pressed="true"] {
  color: var(--d-botao-ativo-texto);
  background-color: var(--d-botao-ativo);
  border-color: var(--d-botao-ativo);
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta-botao:disabled {
  color: var(--d-texto-fraco);
  cursor: default;
  opacity: 0.6;
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta-botao:focus-visible,
.layout-dash .dash-cria-secao .dash-cria-etiqueta:focus-visible,
.layout-dash .dash-cria-secao .dash-ver-mais:focus-visible {
  outline: 2px solid var(--d-texto);
  outline-offset: 2px;
}

/* O aviso da contagem, só para leitor de tela (a técnica do Ranking). */
.layout-dash .dash-cria-secao .dash-cria-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.layout-dash .dash-cria-secao .dash-cria-vazio {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--d-texto-fraco);
}

/* Os "Ver mais" (o botão é o dash-ver-mais da página); sem botão, a área sai. */
.layout-dash .dash-cria-secao .dash-ver-mais-area {
  margin: 16px 0 0;
}

.layout-dash .dash-cria-secao .dash-ver-mais-area:has(> .dash-ver-mais.oculto) {
  display: none;
}

.layout-dash .dash-cria-secao .dash-cria-vendedor {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--d-linha);
}

.layout-dash .dash-cria-secao .dash-cria-vendedor:first-child {
  padding-top: 0;
  border-top: 0;
}

.layout-dash .dash-cria-secao .dash-cria-vendedor-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.layout-dash .dash-cria-secao .dash-cria-vendedor-nome {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--d-texto);
}

.layout-dash .dash-cria-secao .dash-cria-vendedor-resumo {
  margin: 0;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cria-secao .dash-cria-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.layout-dash .dash-cria-secao .dash-cria-cartao {
  display: flex;
  gap: 18px;
  min-width: 0;
  padding: 16px;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 12px;
}

.layout-dash .dash-cria-secao .dash-cria-imagem {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--d-neutro-fundo), var(--d-cria-quadrado));
  border-radius: 10px;
}

/* O quadrado de contorno do protótipo; a miniatura, quando vem, cobre. */
.layout-dash .dash-cria-secao .dash-cria-imagem::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 2px solid var(--d-texto-secundario);
  border-radius: 6px;
}

.layout-dash .dash-cria-secao .dash-cria-miniatura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layout-dash .dash-cria-secao .dash-cria-corpo {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.layout-dash .dash-cria-secao .dash-cria-titulo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.layout-dash .dash-cria-secao .dash-cria-nome {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--d-texto);
  overflow-wrap: anywhere;
}

/* Fase 27.1: a etiqueta é um <button> (aplica o filtro de cartões); o visual
   continua o da pílula, com o contorno no hover dizendo que é clicável. */
.layout-dash .dash-cria-secao .dash-cria-etiqueta {
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Fase 27.2: "Em aprendizado" — pílula de contorno, discreta e não clicável,
   logo depois de "Poucos dados". */
.layout-dash .dash-cria-secao .dash-cria-aprendizado {
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--d-texto-secundario);
  border: 1px solid var(--d-eixo);
  border-radius: 999px;
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta-melhor {
  color: var(--d-bom-texto);
  background-color: var(--d-bom-fundo);
}

.layout-dash .dash-cria-secao .dash-cria-etiqueta-poucos {
  color: var(--d-ouro-texto);
  background-color: var(--d-ouro-fundo);
}

.layout-dash .dash-cria-secao .dash-cria-anuncios {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cria-secao .dash-cria-metricas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.layout-dash .dash-cria-secao .dash-cria-rotulo {
  margin: 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cria-secao .dash-cria-valor {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--d-texto);
}

.layout-dash .dash-cria-secao .dash-cria-valor-destaque {
  font-size: 22px;
  font-weight: 800;
}

.layout-dash .dash-cria-secao .dash-cria-valor-vazio {
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cria-secao .dash-cria-barra {
  height: 6px;
  background-color: var(--d-neutro-fundo);
  border-radius: 3px;
}

.layout-dash .dash-cria-secao .dash-cria-barra-preenchimento {
  height: 6px;
  background-color: var(--d-marca);
  border-radius: 3px;
}

.layout-dash .dash-cria-secao .dash-cria-pct {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-cria-secao .dash-cria-poucos .dash-cria-imagem {
  opacity: 0.55;
}

.layout-dash .dash-cria-secao .dash-cria-poucos .dash-cria-barra-preenchimento {
  background-color: var(--d-cria-barra-poucos);
}

@media (max-width: 800px) {
  .layout-dash .dash-cria-secao {
    padding: 18px 16px;
  }

  .layout-dash .dash-cria-secao .dash-cria-filtro {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 16px;
  }

  .layout-dash .dash-cria-secao .dash-cria-vendedor-cabecalho {
    display: block;
  }

  .layout-dash .dash-cria-secao .dash-cria-vendedor-resumo {
    margin-top: 2px;
  }

  .layout-dash .dash-cria-secao .dash-cria-grade {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .layout-dash .dash-cria-secao .dash-cria-cartao {
    gap: 14px;
    padding: 14px;
  }

  .layout-dash .dash-cria-secao .dash-cria-imagem {
    flex-basis: 84px;
    width: 84px;
    height: 84px;
  }

  .layout-dash .dash-cria-secao .dash-cria-imagem::before {
    inset: 18px;
  }

  .layout-dash .dash-cria-secao .dash-cria-corpo {
    gap: 8px;
  }

  .layout-dash .dash-cria-secao .dash-cria-metricas {
    gap: 8px 12px;
  }

  .layout-dash .dash-cria-secao .dash-cria-valor {
    font-size: 15px;
  }

  .layout-dash .dash-cria-secao .dash-cria-valor-destaque {
    font-size: 20px;
  }
}

/* Até 360px (320 medido): ao lado da miniatura, cada métrica ficava com 50px
   e "R$ 2,37" pede 69px. A miniatura sobe e o texto fica com a largura toda. */
/* Fase 27.2: o "Mês dos criativos" na linha toda, no mesmo ponto do mapa. */
@media (max-width: 560px) {
  .layout-dash .dash-cria-secao .dash-cria-mes {
    flex-basis: 100%;
  }
}

@media (max-width: 360px) {
  .layout-dash .dash-cria-secao .dash-cria-cartao {
    flex-direction: column;
  }

  .layout-dash .dash-cria-secao .dash-cria-corpo {
    flex: none;
  }
}

/* --- Cidades em atuação (Fase 28) ---------------------------------------------
   O exemplo aprovado (mapa v4), preso a .dash-mapa: cabeçalho com o "Mês do
   mapa", aviso de "Segmentação atual", os estados carregando/erro/pronto,
   indicadores, faixa de cobertura, o mapa (SVG) com balão e legenda, e a
   lateral com o painel da cidade e as abas. Grade de 2 colunas que vira 1
   abaixo de 900px. Só tema claro; a fonte é a do Dashboard. O esqueleto do
   carregando fica parado (sem @keyframes). As cores do exemplo viram as
   variáveis do Dashboard; só as do mapa são novas (--d-mapa-*). */
.layout-dash .dash-mapa {
  /* Município sem vendedor e a borda entre municípios */
  --d-mapa-zero: #e9ecef;
  --d-mapa-borda: #ffffff;
  /* 5 tons, do menor ao maior número de vendedores do mês */
  --d-mapa-nivel-1: #f6d4d8;
  --d-mapa-nivel-2: #ec9ca5;
  --d-mapa-nivel-3: #dc5f70;
  --d-mapa-nivel-4: #c8102e;
  --d-mapa-nivel-5: #860a1e;
  /* Fundo claro das áreas internas e o fundo da linha/botão escolhido */
  --d-mapa-superficie: #f7f8fa;
  --d-mapa-destaque-fundo: #fcecee;
  /* Sombra do balão */
  --d-mapa-sombra: 0 8px 24px rgba(16, 24, 40, 0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 26px 0 8px;
  padding: 24px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border-radius: var(--d-raio);
  box-shadow: var(--d-sombra);
}

/* O exemplo escondia [hidden] por uma regra da página dele; aqui, dentro do bloco. */
.layout-dash .dash-mapa [hidden] {
  display: none !important;
}

.layout-dash .dash-mapa select {
  max-width: 100%;
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--d-texto);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-eixo);
  border-radius: 8px;
}

.layout-dash .dash-mapa select:focus-visible,
.layout-dash .dash-mapa button:focus-visible,
.layout-dash .dash-mapa summary:focus-visible {
  outline: 2px solid var(--d-marca);
  outline-offset: 2px;
}

.layout-dash .dash-mapa .dash-mapa-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--d-linha);
}

.layout-dash .dash-mapa .dash-mapa-cabecalho-texto {
  flex: 1 1 320px;
  min-width: 0;
}

.layout-dash .dash-mapa .dash-mapa-cabecalho h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

.layout-dash .dash-mapa .dash-mapa-mes {
  display: flex;
  flex: 0 1 260px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.layout-dash .dash-mapa .dash-mapa-mes label {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-mapa .dash-mapa-aviso-mes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  color: var(--d-ouro-texto);
  background-color: var(--d-ouro-fundo);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-aviso-mes p {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
}

.layout-dash .dash-mapa .dash-mapa-etiqueta {
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
}

/* Estados */
.layout-dash .dash-mapa .dash-mapa-carregando {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.layout-dash .dash-mapa .dash-mapa-carregando p {
  margin: 0;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-esqueleto-linha {
  height: 64px;
  background-color: var(--d-mapa-superficie);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-esqueleto-grade {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
}

.layout-dash .dash-mapa .dash-mapa-esqueleto-mapa,
.layout-dash .dash-mapa .dash-mapa-esqueleto-lado {
  height: 420px;
  background-color: var(--d-mapa-superficie);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-erro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--d-linha);
  border-left: 4px solid var(--d-marca);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-erro p {
  margin: 0;
}

.layout-dash .dash-mapa .dash-mapa-erro-titulo {
  font-weight: 800;
}

.layout-dash .dash-mapa #dash-mapa-erro-texto {
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-conteudo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.layout-dash .dash-mapa .dash-mapa-botao {
  min-height: 36px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--d-texto);
  cursor: pointer;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-eixo);
  border-radius: 8px;
}

.layout-dash .dash-mapa .dash-mapa-botao:hover {
  background-color: var(--d-mapa-superficie);
}

/* Indicadores */
.layout-dash .dash-mapa .dash-mapa-indicadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.layout-dash .dash-mapa .dash-mapa-indicador {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--d-linha);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-indicador p {
  margin: 0;
}

.layout-dash .dash-mapa .dash-mapa-indicador-rotulo,
.layout-dash .dash-mapa .dash-mapa-indicador-detalhe {
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-indicador-valor {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Cobertura */
.layout-dash .dash-mapa .dash-mapa-cobertura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 14px;
  background-color: var(--d-mapa-superficie);
  border: 1px solid var(--d-linha);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-cobertura.completa {
  color: var(--d-bom-texto);
  background-color: var(--d-bom-fundo);
  border-color: transparent;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-linha {
  margin: 0;
  font-size: 13px;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-chips li {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  background-color: var(--d-cartao);
  border: 1px solid var(--d-eixo);
  border-radius: 999px;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-chips li.alerta {
  color: var(--d-ouro-texto);
  background-color: var(--d-ouro-fundo);
  border-color: transparent;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-detalhes {
  flex-basis: 100%;
  font-size: 13px;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-detalhes summary {
  width: max-content;
  max-width: 100%;
  font-weight: 700;
  color: var(--d-texto-secundario);
  cursor: pointer;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-detalhes ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-detalhes li {
  display: flex;
  flex-direction: column;
}

.layout-dash .dash-mapa .dash-mapa-cobertura-detalhes li span {
  color: var(--d-texto-fraco);
}

/* Grade principal */
.layout-dash .dash-mapa .dash-mapa-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.layout-dash .dash-mapa .dash-mapa-quadro,
.layout-dash .dash-mapa .dash-mapa-cartao {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--d-linha);
  border-radius: 10px;
}

.layout-dash .dash-mapa .dash-mapa-quadro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.layout-dash .dash-mapa .dash-mapa-quadro h3,
.layout-dash .dash-mapa .dash-mapa-cartao h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-quadro-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.layout-dash .dash-mapa .dash-mapa-alternador {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--d-eixo);
  border-radius: 8px;
}

.layout-dash .dash-mapa .dash-mapa-alternador button {
  min-height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--d-texto-secundario);
  cursor: pointer;
  background-color: var(--d-cartao);
  border: 0;
}

.layout-dash .dash-mapa .dash-mapa-alternador button + button {
  border-left: 1px solid var(--d-eixo);
}

.layout-dash .dash-mapa .dash-mapa-alternador button[aria-pressed="true"] {
  color: var(--d-texto);
  background-color: var(--d-mapa-superficie);
  box-shadow: inset 0 -2px 0 var(--d-marca);
}

.layout-dash .dash-mapa .dash-mapa-caixa {
  position: relative;
  background-color: var(--d-mapa-superficie);
  border-radius: 8px;
}

.layout-dash .dash-mapa .dash-mapa-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 72vh;
  aspect-ratio: 4 / 4.2;
}

.layout-dash .dash-mapa .dash-mapa-cidade {
  fill: var(--d-mapa-zero);
  stroke: var(--d-mapa-borda);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.layout-dash .dash-mapa .dash-mapa-cidade:focus {
  outline: none;
}

.layout-dash .dash-mapa .dash-mapa-cidade[data-nivel="1"] { fill: var(--d-mapa-nivel-1); }
.layout-dash .dash-mapa .dash-mapa-cidade[data-nivel="2"] { fill: var(--d-mapa-nivel-2); }
.layout-dash .dash-mapa .dash-mapa-cidade[data-nivel="3"] { fill: var(--d-mapa-nivel-3); }
.layout-dash .dash-mapa .dash-mapa-cidade[data-nivel="4"] { fill: var(--d-mapa-nivel-4); }
.layout-dash .dash-mapa .dash-mapa-cidade[data-nivel="5"] { fill: var(--d-mapa-nivel-5); }

@media (prefers-reduced-motion: no-preference) {
  .layout-dash .dash-mapa .dash-mapa-cidade {
    transition: fill 0.15s ease;
  }
}

.layout-dash .dash-mapa .dash-mapa-contorno-hover,
.layout-dash .dash-mapa .dash-mapa-contorno-fixo {
  fill: none;
  stroke: var(--d-texto);
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.layout-dash .dash-mapa .dash-mapa-contorno-hover {
  stroke-width: 1.5px;
}

.layout-dash .dash-mapa .dash-mapa-contorno-fixo {
  stroke-width: 2.5px;
}

.layout-dash .dash-mapa .dash-mapa-rotulos {
  pointer-events: none;
}

.layout-dash .dash-mapa .dash-mapa-rotulo {
  font-family: inherit;
  fill: var(--d-texto-fraco);
  stroke: var(--d-cartao);
  stroke-opacity: 0.85;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: middle;
}

.layout-dash .dash-mapa .dash-mapa-rotulo.em-uso {
  font-weight: 600;
  fill: var(--d-texto);
}

.layout-dash .dash-mapa .dash-mapa-rotulo.oculto {
  display: none;
}

/* Balão */
.layout-dash .dash-mapa .dash-mapa-dica {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  max-width: 260px;
  padding: 10px 12px;
  pointer-events: none;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 8px;
  box-shadow: var(--d-mapa-sombra);
}

.layout-dash .dash-mapa .dash-mapa-dica p {
  margin: 0;
}

.layout-dash .dash-mapa .dash-mapa-dica-nome {
  font-weight: 800;
}

.layout-dash .dash-mapa .dash-mapa-dica-total {
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-dica-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  margin: 8px 0 0;
  padding: 8px 0 0;
  font-size: 12px;
  list-style: none;
  border-top: 1px solid var(--d-linha);
}

.layout-dash .dash-mapa .dash-mapa-dica-lista li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-dash .dash-mapa .dash-mapa-dica-mais {
  margin-top: 6px !important;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

/* Legenda */
.layout-dash .dash-mapa .dash-mapa-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-legenda-titulo {
  font-weight: 700;
  color: var(--d-texto-secundario);
}

.layout-dash .dash-mapa .dash-mapa-legenda ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
  list-style: none;
}

.layout-dash .dash-mapa .dash-mapa-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.layout-dash .dash-mapa .dash-mapa-amostra {
  width: 14px;
  height: 14px;
  background-color: var(--d-mapa-zero);
  border: 1px solid var(--d-linha);
  border-radius: 3px;
}

.layout-dash .dash-mapa .dash-mapa-amostra[data-nivel="1"] { background-color: var(--d-mapa-nivel-1); }
.layout-dash .dash-mapa .dash-mapa-amostra[data-nivel="2"] { background-color: var(--d-mapa-nivel-2); }
.layout-dash .dash-mapa .dash-mapa-amostra[data-nivel="3"] { background-color: var(--d-mapa-nivel-3); }
.layout-dash .dash-mapa .dash-mapa-amostra[data-nivel="4"] { background-color: var(--d-mapa-nivel-4); }
.layout-dash .dash-mapa .dash-mapa-amostra[data-nivel="5"] { background-color: var(--d-mapa-nivel-5); }

/* Lateral */
.layout-dash .dash-mapa .dash-mapa-lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.layout-dash .dash-mapa #dash-mapa-painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
}

.layout-dash .dash-mapa #dash-mapa-painel p {
  margin: 0;
}

.layout-dash .dash-mapa .dash-mapa-painel-vazio {
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-painel-nome {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.layout-dash .dash-mapa .dash-mapa-painel-total {
  margin-top: -6px !important;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-painel-lista {
  width: 100%;
  max-height: 300px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.layout-dash .dash-mapa .dash-mapa-painel-lista li {
  padding: 7px 0;
  border-top: 1px solid var(--d-linha);
}

.layout-dash .dash-mapa .dash-mapa-painel-linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.layout-dash .dash-mapa .dash-mapa-painel-vendedor {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.layout-dash .dash-mapa .dash-mapa-painel-conjuntos {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--d-texto-fraco);
  white-space: nowrap;
}

.layout-dash .dash-mapa .dash-mapa-painel-origens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.layout-dash .dash-mapa .dash-mapa-origem {
  padding: 1px 8px;
  font-size: 11px;
  color: var(--d-texto-secundario);
  overflow-wrap: anywhere;
  background-color: var(--d-mapa-superficie);
  border: 1px solid var(--d-linha);
  border-radius: 999px;
}

/* Abas */
.layout-dash .dash-mapa .dash-mapa-abas {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--d-linha);
}

.layout-dash .dash-mapa .dash-mapa-abas button {
  margin-right: 10px;
  padding: 6px 4px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-texto-fraco);
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: inset 0 -2px 0 transparent;
}

.layout-dash .dash-mapa .dash-mapa-abas button[aria-selected="true"] {
  color: var(--d-texto);
  box-shadow: inset 0 -2px 0 var(--d-marca);
}

/* Ranking */
.layout-dash .dash-mapa .dash-mapa-ranking-cabecalho,
.layout-dash .dash-mapa .dash-mapa-ranking-linha {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 10px;
}

.layout-dash .dash-mapa .dash-mapa-ranking-cabecalho {
  padding: 0 8px 4px;
  font-size: 11px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-ranking-cabecalho span:last-child {
  text-align: right;
}

.layout-dash .dash-mapa .dash-mapa-ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.layout-dash .dash-mapa .dash-mapa-ranking-linha {
  width: 100%;
  padding: 7px 8px;
  font: inherit;
  text-align: left;
  color: var(--d-texto);
  cursor: pointer;
  background: none;
  border: 0;
  border-top: 1px solid var(--d-linha);
}

.layout-dash .dash-mapa .dash-mapa-ranking-linha:hover {
  background-color: var(--d-mapa-superficie);
}

.layout-dash .dash-mapa .dash-mapa-ranking-linha[aria-pressed="true"] {
  background-color: var(--d-mapa-destaque-fundo);
  box-shadow: inset 3px 0 0 var(--d-marca);
}

.layout-dash .dash-mapa .dash-mapa-ranking-pos {
  font-variant-numeric: tabular-nums;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-ranking-meio {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.layout-dash .dash-mapa .dash-mapa-ranking-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout-dash .dash-mapa .dash-mapa-ranking-trilho {
  display: block;
  height: 4px;
  background-color: var(--d-mapa-zero);
  border-radius: 2px;
}

.layout-dash .dash-mapa .dash-mapa-ranking-barra {
  display: block;
  height: 4px;
  background-color: var(--d-marca);
  border-radius: 2px;
}

.layout-dash .dash-mapa .dash-mapa-ranking-qtd {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Sem vendedor na região */
.layout-dash .dash-mapa .dash-mapa-sem-texto {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--d-texto-fraco);
}

.layout-dash .dash-mapa .dash-mapa-sem-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  max-height: 380px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.layout-dash .dash-mapa .dash-mapa-sem-botao {
  width: 100%;
  padding: 5px 8px;
  overflow: hidden;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--d-texto);
  cursor: pointer;
  background-color: var(--d-cartao);
  border: 1px solid var(--d-linha);
  border-radius: 6px;
}

.layout-dash .dash-mapa .dash-mapa-sem-botao:hover {
  background-color: var(--d-mapa-superficie);
}

.layout-dash .dash-mapa .dash-mapa-sem-botao[aria-pressed="true"] {
  background-color: var(--d-mapa-destaque-fundo);
  border-color: var(--d-marca);
}

@media (max-width: 900px) {
  .layout-dash .dash-mapa .dash-mapa-grade,
  .layout-dash .dash-mapa .dash-mapa-esqueleto-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-dash .dash-mapa .dash-mapa-esqueleto-lado {
    display: none;
  }
}

@media (max-width: 560px) {
  .layout-dash .dash-mapa {
    padding: 16px;
  }

  .layout-dash .dash-mapa .dash-mapa-indicadores {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-dash .dash-mapa .dash-mapa-indicador-valor {
    font-size: 22px;
  }

  .layout-dash .dash-mapa .dash-mapa-mes {
    flex-basis: 100%;
  }
}