/* =====================================================================
   Painel Campanhas Internas — sistema visual
   =====================================================================

   Herda a identidade de src/Sidebar.html (a barra lateral que roda dentro
   do Google Sheets). A planilha em si usa outra paleta, clara, com
   verde-petróleo — a referência é a barra lateral, não a planilha.

   Duas correções estruturais em relação ao original, medidas, não
   opinadas:

   1. A BORDA NÃO PODE CARREGAR SIGNIFICADO. --borda (#2D2D2D) tem
      1.36:1 contra o fundo — muito abaixo dos 3:1 que a WCAG exige de
      elemento de interface significativo. A escala ganhou um degrau:
      --borda para divisória decorativa, --borda-forte (#666, 3.26:1)
      para o que comunica estado.

   2. O ROSA SIGNIFICAVA DUAS COISAS. Na barra lateral #FF1493 é o acento
      da marca E a cor de "perda" nos relatórios. Numa barra de 300px
      passa; num painel de tela cheia com métricas ao lado de botões,
      fica ambíguo. Papéis separados aqui, e um token novo (--atencao)
      porque "cliente atrasado" não é perigo (nada quebrou) nem perda
      (não é métrica) — é atenção necessária.

   Contraste sobre --fundo (#121212), medido:
     --texto            #F7FAFC   17.87:1
     --texto-2          #A0AEC0    8.31:1
     --marca            #FF1493    5.15:1
     --ok               #4ADE80   10.75:1
     --perigo           #FF4444    5.50:1
     --atencao          #FFB020   10.24:1
     --borda-forte      #666666    3.26:1  (só elemento de interface)
     --borda            #2D2D2D    1.36:1  (só decoração)
   ===================================================================== */

:root {
  /* superfícies — a elevação é INVERTIDA de propósito: o aninhado
     afunda em vez de subir. É o contrário da convenção, mas é a
     linguagem que já existe na barra lateral. Manter inteiro é melhor
     que ficar meio a meio. */
  --fundo: #121212;
  --superficie: #1E1E1E;
  --superficie-baixa: #161616;
  --botao: #252525;
  --botao-hover: #2A2A2A;

  --borda: #2D2D2D;
  --borda-forte: #666666;

  --texto: #F7FAFC;
  --texto-2: #A0AEC0;
  --icone: #CBD5E1;

  --marca: #FF1493;
  --marca-brilho: rgba(255, 20, 147, 0.4);
  --ok: #4ADE80;
  --perigo: #FF4444;
  --atencao: #FFB020;

  --sombra: rgba(0, 0, 0, 0.3);

  /* Uma família para toda a interface — painel de operação não precisa
     de par display/corpo, e a barra lateral já estabeleceu esta pilha.
     --fonte-marca existe separada para o wordmark: assim que os .woff2
     do Montserrat entrarem em public/fonts/, é um token para trocar.
     Ver o @font-face comentado no fim deste arquivo. */
  --fonte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-marca: var(--fonte);

  /* Escala fixa em rem, razao ~1.12-1.2. Nada de clamp: o usuario abre
     isto num monitor, e titulo fluido que encolhe dentro de painel piora.

     Os nomes sao semanticos de proposito. A primeira versao deste arquivo
     usava --t-9, --t-10 ... e eu acabei reproduzindo os tamanhos da barra
     lateral (9-12px) com base 15px — ou seja, importei a densidade de um
     painel de 300px dentro do Sheets para uma tela de 1440px. A linguagem
     que se herda e "rotulo pequeno, maiusculo, espacado", nao o pixel. */
  --t-rotulo: 0.733rem;   /* 11px  — rotulo maiusculo, selo, cabecalho de tabela */
  --t-meta: 0.8rem;       /* 12px  — texto secundario, ajuda */
  --t-corpo: 0.9rem;      /* 13.5px — corpo, celula de tabela, nav, botao */
  --t-medio: 1rem;        /* 15px  — enfase, titulo de caixa, wordmark */
  --t-grande: 1.2rem;     /* 18px */
  --t-titulo: 1.6rem;     /* 24px  — h1 */
  --t-numero: 2rem;       /* 30px  — numero grande, quando houver */

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;

  --barra: 240px;
  --transicao: 180ms cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 15px;   /* a barra lateral usa 9–12px porque vive em 300px
                        dentro do Sheets; aqui a base sobe, a linguagem
                        (rótulo pequeno, maiúsculo, espaçado) continua. */
  background: var(--fundo);
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

/* --- superfícies do navegador: o que não desenhamos também é o design -- */

::selection { background: var(--marca); color: #fff; }
:root { caret-color: var(--marca); accent-color: var(--marca); color-scheme: dark; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borda);
  border: 2px solid var(--fundo);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--borda-forte); }

/* ============================== estrutura ============================= */

.casca {
  display: grid;
  grid-template-columns: var(--barra) 1fr;
  min-height: 100vh;
}

.barra {
  background: var(--superficie-baixa);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  padding: var(--e-4) var(--e-4) var(--e-4);
  border-bottom: 1px solid var(--borda);
}
.marca-nome {
  font-family: var(--fonte-marca);
  font-size: var(--t-medio);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}
.marca-sub {
  display: block;
  font-size: var(--t-rotulo);
  letter-spacing: 0.08em;
  color: var(--texto-2);
  text-transform: uppercase;
  margin-top: 3px;
}

.nav { padding: var(--e-3) var(--e-2); flex: 1; }
.nav-grupo {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--texto-2);
  text-transform: uppercase;
  padding: var(--e-3) var(--e-2) var(--e-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 9px var(--e-2);
  margin-bottom: 2px;
  border-radius: var(--r-2);
  color: var(--texto-2);
  text-decoration: none;
  font-size: var(--t-corpo);
  border: 1px solid transparent;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.nav-item:hover { background: var(--botao); color: var(--texto); }
.nav-item[aria-current='page'] {
  background: var(--botao);
  color: var(--texto);
  border-color: var(--borda-forte);
}
/* O rosa marca o item atual — papel único: marca e seleção. */
.nav-item[aria-current='page'] .icone { stroke: var(--marca); }
.nav-item[aria-current='page']::before {
  content: '';
  width: 2px;
  align-self: stretch;
  margin: -9px 0 -9px calc(var(--e-2) * -1 - 1px);
  background: var(--marca);
  border-radius: 0 2px 2px 0;
}

.barra-pe {
  padding: var(--e-3);
  border-top: 1px solid var(--borda);
  font-size: var(--t-rotulo);
  color: var(--texto-2);
}
.barra-pe-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--e-2);
}

.icone {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: var(--icone); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
  transition: stroke var(--transicao);
}

.conteudo {
  padding: var(--e-6) var(--e-7);
  max-width: 1400px;
  /* Item de grid tem min-width:auto, que resolve para min-content — e o
     min-content daqui inclui a largura mínima da tabela, o que esticava
     a página inteira e cortava a ação do cabeçalho. Com min-width:0 a
     rolagem fica onde deve: dentro da .tabela-caixa. */
  min-width: 0;
}

.cabeca { margin-bottom: var(--e-5); }
.titulo {
  font-family: var(--fonte-marca);
  font-size: var(--t-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Resumo em frase, não em fileira de cartões de número: são poucos fatos
   e eles se leem melhor como uma linha do que como quatro caixas. */
.resumo {
  margin: var(--e-2) 0 0;
  color: var(--texto-2);
  font-size: var(--t-corpo);
}
.resumo strong { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.resumo .destaque-atencao { color: var(--atencao); font-weight: 600; }

.secao { margin-top: var(--e-6); }
.secao-titulo {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin: 0 0 var(--e-3);
}

/* =============================== tabela ============================== */

.tabela-caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-3);
  overflow-x: auto;
}

table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-corpo);
  /* Sem isto a tabela comprime as células até o nome do cliente quebrar
     em três linhas. Com min-width, a caixa rola em vez de esmagar — que
     é o comportamento certo para dado tabular. */
  min-width: 780px;
}
.tabela td, .tabela th { white-space: nowrap; }
.tabela td:first-child { white-space: normal; min-width: 180px; }
.tabela thead th {
  text-align: left;
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-2);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela tbody td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--superficie-baixa); }
.tabela .num { font-variant-numeric: tabular-nums; }
.tabela .nome-cliente { font-weight: 600; color: var(--texto); }
.tabela a.nome-cliente { color: var(--texto); text-decoration: none; }
.tabela a.nome-cliente:hover { color: var(--marca); }

/* Versão que divergiu do esperado. Sem border-left colorida: o valor em
   si muda de cor, que é o dado, não a moldura. */
.valor-diverge { color: var(--atencao); font-weight: 600; }
.valor-ok { color: var(--texto); }
.valor-vazio { color: var(--texto-2); }

/* =============================== selos =============================== */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--e-2);
  border-radius: 999px;
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  white-space: nowrap;
}
.selo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.selo-ok      { color: var(--ok);      border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.selo-atencao { color: var(--atencao); border-color: color-mix(in srgb, var(--atencao) 40%, transparent); }
.selo-perigo  { color: var(--perigo);  border-color: color-mix(in srgb, var(--perigo) 40%, transparent); }
.selo-neutro  { color: var(--texto-2); border-color: var(--borda-forte); }

.canal {
  font-size: var(--t-rotulo);
  font-weight: 600;
  color: var(--texto-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================== botões =============================== */

.botao {
  --botao-borda: var(--borda-forte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 9px var(--e-4);
  border: 1px solid var(--botao-borda);
  border-radius: var(--r-2);
  background: var(--botao);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--t-corpo);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.botao:hover { background: var(--botao-hover); }
.botao:active { background: var(--fundo); }
.botao[disabled], .botao[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--botao);
}
.botao[disabled]:hover { background: var(--botao); }

/* Ação primária: o único lugar que herda o efeito de borda neon da barra
   lateral. É a assinatura da marca, e vale exatamente porque é raro. */
.botao-primario {
  position: relative;
  background: transparent;
  border-color: var(--marca);
  color: var(--marca);
  font-weight: 700;
  overflow: hidden;
}
.botao-primario:hover,
.botao-primario:active {
  background: var(--marca);
  color: #fff;
  box-shadow: 0 2px 12px var(--marca-brilho);
}
.botao-primario[disabled] { border-color: var(--borda-forte); color: var(--texto-2); background: transparent; }

.botao-perigo { border-color: color-mix(in srgb, var(--perigo) 55%, transparent); color: var(--perigo); background: transparent; }
.botao-perigo:hover { background: var(--perigo); color: #fff; }

.botao-discreto {
  background: transparent;
  border-color: transparent;
  color: var(--texto-2);
  padding: 5px var(--e-2);
  font-size: var(--t-meta);
}
.botao-discreto:hover { background: var(--botao); color: var(--texto); }

.acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }

/* ============================== formulário =========================== */

.campo { margin-bottom: var(--e-4); }
.campo-rotulo {
  display: block;
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 6px;
}
.campo-entrada, .campo-area, select.campo-entrada {
  width: 100%;
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-1);
  color: var(--texto);
  font-family: inherit;
  font-size: var(--t-corpo);
  padding: var(--e-2) 10px;
  transition: border-color var(--transicao);
}
.campo-entrada:hover, .campo-area:hover { border-color: var(--icone); }
.campo-entrada:focus, .campo-area:focus { outline: none; border-color: var(--marca); }
.campo-area { resize: vertical; min-height: 72px; line-height: 1.45; }
.campo-entrada[aria-invalid='true'] { border-color: var(--perigo); }
.campo-erro { color: var(--perigo); font-size: var(--t-rotulo); margin-top: 5px; }
.campo-ajuda { color: var(--texto-2); font-size: var(--t-rotulo); margin-top: 5px; }

/* ============================== avisos =============================== */

.aviso {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borda);
  border-radius: var(--r-2);
  background: var(--superficie);
  font-size: var(--t-corpo);
  margin-bottom: var(--e-4);
}
.aviso-atencao { border-color: color-mix(in srgb, var(--atencao) 35%, transparent); }
.aviso-atencao .icone { stroke: var(--atencao); }
.aviso-perigo { border-color: color-mix(in srgb, var(--perigo) 40%, transparent); }
.aviso-perigo .icone { stroke: var(--perigo); }
.aviso-titulo { font-weight: 600; display: block; margin-bottom: 2px; }
.aviso-texto { color: var(--texto-2); }

/* ============================ estado vazio =========================== */

/* Ensina a interface em vez de dizer "nada aqui". */
.vazio {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-3);
  padding: var(--e-7) var(--e-5);
  text-align: center;
}
.vazio-titulo { font-size: var(--t-medio); font-weight: 600; margin: 0 0 var(--e-2); }
.vazio-texto {
  color: var(--texto-2);
  font-size: var(--t-corpo);
  margin: 0 auto var(--e-4);
  max-width: 52ch;
}

/* ============================= carregando ============================ */

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-baixa) 25%, var(--botao) 50%, var(--superficie-baixa) 75%);
  background-size: 200% 100%;
  animation: desliza 1.3s ease-in-out infinite;
  border-radius: var(--r-1);
  height: 1em;
}
@keyframes desliza {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================ tela de login ========================== */

.login-tela {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e-5);
}
.login-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-3);
  padding: var(--e-6);
  box-shadow: 0 12px 32px -8px var(--sombra);
}
.login-marca { margin-bottom: var(--e-6); }
.login-titulo { font-size: var(--t-medio); font-weight: 600; margin: 0 0 var(--e-2); }
.login-texto { color: var(--texto-2); font-size: var(--t-corpo); margin: 0 0 var(--e-5); }
.login-caixa .botao { width: 100%; }

/* ============================= utilitários =========================== */

.pilha-2 > * + * { margin-top: var(--e-2); }
.linha { display: flex; align-items: center; gap: var(--e-3); }
.entre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;   /* senão a ação da direita corta na borda em tela estreita */
}
.discreto { color: var(--texto-2); }
.num { font-variant-numeric: tabular-nums; }
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}
.pular-para-conteudo:focus {
  left: var(--e-3);
  top: var(--e-3);
  z-index: 10;
  background: var(--superficie);
  border: 1px solid var(--marca);
  border-radius: var(--r-1);
  padding: var(--e-2) var(--e-3);
  color: var(--texto);
}

/* ============================ responsivo ============================= */

/* Estrutural, não tipográfico: a barra vira topo, a tabela rola. */
@media (max-width: 860px) {
  .casca { grid-template-columns: 1fr; }
  .barra {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--borda);
  }
  .nav { display: flex; flex-wrap: wrap; gap: var(--e-1); padding: var(--e-2); }
  .nav-grupo { display: none; }
  .nav-item { margin-bottom: 0; }
  .nav-item[aria-current='page']::before { display: none; }
  .conteudo { padding: var(--e-5) var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .botao-primario:hover { box-shadow: none; }
}

/* ---------------------------------------------------------------------
   Montserrat, quando os arquivos existirem.
   É a única fonte de marca explícita em todo o repositório (usada nos
   cabeçalhos das abas por padronizarAbaAxle), então não é escolha
   arbitrária — mas fonte de marca só entra self-hosted. Nunca por CDN:
   o CSP não permite terceiro, e é o mesmo princípio da remoção do
   quickchart.io.

   Para ativar: colocar os .woff2 em painel/public/fonts/ e trocar
   --fonte-marca para 'Montserrat', var(--fonte).

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
--------------------------------------------------------------------- */