/* Reset simples */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f4f4f6;
  color: #222222;
  line-height: 1.4;
}

header {
  background-color: #ffffff;
  border-bottom: 4px solid #C8102E; /* vermelho Honda, cor de destaque */
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

header h1 {
  font-size: 1.4rem;
  color: #1a1a1a;
}

.cabecalho-titulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Indicador de frescor (Fase 7.1): discreto quando os dados estão em dia,
   chamativo quando a coleta pode ter parado. Mesmas cores usadas nos
   badges de situação (situacao-atencao/situacao-critica), pra manter o
   mesmo vocabulário visual do painel. */
.indicador-frescor {
  font-size: 0.8rem;
  color: #757575;
}

.indicador-frescor-atencao {
  color: #b7791f;
  font-weight: 600;
}

.indicador-frescor-critico,
.indicador-frescor-sem-dados {
  color: #C8102E;
  font-weight: 700;
}

/* Rótulo de alertas de outro dia: mesma cor de "atenção" do indicador de
   frescor (Fase 7.1), porque o problema é o mesmo — dado antigo que não
   pode parecer atual. Não é erro nem alarme: os alertas abaixo continuam
   válidos, só não são de hoje. */
.alertas-de-outro-dia {
  font-size: 0.82rem;
  color: #b7791f;
  font-weight: 600;
  margin: 0 0 10px 0;
  padding: 6px 10px;
  background-color: #fdf6e7;
  border-left: 3px solid #b7791f;
  border-radius: 3px;
}

/* --- Emitir Relatório: botão + painel suspenso ---------------------- */

/* Agrupa os botões para o <header> continuar com DOIS filhos: ele é flex com
   space-between, e um terceiro filho direto seria distribuído no meio da
   barra, afastando "EMITIR RELATÓRIO" da borda direita.

   O gap é menor que o do header (16px) de propósito: os dois botões são um
   grupo, e precisam parecer mais próximos entre si do que do título. */
.acoes-cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acoes-relatorio {
  position: relative;
}

.botao-primario {
  background-color: #C8102E;
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* Só o <a>, nunca o <button> compartilhado: aplicar estas regras ao seletor
   comum mudou o botão de 169x35 para 163x38, porque as propriedades de flex
   alteram como o <button> calcula a própria caixa.

   'inline-block' e não 'inline-flex': um contêiner flex mede a linha de texto
   pela métrica cheia da fonte (18px) e um bloco comum pela line box (15px), e
   eram esses 3px que deixavam o link mais alto que o botão.

   O line-height precisa de valor EXPLÍCITO: 'normal' resolve para 15px no
   <button> e 18px num bloco comum — os mesmos 3px. 1.1 reproduz os 15px sem
   pixel fixo, então continua valendo quando a fonte encolhe no mobile. */
a.botao-primario {
  display: inline-block;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}

.botao-primario:hover {
  background-color: #a50d26;
}

/* "Sair" (Fase 12.4) usa a mesma caixa do .botao-primario — as duas classes
   andam juntas no HTML — e troca só o preenchimento: contorno em vez de
   sólido. A ação é destrutiva e secundária, e um terceiro botão vermelho
   cheio no cabeçalho disputaria atenção com as duas ações que o gestor de
   fato usa todo dia. */
.botao-sair {
  background-color: transparent;
  color: #C8102E;
  border: 1px solid #C8102E;
  /* Compensa 1px de borda em cima e embaixo para a altura bater com a dos
     botões sólidos, que não têm borda. */
  padding: 9px 17px;
}

.botao-sair:hover {
  background-color: #C8102E;
  color: #ffffff;
}

.painel-relatorio {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 260px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 18px;
  z-index: 20;
  text-align: left;
}

.campo-tipo {
  border: none;
  margin-bottom: 14px;
}

.campo-tipo legend {
  font-weight: 700;
  font-size: 0.8rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  padding: 0;
}

.campo-tipo label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 400;
  color: #1a1a1a;
  cursor: pointer;
}

.rotulo-formato {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.botoes-formato {
  display: flex;
  gap: 8px;
}

.botoes-formato button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #C8102E;
  background-color: #ffffff;
  color: #C8102E;
  font-weight: 700;
  cursor: pointer;
}

.botoes-formato button:hover {
  background-color: #C8102E;
  color: #ffffff;
}

#erro-relatorio {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #C8102E;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.controles {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.controles label {
  font-weight: 600;
  font-size: 0.95rem;
}

.controles select {
  padding: 8px 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 0.95rem;
  background-color: #ffffff;
  cursor: pointer;
}

.controles select:focus {
  outline: 2px solid #C8102E;
}

#carregando,
#erro {
  padding: 16px;
  font-size: 0.95rem;
}

#erro {
  background-color: #fdecea;
  color: #C8102E;
  border: 1px solid #f5c6c0;
  border-radius: 6px;
}

/* Grade responsiva: quantas colunas couberem, mínimo 220px cada */
.grade-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.cartao {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cartao h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666666;
  margin-bottom: 10px;
}

.cartao .valor {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.cartao .variacao {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Classes de cor usadas pelo app.js conforme a regra de cada métrica */
.positivo {
  color: #1b8a3d;
}

.negativo {
  color: #C8102E;
}

.neutro {
  color: #757575;
}

/* Utilitário global: presente, o elemento some — sem exceção.

   O !important é o que sustenta essa promessa. Sem ele a regra perde para
   qualquer seletor de mesma especificidade que defina 'display' mais abaixo, e
   o elemento fica visível carregando a classe que deveria escondê-lo:
   .modal-overlay (display: flex) vinha 300 linhas depois e o modal abria
   sozinho na carga da página, sem erro no console.

   .grade-kpis escapou por acaso — o display: grid dela está ANTES desta regra.
   Bastaria reordenar o arquivo para reproduzir o mesmo bug. */
.oculto {
  display: none !important;
}

/* --- Central de Decisão ------------------------------------------------- */

.titulo-secao {
  font-size: 1.15rem;
  color: #1a1a1a;
  margin-bottom: 14px;
}

#central-decisao {
  margin-bottom: 32px;
}

/* Parte 1: cartão do score de saúde */
.card-score {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.score-numero-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.score-numero {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a1a;
  min-width: 76px;
}

/* Score sem base de comparação: número aparece "apagado" para não
   sugerir uma avaliação de performance real. */
.score-numero.atenuado {
  color: #bbbbbb;
}

.barra-progresso {
  flex: 1;
  height: 14px;
  background-color: #e8e8e8;
  border-radius: 999px;
  overflow: hidden;
}

.barra-progresso-preenchimento {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.barra-progresso-preenchimento.atenuado {
  opacity: 0.35;
}

/* Cores por situação, reaproveitadas no badge e na barra */
.situacao-boa {
  background-color: #1b8a3d;
}

.situacao-atencao {
  background-color: #b7791f;
}

.situacao-critica {
  background-color: #C8102E;
}

.situacao-indeterminada {
  background-color: #757575;
}

.situacao-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
}

.score-motivo {
  margin-top: 12px;
  padding: 10px 14px;
  background-color: #f4f4f6;
  border-left: 4px solid #757575;
  border-radius: 6px;
  color: #555555;
  font-size: 0.9rem;
}

/* Parte 2: lista de alertas */

/* Fase 15: cabeçalho fixo (rótulo de data + badges), fora da área que rola */
.alertas-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alertas-cabecalho:not(:empty) {
  margin-bottom: 10px;
}

.filtros-alertas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
}

.badge-prioridade {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.badge-prioridade:hover {
  background-color: #f4f4f4;
}

/* Inativo: contorno e texto na cor da categoria, fundo branco. */
.badge-alta {
  color: #C8102E;
}

.badge-media {
  color: #b7791f;
}

.badge-oportunidade {
  color: #1b8a3d;
}

/* Ativo: a cor preenche o badge e o texto vira branco. Contraste alto de
   propósito — qual filtro está ligado precisa ser óbvio de relance. */
.badge-prioridade.ativo {
  color: #ffffff;
}

/* border-color junto do fundo: a borda herda currentColor, que no estado
   ativo é branco — sem isto sobra um anel branco em volta do badge. */
.badge-alta.ativo,
.badge-alta.ativo:hover {
  background-color: #C8102E;
  border-color: #C8102E;
}

.badge-media.ativo,
.badge-media.ativo:hover {
  background-color: #b7791f;
  border-color: #b7791f;
}

.badge-oportunidade.ativo,
.badge-oportunidade.ativo:hover {
  background-color: #1b8a3d;
  border-color: #1b8a3d;
}

.badge-prioridade:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.lista-alertas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* O teto impede a lista de empurrar os KPIs para fora da tela: sem ele, 25
     alertas filtrados jogavam a grade para 3231px.

     370px é medido: os estados realistas do resumo pedem 213px, 323px e 361px
     — todos cabem sem rolagem, que é o ponto do resumo. Só o pior caso (três
     categorias cheias, 765px) e o modo filtrado rolam, e aí rolar é o
     comportamento pedido. */
  max-height: 370px;
  overflow-y: auto;
  /* overflow-y: auto sozinho faz o eixo X virar "auto" também, e qualquer
     conteúdo que escape da quebra vira rolagem lateral dentro da lista.
     Travado em hidden de propósito. */
  overflow-x: hidden;
  /* A sombra dos cartões é cortada pelo overflow sem esta folga. */
  padding: 2px;
}

.alerta-mais {
  font-size: 0.9rem;
  color: #444444;
  padding: 2px 4px 6px;
}

.alerta-cartao {
  display: flex;
  gap: 12px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.alerta-bolinha {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.alerta-alta {
  background-color: #C8102E;
}

.alerta-media {
  background-color: #b7791f;
}

.alerta-oportunidade {
  background-color: #1b8a3d;
}

.alerta-conteudo {
  flex: 1;
}

/* Nome de campanha não tem espaço: "[AUGE04]CAMPDEVENDAS.WHAT[ROGER]AGOSTO2026"
   mede 421px em negrito, mais que a largura útil de um celular de 375px, e sem
   isto o cartão estica além da lista. "anywhere" e não "break-word" porque
   também reduz a largura mínima intrínseca — é o que faz o item flex parar de
   esticar. */
.alerta-titulo,
.alerta-campanha,
.alerta-detalhe {
  overflow-wrap: anywhere;
}

.alerta-titulo {
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.alerta-campanha {
  font-size: 0.85rem;
  color: #757575;
  margin-bottom: 4px;
}

.alerta-detalhe {
  font-size: 0.9rem;
  color: #444444;
}

.sem-alertas {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #444444;
}

/* ===========================================================================
   Fase 17: detalhamento de KPI por campanha (modal).
   =========================================================================== */

/* Aplicada pelo app.js a todo cartão que abre detalhamento. Na etapa 1 eram
   três; desde a etapa 2 são os seis, então hoje a classe cobre a grade
   inteira — o cursor e o hover seguem sendo o que sinaliza que o cartão
   responde ao clique. */
.cartao-clicavel {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.cartao-clicavel:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}

.cartao-clicavel:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-caixa {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 620px;
  /* A lista de campanhas pode passar da altura da tela: a caixa para de
     crescer e o corpo rola por dentro, mantendo cabeçalho e botão fechar
     sempre acessíveis. */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-titulo {
  font-size: 1.1rem;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.modal-subtitulo {
  font-size: 0.85rem;
  color: #757575;
}

.modal-fechar {
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1;
  color: #757575;
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.modal-fechar:hover {
  color: #1a1a1a;
}

.modal-fechar:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.modal-corpo {
  overflow-y: auto;
  padding: 8px 20px 20px;
}

/* A tabela de Custo por Conversa tem piso de 373px, imposto pelos TÍTULOS:
   "CAMPANHA", "INVESTIMENTO", "CONVERSAS" e "CUSTO" são palavras únicas e não
   quebram (quebrá-las daria "INVESTIMEN TO", já rejeitado). Não cabe abaixo de
   ~390px de corpo disponível.

   Sem este container o excesso rolava pelo .modal-corpo — 'overflow-y: auto'
   faz o eixo X computar 'auto' também — e levava as notas junto para fora da
   tela. Aqui rola só a tabela. Onde ela cabe, 'auto' não rola nada e o desktop
   fica idêntico. */
.modal-rolagem {
  overflow-x: auto;
}

.modal-tabela {
  width: 100%;
  border-collapse: collapse;
}

.modal-tabela th,
.modal-tabela td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* Só a coluna de nomes quebra em qualquer ponto: nome de campanha não tem
   espaço e passa de 400px (mesmo tratamento dos alertas na Fase 15.1).
   Aplicar isso ao cabeçalho partiria "INVESTIMENTO" no meio da palavra. */
.modal-tabela td:first-child {
  overflow-wrap: anywhere;
}

.modal-tabela th {
  font-size: 0.8rem;
  color: #757575;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.modal-tabela .modal-valor {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.modal-tabela tfoot td {
  font-weight: 700;
  color: #1a1a1a;
  border-bottom: none;
  border-top: 2px solid #1a1a1a;
}

.modal-vazio {
  color: #444444;
  padding: 12px 0;
}

/* Nota explicativa abaixo da tabela (Fase 17 etapa 2). Em Alcance e
   Frequência ela não é decoração: é o que impede o gestor de somar as linhas
   e achar que o rodapé está errado. Por isso fica no fluxo do texto, com
   contraste de leitura — não em cinza claro de rodapé secundário. */
.modal-nota {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #444444;
  background-color: #f4f4f6;
  border-left: 3px solid #757575;
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  margin-top: 12px;
}

/* ===========================================================================
   Fase 18.4: Dashboard Mensal — só a navegação por enquanto.
   =========================================================================== */

/* O score, o badge, a barra e os cards reaproveitam .card-score,
   .situacao-badge, .barra-progresso e as classes .situacao-* do painel — o
   que está aqui é só o que a tela mensal tem de diferente. */

.dash-periodo {
  font-size: 0.9rem;
  color: #757575;
  margin-bottom: 18px;
}

.dash-rotulo-secao {
  font-size: 1.1rem;
  color: #C8102E;
  border-bottom: 2px solid #C8102E;
  padding-bottom: 6px;
  margin-bottom: 18px;
}

.dash-titulo-grupo {
  font-size: 1rem;
  color: #1a1a1a;
  margin: 26px 0 12px;
}

.dash-titulo-bloco {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666666;
  margin-bottom: 12px;
}

/* Score estreito à esquerda, radar largo à direita (a especificação pede
   assim). minmax(0, …) nas duas: sem isso um nome de campanha longo no radar
   estica a coluna e come a do score. */
.dash-score-radar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
}

.dash-card-score .score-numero {
  margin-bottom: 10px;
}

.dash-card-score .barra-progresso {
  margin-top: 12px;
}

.dash-cobertura {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #757575;
}

/* --- Radar de alertas --- */

.dash-radar-lista {
  list-style: none;
}

.dash-radar-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.dash-radar-rotulo {
  font-weight: 600;
  font-size: 0.9rem;
}

.dash-radar-contagem {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dash-radar-resolvidos {
  font-size: 0.8rem;
  color: #757575;
  text-align: right;
}

.dash-radar-destaque {
  margin-top: 14px;
  padding: 10px 12px;
  background-color: #f4f4f6;
  border-left: 3px solid #757575;
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-radar-destaque-rotulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #757575;
}

.dash-radar-destaque-nome {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  /* Nome de campanha não tem espaço e passa de 400px — mesmo tratamento da
     Fase 15.1 e do modal da Fase 17. */
  overflow-wrap: anywhere;
}

.dash-radar-destaque-valor {
  font-size: 0.85rem;
  font-weight: 600;
}

/* --- Destaques do mês --- */

.dash-destaques {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.dash-card-destaque {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #757575;
  margin-bottom: 12px;
}

/* A cor da borda é reforço, nunca o único sinal: o título de cada card já diz
   "Melhor" ou "Pior" por extenso — mesmo princípio do marcador de
   classificação do relatório, que continua legível impresso em P&B. */
.dash-destaque-positivo {
  border-left-color: #1b8a3d;
}

.dash-destaque-negativo {
  border-left-color: #C8102E;
}

.dash-destaque-neutro {
  border-left-color: #b7791f;
}

.dash-destaque-titulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666666;
  margin-bottom: 8px;
}

.dash-destaque-nome {
  font-weight: 700;
  color: #1a1a1a;
  overflow-wrap: anywhere;
  margin-bottom: 2px;
}

.dash-destaque-sub {
  font-size: 0.85rem;
  color: #757575;
  margin-bottom: 8px;
}

.dash-destaque-valor {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
}

.dash-destaque-base {
  font-size: 0.8rem;
  color: #757575;
  margin-top: 4px;
}

.dash-nota-volume {
  font-size: 0.78rem;
  color: #757575;
  padding: 0 4px;
}

.dash-vazio {
  color: #444444;
  padding: 8px 0;
}

/* ===========================================================================
   Fase 18.5b: seção "Gráficos".
   =========================================================================== */

/* O rótulo de "Informações" ganha respiro só quando há uma seção acima dele. */
.dash-rotulo-informacoes {
  margin-top: 34px;
}

.dash-bloco {
  margin-bottom: 4px;
}

/* --- 1. Filtro de comparação --- */

.dash-filtro-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.dash-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dash-campo select {
  padding: 8px 12px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: #1a1a1a;
  background-color: #ffffff;
  cursor: pointer;
}

.dash-status {
  margin-top: 12px;
  font-size: 0.85rem;
}

.dash-status-ok {
  color: #1b8a3d;
}

.dash-status-erro {
  color: #C8102E;
  font-weight: 600;
}

.dash-status-neutro {
  color: #757575;
}

/* --- 2. Ranking: contêineres com rolagem própria --- */

/* Altura máxima com rolagem interna: com 17 vendedores a lista empurraria os
   comparativos para fora da tela. Quem rola é o bloco, não a página.
   'thin' e 'scrollbar-color' não valem no Safari, que cai na barra padrão —
   degradação aceitável, a rolagem continua funcionando. */
.dash-rolagem {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #C8102E #f0f0f0;
}

.dash-rolagem::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dash-rolagem::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 999px;
}

.dash-rolagem::-webkit-scrollbar-thumb {
  background: #C8102E;
  border-radius: 999px;
}

.dash-rolagem-tabela {
  margin-top: 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}

.dash-rank-item {
  display: grid;
  grid-template-columns: 130px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.dash-rank-nome {
  font-size: 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dash-rank-valor {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Barras (ranking, comparativos e distribuição) --- */

.dash-barra-trilho {
  background-color: #f0f0f0;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.dash-barra-preenchimento {
  height: 100%;
  border-radius: 999px;
  /* min-width para um valor pequeno mas real continuar visível: sem isso,
     1 conversa contra 89 vira uma barra de largura zero, visualmente igual à
     ausência de dado — que é o que o "—" significa. */
  min-width: 2px;
}

.dash-barra-atual {
  background-color: #C8102E;
}

.dash-barra-anterior {
  background-color: #7fb3d5;
}

.dash-barra-linha {
  display: grid;
  grid-template-columns: 1fr 92px;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.dash-barra-valor {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Tabela do ranking --- */

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

.dash-tabela th,
.dash-tabela td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  white-space: nowrap;
}

/* Cabeçalho fixo durante a rolagem do contêiner. O fundo opaco não é enfeite:
   sem ele as linhas passariam por baixo e apareceriam através do cabeçalho. */
.dash-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #1a1a1a;
  color: #ffffff;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: none;
}

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

.dash-celula-nome {
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Mesmo par de cores do relatório: abaixo da média da conta é bom, acima é
   caro. A coluna traz o número junto, então a cor é reforço, não o único
   sinal. */
.dash-custo-bom {
  color: #1b8a3d;
  font-weight: 600;
}

.dash-custo-alto {
  color: #C8102E;
  font-weight: 600;
}

/* --- 3 e 4. Comparativos --- */

.dash-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: #444444;
}

.dash-legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-legenda-cor {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

/* auto-fit, não duas colunas fixas: a quantidade se ajusta ao espaço, como a
   especificação pede. */
.dash-grade-comparativo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.dash-card-comparativo {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dash-card-comparativo-titulo {
  font-weight: 700;
  color: #1a1a1a;
  overflow-wrap: anywhere;
  margin-bottom: 2px;
}

.dash-card-comparativo-sub {
  font-size: 0.8rem;
  color: #757575;
  margin-bottom: 2px;
}

.dash-card-comparativo-nome {
  font-size: 0.78rem;
  color: #999999;
  overflow-wrap: anywhere;
  margin-bottom: 10px;
}

.dash-metrica {
  margin-bottom: 12px;
}

.dash-metrica-rotulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666666;
  margin-bottom: 4px;
}

/* Rodapé de cobertura geográfica no card de vendedor (Fase 19). Vem DEPOIS
   das métricas e separado por linha porque é outro assunto: as métricas
   comparam dois meses, isto descreve só o mês atual. */
.dash-cobertura {
  border-top: 1px solid #ebebeb;
  padding-top: 10px;
}

/* Botão, não hover: no celular hover não existe, e este painel é lido no
   celular. Ocupa a largura toda para o alvo de toque ser o bloco inteiro em
   vez de só as palavras. Os resets são a lição do .botao-primario — sem
   eles o <button> traz fonte, borda e fundo próprios do navegador. */
.dash-cobertura-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dash-cobertura-numeros {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #444444;
}

/* A seta é o que anuncia que abre: sem ela o texto não se distingue de uma
   legenda qualquer, e ninguém descobre que dá para clicar. */
.dash-cobertura-botao[aria-expanded="false"] .dash-cobertura-numeros::after {
  content: " \25B8";
  color: #c8102e;
}

.dash-cobertura-botao[aria-expanded="true"] .dash-cobertura-numeros::after {
  content: " \25BE";
  color: #c8102e;
}

.dash-cobertura-frase {
  display: block;
  font-size: 0.75rem;
  color: #757575;
  margin-top: 2px;
}

/* overflow-wrap porque a lista pode ter 18 nomes e alguns são longos
   ("Jijoca de Jericoacoara (16km)") — sem isso o card estoura de lado. */
.dash-cobertura-lista {
  font-size: 0.75rem;
  color: #444444;
  line-height: 1.45;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.dash-cobertura-vazio {
  font-size: 0.75rem;
  color: #757575;
  font-style: italic;
}

/* A ausência dita por extenso, na cor de atenção — não some no cinza junto
   com o resto do texto secundário. */
.dash-sem-dado {
  font-size: 0.75rem;
  color: #b7791f;
  font-style: italic;
  margin-top: 2px;
}

.dash-aviso-parcial {
  font-size: 0.82rem;
  color: #b7791f;
  font-weight: 600;
  background-color: #fdf6e7;
  border-left: 3px solid #b7791f;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* Rótulo do mês da seção "Informações". Ela mostra o último mês FECHADO e não
   acompanha o filtro de "Gráficos", então os dois períodos convivem na mesma
   tela — o destaque aqui é o que impede a leitura errada. */
.dash-periodo-informacoes {
  display: inline-block;
  background-color: #f4f4f6;
  border-left: 3px solid #757575;
  border-radius: 0 6px 6px 0;
  padding: 6px 12px;
  color: #444444;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Legenda à esquerda, filtro à direita, na mesma linha. */
.dash-controles-comparativo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dash-controles-comparativo .dash-legenda {
  margin-bottom: 0;
}

.dash-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: #444444;
  cursor: pointer;
  user-select: none;
}

.dash-toggle input {
  width: 15px;
  height: 15px;
  accent-color: #C8102E;
  cursor: pointer;
}

.dash-ver-mais-area {
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
}

/* Contorno em vez de fundo cheio: é uma ação secundária, e um segundo botão
   vermelho sólido competiria com os do cabeçalho. Mesmo tratamento dos botões
   PDF/Excel do painel de relatório. */
.dash-ver-mais {
  background-color: #ffffff;
  border: 1px solid #C8102E;
  color: #C8102E;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 20px;
  border-radius: 6px;
  cursor: pointer;
}

.dash-ver-mais:hover {
  background-color: #C8102E;
  color: #ffffff;
}

/* Telas menores: cartões ocupam a largura toda */
@media (max-width: 480px) {
  .grade-kpis {
    grid-template-columns: 1fr;
  }

  .controles {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Fase 15: no celular os KPIs viram uma coluna só (cartão mais alto) e o
     seletor de período empilha, então sobra menos espaço que no desktop. */
  .lista-alertas {
    max-height: 320px;
  }
}

/* ===========================================================================
   Ajustes de layout mobile da Central de Decisão.

   Vem DEPOIS do bloco de 480px de propósito: onde as duas faixas se cruzam, o
   que está aqui precisa vencer — mesma especificidade, ganha quem vem depois.
   =========================================================================== */
@media (max-width: 600px) {
  /* --- 0. Os dois botões do cabeçalho ------------------------------------
     Em 320px os dois somam 308px contra 272px úteis, e "EMITIR RELATÓRIO"
     quebrava em duas linhas enquanto "DASHBOARD" ficava numa — alturas
     diferentes lado a lado. Dividir em metades iguais faz os dois quebrarem do
     mesmo jeito; o padding menor evita a quebra na maioria das larguras. */
  .acoes-cabecalho {
    width: 100%;
    /* stretch, e não o 'center' do desktop: se o texto de um deles quebrar em
       duas linhas numa tela muito estreita, os dois crescem juntos em vez de
       ficarem com alturas diferentes lado a lado. */
    align-items: stretch;
  }

  /* flex-basis de 150px, não 0: é a largura de que "EMITIR RELATÓRIO" precisa
     para caber em uma linha nesta fonte. Cabendo lado a lado (375px+), dividem
     a linha; senão o wrap os empilha inteiros, em vez de espremê-los até o
     texto quebrar. */
  .acoes-cabecalho {
    flex-wrap: wrap;
  }

  .acoes-cabecalho > .botao-primario,
  .acoes-cabecalho > .acoes-relatorio {
    flex: 1 1 150px;
  }

  /* O de relatório está dentro da âncora do dropdown, então precisa esticar
     junto com ela para as duas metades ficarem iguais de verdade. */
  .acoes-relatorio > .botao-primario {
    width: 100%;
    height: 100%;
  }

  /* Padding e fonte menores é o que faz "EMITIR RELATÓRIO" — o rótulo mais
     longo dos dois — caber em uma linha até 375px, a largura de celular que
     o projeto usa como referência desde a Fase 15.1. */
  .acoes-cabecalho .botao-primario {
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  /* "SAIR" pede base menor que os 150px dos outros: o rótulo tem 4 letras, e
     150px o obrigaria a puxar uma linha só para ele mesmo onde ainda cabia
     companhia. Com 100px, o Dashboard (que tem só dois botões) mantém os dois
     lado a lado até 320px — 150 + 12 + 100 = 262 dentro dos 272 úteis. */
  .acoes-cabecalho > .botao-sair {
    flex: 1 1 100px;
  }

  /* Mesma compensação de borda do desktop: sem isto a regra de padding acima,
     mais específica, deixaria "SAIR" 2px mais alto que os sólidos. */
  .acoes-cabecalho .botao-sair {
    padding: 9px 11px;
  }

  /* --- 0b. Fase 18.5a: Dashboard Mensal em uma coluna --------------------
     As duas grades do dashboard viram coluna única: em 375px, o score
     espremido em 1/3 da tela deixaria o número de 2,5rem maior que a caixa,
     e o nome de campanha do radar não teria onde quebrar. */
  .dash-score-radar,
  .dash-destaques {
    grid-template-columns: 1fr;
  }

  /* Os cards do dashboard usam .card-score pelo fundo, raio e sombra — mas NÃO
     pelo layout que "4. Score e situação lado a lado" aplica a ela no mobile.
     Lá os filhos recebem 'order' para o número ficar ao lado do badge; aqui a
     ordem é outra, e herdar aquilo jogava o "78" para depois da cobertura.

     O seletor precisa do pai: '.dash-card-score' sozinho tem a MESMA
     especificidade de '.card-score' e perderia, porque aquele bloco vem depois
     — a mesma colisão que abriu o modal sozinho. Com o ancestral vira (0,2,0) e
     a ordem deixa de importar. */
  .dash-score-radar .dash-card-score,
  .dash-score-radar .dash-card-radar {
    display: block;
  }

  /* A contagem sai do meio e vai para a direita, ao lado do rótulo; o texto
     de resolvidos passa para a linha de baixo, alinhado à esquerda. Em três
     colunas numa tela estreita, "resolvidos automaticamente" quebrava em
     quatro linhas. */
  .dash-radar-item {
    grid-template-columns: 1fr auto;
  }

  .dash-radar-resolvidos {
    grid-column: 1 / -1;
    text-align: left;
  }

  /* --- 0c. Fase 18.5b: seção "Gráficos" no celular ----------------------- */

  /* Os campos do filtro empilham e ocupam a largura toda: lado a lado, o
     seletor de mês fica estreito demais para "setembro de 2026" caber. */
  .dash-filtro-campos {
    flex-direction: column;
    align-items: stretch;
  }

  .dash-filtro-campos .botao-primario {
    width: 100%;
  }

  /* O nome do vendedor sai da coluna fixa de 130px e passa a ocupar a linha
     inteira, com a barra e o valor embaixo — em 375px, 130px de nome mais a
     barra deixavam a barra com menos de 100px, ilegível como comparação. */
  .dash-rank-item {
    grid-template-columns: 1fr auto;
  }

  .dash-rank-nome {
    grid-column: 1 / -1;
  }

  /* A grade de comparativos vira coluna única. O minmax(260px) já faria isso
     sozinho a partir de ~290px de largura útil, mas em 320px o cálculo do
     auto-fit erra por poucos pixels e deixa o card estourar. */
  .dash-grade-comparativo {
    grid-template-columns: 1fr;
  }

  /* A tabela do ranking tem 5 colunas com nowrap e não cabe: rola de lado
     dentro do próprio contêiner, como o modal da Fase 17. */
  .dash-rolagem-tabela {
    overflow-x: auto;
  }

  /* Legenda e filtro empilham: lado a lado em 375px, o texto do checkbox
     ficaria com menos de 150px e quebraria em quatro linhas. */
  .dash-controles-comparativo {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-ver-mais {
    width: 100%;
  }

  /* --- 1. Badges de prioridade: três colunas iguais ---------------------- */
  .filtros-alertas {
    /* nowrap + flex:1 é o que garante os três na mesma linha: sem isso
       "Oportunidade" por extenso empurraria o terceiro para baixo. */
    flex-wrap: nowrap;
    gap: 6px;
  }

  .badge-prioridade {
    flex: 1;
    /* Item flex não encolhe abaixo do próprio conteúdo sem isto, e é o que
       permite dividir a largura em três partes iguais de verdade. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 2px;
  }

  /* Os dois pontos só fazem sentido com rótulo e número na mesma linha. */
  .badge-separador {
    display: none;
  }

  .badge-rotulo {
    font-size: 11px;
    line-height: 1.25;
    /* "Oportunidade" tem 12 caracteres e precisa caber em um terço da tela
       sem quebrar nem alargar o cartão — 11px é o que resolve isso. */
    white-space: nowrap;
  }

  .badge-numero {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
  }

  /* Fundo na cor da categoria, em tinta fraca, com o texto na cor cheia. O
     projeto não tem tokens de cor, então os tons saem da mesma paleta já
     usada nas bolinhas e nas barras. Só o estado inativo: o ativo continua
     com fundo sólido e texto branco, senão os dois ficariam parecidos. */
  .badge-alta:not(.ativo) {
    background-color: rgba(200, 16, 46, 0.1);
  }

  .badge-media:not(.ativo) {
    background-color: rgba(183, 121, 31, 0.12);
  }

  .badge-oportunidade:not(.ativo) {
    background-color: rgba(27, 138, 61, 0.1);
  }

  /* --- 2. Nome da campanha como etiqueta -------------------------------- */
  .alerta-campanha {
    display: inline-block;
    max-width: 100%;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background-color: #f4f4f6;
    /* Nome de campanha não tem espaço ("[AUGE04]CAMPDEVENDAS.WHAT[...]") e
       passa de 400px: quebra em várias linhas em vez de vazar ou encolher a
       fonte. Mesmo tratamento já dado ao título do alerta. */
    overflow-wrap: anywhere;
  }

  /* --- 3. Detalhe do alerta -------------------------------------------- */
  .alerta-detalhe {
    font-size: 12px;
    line-height: 1.5;
  }

  /* --- 4. Score e situação lado a lado, barra embaixo ------------------- */
  .card-score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 35px separa o número do badge. O espaçamento entre as linhas é menor
       de propósito: 35px ali afastaria demais a barra do número. */
    column-gap: 35px;
    row-gap: 12px;
  }

  /* O número e a barra estão dentro deste container no HTML, mas precisam
     ficar em linhas diferentes. "display: contents" dissolve a caixa e
     promove os dois a filhos diretos do card, sem tocar no HTML. */
  .score-numero-container {
    display: contents;
  }

  .score-numero {
    order: 1;
  }

  .situacao-badge {
    order: 2;
  }

  /* flex-basis: 100% é o que joga a barra para a linha de baixo, ocupando a
     largura toda. A cor continua vindo de .situacao-* como antes. */
  .barra-progresso {
    order: 3;
    flex-basis: 100%;
  }

  .score-motivo {
    order: 4;
    flex-basis: 100%;
  }

  /* --- Fase 17: modal em tela cheia no celular ------------------------- */
  .modal-overlay {
    padding: 0;
  }

  .modal-caixa {
    /* Tela cheia: numa largura de 375px, caixa flutuante com margem
       desperdiça o espaço que a tabela precisa para os nomes longos. */
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }

  .modal-cabecalho {
    padding: 16px 16px 12px;
  }

  .modal-corpo {
    padding: 8px 16px 16px;
  }

  .modal-tabela th,
  .modal-tabela td {
    padding: 10px 4px;
    font-size: 0.9rem;
  }

  /* O cabeçalho volta a ser menor que os dados, como no desktop. A regra acima
     o subia para 0.9rem junto com as células, e era isso que impunha o piso de
     373px na tabela de Custo por Conversa (ver .modal-rolagem). Precisa vir
     DEPOIS dela: mesma especificidade, ganha quem vem por último.

     Vale para as seis tabelas. As outras cinco não pioram — título mais
     estreito sobra largura para a coluna de nomes: medido em 78 combinações de
     largura × KPI, todas encolheram ou ficaram iguais.

     A exceção é Custo por Conversa a 320px, onde a coluna de nomes cai para
     76px e a tabela fica 197px mais alta: troca rolagem lateral (85px de
     excedente viram 21px) por vertical. De 360px em diante não há
     contrapartida — a 375px ela encolhe 85px E deixa de estourar.

     Só o cabeçalho muda; os números seguem em 0.9rem. */
  .modal-tabela th {
    font-size: 0.7rem;
  }
}