/* Paleta e tipografia extraídas de degustadeliciasgeladas.com.br.

   Papel deste arquivo depois do redesign (Fase 6, 13/09/2026): todo o
   painel real já usa o shell novo (base_novo.html + tokens.css/shell.css/
   componentes.css) — o único consumidor que ainda depende inteiramente
   deste arquivo é login.html, uma página solta que nunca estendeu
   base.html (que foi removido) e continua com a identidade visual antiga.
   Por isso as regras aqui são só o que login.html usa de verdade (botão,
   campo de formulário genérico, `.login-*`, `.erro`) mais um punhado de
   componentes específicos ainda não migrados para o vocabulário novo
   (`.previa`/`.previa-corpo` — base do preview de Modelos de mensagem,
   `.edicao`/`.linha-acao` de Canais, `.grafico*` do Dashboard/Clientes,
   `.abas`/`.resumo`/`.selecao-suspensa` e afins) — cada uma dessas classes é
   lida por pelo menos uma tela migrada, então não pode ser removida sem
   repor a regra em componentes.css primeiro. Removido nesta limpeza: `.topo`/`.subtopo`
   (menu horizontal antigo), `.indicadores`/`.indicador` (virou
   `.grade-metricas`/`.cartao-metrica`), `.tabela-envolve` + `table`/`th`/
   `td` soltos (virou `.tabela-container`/`table.tabela-nova`), `.etiqueta`
   (virou `.selo`), `.link-perigo` (virou botão-ícone `--perigo`),
   `.inbox*`/`.abas-verticais` (Conversas virou 3 colunas, `conversas.css`),
   `td a.inativa` e `button.discreto` (nunca usado em nenhum `<button>` de
   verdade — ver `.discreto` em componentes.css). */
:root {
  /* Nome histórico ("vermelho da Degusta"), valor não é mais vermelho: desde
     13/09/2026 a cor principal do painel é fixa (pedido do Pedro, ver
     tokens.css --brand-600) e vale também nas telas que este arquivo ainda
     estiliza (login, gráfico de barras). Renomear a variável tocaria dezenas
     de linhas por um ganho só cosmético — não vale o risco agora. */
  --vermelho: #1932E4;
  --vermelho-escuro: color-mix(in srgb, #1932E4 82%, black 18%);
  --creme: #fde9d9;
  --pessego: #fac8a0;
  --cinza-texto: #484848;
  --cinza-medio: #797979;
  --cinza-claro: #f2f2f2;
  --verde: #54b300;
  --borda: #e4e0da;
  --fundo: #faf8f5;
  --raio: 10px;
  --sombra: 0 1px 3px rgba(72, 72, 72, .08), 0 1px 2px rgba(72, 72, 72, .06);
}

* { box-sizing: border-box; }

/* Qualquer elemento com uma regra de `display` própria (label, .caixa, .linha,
   quase tudo aqui) vence o `[hidden] { display: none }` do navegador, porque
   CSS de autor sempre tem prioridade sobre o do agente de usuário, mesmo com
   especificidade menor — não é uma disputa de especificidade, é a origem da
   regra. Sem este `!important`, todo `elemento.hidden = true` do JS do
   painel (mostrar/esconder campo condicional) marca o atributo certinho e o
   elemento continua visível na tela. Achado ao vivo: campo de busca de
   Campanhas escondendo item filtrado, e o próprio campo de data/hora de
   agendamento continuando visível com "Envio imediato" marcado. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--cinza-texto);
  background: var(--fundo);
  line-height: 1.55;
}

/* ---------- Conteúdo ---------- */
main { max-width: 1140px; margin: 28px auto 60px; padding: 0 24px; }

h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; }
.subtitulo { color: var(--cinza-medio); margin: 0 0 24px; font-size: 14px; }

.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--sombra);
}

.vazio { color: var(--cinza-medio); font-style: italic; }

/* ---------- Formulários ---------- */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 14px; }

input[type=text], input[type=password], input[type=email], textarea, select {
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font: inherit;
  color: inherit;
  background: #fff;
}

input:focus, textarea:focus, select:focus { outline: 2px solid var(--pessego); outline-offset: -1px; border-color: var(--pessego); }
textarea { resize: vertical; }
label.caixa { display: flex; align-items: center; gap: 8px; }
label.caixa input { width: auto; margin: 0; }

/* Seleção de bairro/cidade/estado em Campanhas: combo suspensa (<details>,
   sem JS de abrir/fechar) com busca + lista rolável dentro — uma base real
   chega a centenas de bairros, e uma coluna de caixas sempre aberta sem
   limite de altura vira uma tela inteira de rolagem. */
.selecao-suspensa {
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 10px 12px;
  background: #fff;
}
.selecao-suspensa > summary { cursor: pointer; font-size: 13px; font-weight: 500; }
.selecao-suspensa[open] > summary { margin-bottom: 10px; }
.campo-busca-opcao { margin: 0 0 8px; }
.lista-opcoes { max-height: 220px; overflow-y: auto; }
.lista-opcoes label.caixa { margin-bottom: 8px; }
.lista-opcoes label.caixa:last-child { margin-bottom: 0; }
.contagem-selecionados { color: var(--cinza-medio); font-weight: 400; }

.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }

button, .botao {
  display: inline-block;
  background: var(--vermelho);
  color: #fff;
  border: 0;
  border-radius: 7px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

button:hover, .botao:hover { background: var(--vermelho-escuro); }
button.secundario, .botao.secundario { background: #fff; color: var(--cinza-texto); border: 1px solid var(--borda); }
button.secundario:hover, .botao.secundario:hover { background: var(--cinza-claro); }

.acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Tela de Configuração ---------- */
.aviso.sucesso { background: #e8f6dd; border-color: #a9d488; color: #2f6a00; }

/* A prévia imita o painel em miniatura para a escolha ser avaliada no contexto
   em que a cor vai aparecer, e não num quadrado solto. Cores vêm do JavaScript
   da tela; aqui fica só a forma. */
.previa { border: 1px solid var(--cinza-claro); border-radius: 10px; padding: 0; margin: 4px 0 0; overflow: hidden; }
.previa legend { padding: 0 8px; }
.previa-corpo { display: flex; align-items: center; gap: 14px; padding: 14px; background: #fff; }

/* Edição sob demanda: <details> em vez de JavaScript ou de uma página por
   registro. A lista continua legível e o formulário só ocupa espaço de quem for
   mexer nele. */
.edicao { display: inline-block; margin: 0 10px; }
.edicao summary { cursor: pointer; color: var(--vermelho-escuro); font-size: 13px; }
.edicao form { margin-top: 10px; padding: 12px; background: var(--cinza-claro); border-radius: 8px; min-width: 460px; }

/* O teste de SMTP precisa do e-mail de destino ao lado do botão, na linha. */
.linha-acao { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.linha-acao input { font-size: 12.5px; padding: 5px 8px; }

/* ---------- Filtros e abas ---------- */
/* A fila é alvo de âncora (#fila): sem a margem o título encosta na borda
   de cima da janela e parece cortado. */
#fila { scroll-margin-top: 20px; }

.abas { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.abas a { padding: 6px 14px; border-radius: 20px; text-decoration: none; color: var(--cinza-medio); font-size: 13px; font-weight: 500; border: 1px solid var(--borda); background: #fff; }
.abas a:hover { border-color: var(--pessego); }
.abas a.ativo { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

.resumo { background: var(--cinza-claro); border-radius: 7px; padding: 14px; white-space: pre-wrap; font-size: 13px; margin: 0; font-family: inherit; }

.aviso { background: var(--creme); border-left: 3px solid var(--pessego); padding: 12px 14px; border-radius: 7px; font-size: 13px; margin-bottom: 20px; }
.erro { color: var(--vermelho); font-size: 13.5px; margin-bottom: 14px; }

/* ---------- Login ---------- */
/* Redesenhado em 14/09/2026, pedido do Pedro com referência visual: fundo
   cinza claro (não mais a cor de marca), cartão branco, logo solta em cima do
   nome do cliente (sem caixa colorida atrás) — botão "Entrar" é o único
   elemento que continua na cor de marca cheia, sem tocar. */
.login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef1f5;
  padding: 24px;
}
.login-caixa { background: #fff; border-radius: 14px; padding: 34px; width: 100%; max-width: 380px; box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
.login-caixa h1 { text-align: center; font-size: 19px; margin-bottom: 22px; }
.login-caixa button { width: 100%; padding: 11px; }
/* Envolve caixa e crédito para os dois ficarem centralizados juntos e com a
   mesma largura; sem isso o flex da tela centraliza só o cartão. */
.login-conteudo { width: 100%; max-width: 380px; }
/* Texto escuro agora — o crédito fica sobre o fundo cinza claro da tela, não
   mais sobre um fundo de cor cheia; branco ficaria quase invisível. */
.login-credito { text-align: center; margin: 18px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--cinza-texto); }
.login-credito a { color: var(--vermelho); text-decoration: underline; }
.login-credito a:hover { text-decoration: none; }

/* Logo fornecida pelo Pedro em 14/09/2026 (app/static/logo-flychat.svg), no
   lugar do texto fixo "FLYCHAT" que existia desde 13/09/2026 (mesma troca da
   sidebar nova, shell.css .sidebar-marca-img). Sem caixa/fundo — sozinha em
   cima do nome do cliente, direto no branco do cartão; por isso o SVG teve o
   texto recolorido de branco para a cor de marca (#1932e4), a única forma de
   continuar legível fora de uma caixa escura. */
.login-marca {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.login-marca-img {
  /* Largura fixa dentro do espaço do cartão (380px de largura máxima, menos
     34px de padding de cada lado) — deixa a imagem grande o bastante para ler
     sem estourar o cartão. */
  width: 240px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Gráfico de barras horizontais ---------- */
.grafico { display: grid; gap: 10px; }

.grafico .faixa { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; }
.grafico .rotulo { font-size: 13px; font-weight: 500; }
/* display: block nos dois é obrigatório, não cosmético: span é inline, e
   largura/altura em porcentagem não valem em elemento inline — a barra ficava
   com 0 de altura e o gráfico aparecia como trilho vazio. */
.grafico .trilho { display: block; background: var(--cinza-claro); border-radius: 20px; height: 20px; overflow: hidden; }
/* Cor única, o vermelho da marca: quem compara as faixas usa o comprimento,
   e uma cor por categoria só acrescentaria uma legenda para decorar. A classe
   do assunto continua no HTML como gancho, caso volte a ser preciso. */
.grafico .barra { display: block; height: 100%; border-radius: 20px; background: var(--vermelho); min-width: 3px; }
.grafico .valor { font-size: 13px; font-weight: 600; text-align: right; }

.colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }