/* ==========================================================================
   Painel de eventos - RV Mais
   ========================================================================== */

/* ── Tema ──────────────────────────────────────────────────────────────────
   Tres estados. `:root` define o tema escuro por completo; a media query
   atende quem nunca escolheu e tem o sistema em claro; o seletor de atributo
   atende a escolha explicita, que vence a preferencia do sistema.

   A media query e guardada por :not([data-tema="escuro"]) para que escolher
   escuro num sistema claro funcione. Sem isso, a media query venceria por
   especificidade igual e ordem posterior.

   Nenhuma cor tem sua unica definicao dentro de um dos blocos de sobreposicao:
   quem entra ali ja existe aqui. */
:root {
  --bg: #0f1117;
  --surface: #1a1d2e;
  --surface2: #222540;
  --border: #2e3155;
  --grid: rgba(46, 49, 85, .7);
  /* Dois papeis, duas cores. `--accent` e primeiro plano: texto da aba ativa e
     anel de foco sobre superficie escura, entao precisa ser claro.
     `--accent-solido` e fundo de chip com texto branco em cima, entao precisa
     ser escuro. No tema escuro as duas exigencias sao aritmeticamente
     incompativeis -- texto branco pede luminancia <= 0,18 e texto sobre a
     superficie pede >= 0,23 -- e uma cor so falharia num dos dois usos. */
  --accent: #4f8ef7;
  --accent-solido: #2f6fd8;
  --accent2: #7c3aed;
  --accent3: #10b981;
  --accent4: #f59e0b;
  --accent5: #ef4444;
  --accent6: #06b6d4;

  /* Paleta das series de dado. Separada dos `--accent*`, que sao cromo de
     interface: aqui a cor e a marca no grafico, e o requisito e outro.

     Os passos do escuro NAO sao os do claro. O codigo antes usava os mesmos
     seis hex nos dois temas, afirmando que "leem bem sobre fundo claro e
     escuro" -- e tres nao liam: verde, ambar e ciano ficavam com luminancia
     0.70, 0.77 e 0.72, fora da banda 0.48-0.67 que fundo escuro exige, e o
     roxo nao alcancava 3:1 contra a superficie. Estes seis foram validados
     como conjunto contra `--surface` do escuro: banda, croma, separacao para
     daltonismo (pior par 9.3, fora da faixa de aviso) e contraste >= 3:1. */
  --serie-1: #4f8ef7;   /* azul     */
  --serie-2: #059669;   /* verde    */
  --serie-3: #b45309;   /* ambar    */
  --serie-4: #0891b2;   /* ciano    */
  --serie-5: #8b5cf6;   /* roxo     */
  --serie-6: #ef4444;   /* vermelho */

  --text: #e2e8f0;
  --text-muted: #8892a4;
  --text-strong: #ffffff;
  --header-de: #1a1d2e;
  --header-para: #0f1117;
  --card-radius: 14px;

  /* Largura maxima do conteudo, e a folga lateral minima.
     Conferido num monitor real em 08/09/2026: o viewport tinha 2.540px e o
     painel se esticava de borda a borda -- doze cartoes numa linha so, tabelas
     com celulas separadas por meio metro de vazio, e o olho tendo de
     atravessar a tela inteira para ligar o rotulo da esquerda ao numero da
     direita. Nao e so aparencia: linha longa demais e mais dificil de ler, e e
     por isso que texto corrido tem medida.
     A faixa e aplicada por PADDING e nao por um `<div>` novo, porque as secoes
     (header, abas, cartoes, conteudo) sao irmas e cada uma pinta o proprio
     fundo de ponta a ponta -- envolver todas num contêiner tiraria a barra do
     cabecalho da borda da tela, que e onde ela deve ficar. */
  --largura-max: 1680px;
  --folga-lateral: 32px;
}

/* Paleta clara. Repetida nos dois blocos abaixo de proposito: um vale para
   "sistema claro, sem escolha", o outro para "escolheu claro". */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --bg: #f4f6fb;
    --surface: #ffffff;
    --surface2: #eceff7;
    --border: #d7dce9;
    --grid: rgba(112, 124, 158, .26);
    --accent: #2563eb;
    --accent-solido: #2563eb;
    --accent3: #036949;
    /* Passos do claro. Validados contra `--surface` #ffffff: banda, croma,
       separacao para daltonismo e piso de visao normal passam. O contraste de
       verde, ambar e ciano fica abaixo de 3:1, e por isso as barras levam
       rotulo direto -- e o alivio que a regra exige, nao um extra. */
    --serie-1: #2563eb;
    --serie-2: #10b981;
    --serie-3: #f59e0b;
    --serie-4: #06b6d4;
    --serie-5: #7c3aed;
    --serie-6: #ef4444;
    --text: #2a2f3d;
    --text-muted: #626c82;
    --text-strong: #0d1119;
    --header-de: #ffffff;
    --header-para: #eceff7;
  }
}
:root[data-tema="claro"] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface2: #eceff7;
  --border: #d7dce9;
  --grid: rgba(112, 124, 158, .26);
  --accent: #2563eb;
  --accent-solido: #2563eb;
  --accent3: #036949;
  --serie-1: #2563eb;
  --serie-2: #10b981;
  --serie-3: #f59e0b;
  --serie-4: #06b6d4;
  --serie-5: #7c3aed;
  --serie-6: #ef4444;
  --text: #2a2f3d;
  --text-muted: #626c82;
  --text-strong: #0d1119;
  --header-de: #ffffff;
  --header-para: #eceff7;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Header ── */
.header {
  background: linear-gradient(135deg, var(--header-de) 0%, var(--header-para) 100%);
  border-bottom: 1px solid var(--border);
  padding: 20px max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* O <h1> e o NOME DO EVENTO, nao o titulo do produto.
   Antes o titulo grande era "Dashboard Geral do Evento" e o nome do evento
   ficava pequeno e cinza embaixo -- hierarquia invertida: quem abre o painel
   sabe que e um painel, e precisa saber DE QUE evento. */
.header-left h1 { font-size: 20px; font-weight: 700; color: var(--text-strong);
                  line-height: 1.25; }
.header-sub     { font-size: 13px; color: var(--text-muted); margin-top: 3px;
                  display: flex; align-items: center; gap: 8px; }
.header-sub [hidden] { display: none; }
.header-right   { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.edition-badge  { background: var(--accent-solido); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.live-badge     { display: flex; align-items: center; gap: 6px; background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3); color: var(--accent3); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.live-dot       { width: 7px; height: 7px; background: var(--accent3); border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.event-select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-family: inherit;
  max-width: 340px;
  cursor: pointer;
}

/* ── Tab Nav ── */
.tab-nav { display: flex; padding: 0 max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2)); background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-btn {
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: inherit;
}
.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Sub-abas (decisao CG, 09/09/2026): segunda barra so quando o grupo ativo
   (ex.: "Marketing") tem mais de uma aba por baixo. Mesmo componente, menor,
   para nao competir visualmente com a barra principal. */
.sub-nav { border-bottom: 1px solid var(--border); }
.sub-nav .tab-btn { padding: 8px 22px; font-size: 12px; border-bottom-width: 2px; }

/* ── Filtro de intervalo de datas (decisao CS, 11/09/2026) ──
   Faixa propria entre a barra de sub-abas e o conteudo: o filtro vale para o
   GRUPO (as cinco sub-abas de Marketing), nao para um cartao, e por isso nao
   mora dentro de `#conteudo` -- ali seria remontado e perdido a cada troca de
   sub-aba. Nao entrou no `.header-right` junto dos seletores de evento e ano
   porque nao vale para todas as abas: ao lado deles pareceria global, e em
   Inscricoes nao apareceria, o que e' pior do que uma faixa que some junto com
   o conteudo a que pertence.

   Mesmo alinhamento lateral das barras de aba, e a mesma superficie/borda/raio
   do `.event-select` nos campos -- reuso, como os campos do admin ja fazem. */
.filtro-periodo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.filtro-rotulo {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filtro-campo { display: flex; align-items: center; gap: 6px; }
.filtro-campo-rotulo { color: var(--text-muted); }
/* `date` precisa de largura propria: o campo nativo nao encolhe bem e o
   `max-width` de 340px do `.event-select` nao ajuda aqui. */
.filtro-periodo input[type="date"] { padding: 5px 8px; font-size: 12px; max-width: 170px; }
.filtro-info { color: var(--text-muted); }
/* Mesma receita do `.kpi-hist-toggle` (o outro botao de "desligar um
   controle global" que a tela ja tem): fundo `--surface2`, nao transparente.
   Um fundo `none` sobre o `--surface` desta barra ficava quase invisivel no
   tema escuro -- a mesma revisao que achou o bug de `limitesDoPeriodo`. */
.filtro-limpar {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.filtro-limpar:hover { color: var(--text); background: var(--surface); }

/* No telefone o rotulo "PERIODO" sai de linha e os dois campos dividem a
   largura, em vez de a faixa rolar na horizontal. */
@media (max-width: 560px) {
  .filtro-periodo { gap: 8px; }
  .filtro-campo { flex: 1 1 130px; }
  .filtro-periodo input[type="date"] { max-width: none; width: 100%; }
  .filtro-info { flex-basis: 100%; }
}

/* ── Filtro de dropdown DENTRO da aba (decisoes DQ/DR, 23/09/2026) ──
   Diferente do `.filtro-periodo` acima, que mora FORA de `#conteudo` porque
   vale para o grupo inteiro de sub-abas: este recorta uma ou mais dimensoes
   (patrocinador, etapa) de uma aba so, e por isso e' desenhado dentro do
   proprio HTML que `_comum.js` monta -- some e volta junto com a aba, como
   qualquer outro cartao. Mesma superficie/borda/raio do `.event-select`,
   mesmo reuso. `.filtro-aba-campo` e' um campo (rotulo + select); `.filtro-
   aba` e' a faixa que os agrupa -- um so campo hoje vira dois com a decisao
   DR, e o wrap evita que o segundo saia da tela no celular. */
.filtro-aba {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 14px;
  font-size: 12px;
}
.filtro-aba-campo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filtro-aba label {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filtro-aba select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  max-width: 260px;
  cursor: pointer;
}

/* ── KPI Row ── */
.kpi-row {
  display: grid;
  /* 230px, e nao 160px. Medido na aba Marketing em 08/09/2026, com doze
     cartoes: a grade dava 194px a cada um, o valor de "Investido em anuncios"
     precisava de 191px numa caixa de 151px, e o `overflow:hidden` do `.kpi`
     CORTAVA o numero -- "R$ 20.932 ▲219" virava "R$ 20.932 ▲219," na tela.
     Cortar um numero silenciosamente e o pior caso deste projeto: nao levanta
     erro e o que sobra continua parecendo um numero inteiro.

     230px cobre o maior valor medido (191px) mais o respiro das laterais. Com
     mais cartoes do que cabem, a grade agora QUEBRA em duas linhas, que era o
     que `auto-fit` deveria ter feito desde o inicio e nao fazia porque o
     minimo era baixo demais para o conteudo real. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  padding: 24px max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2)) 0;
}
/* Cartoes compactos (decisao EG, aba Inscricoes): sete numa linha so.
   O minimo de 230px acima existe porque um numero foi CORTADO uma vez; aqui o
   cuidado e outro: o tamanho do valor acompanha a largura do PROPRIO cartao
   (`container-type` + `cqw`), entao "R$ 1.836.155,00" encolhe em vez de ser
   cortado -- nao cortar o numero continua sendo a regra. Abaixo de 1100px a
   linha quebra e os cartoes voltam ao tamanho normal. */
.kpi-row--compacto { gap: 10px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kpi-row--compacto .kpi { padding: 14px 12px; container-type: inline-size; }
.kpi-row--compacto .kpi-label { font-size: 10px; letter-spacing: .3px; }
.kpi-row--compacto .kpi-value { font-size: clamp(14px, 11cqw, 24px); margin: 4px 0 2px; }
.kpi-row--compacto .kpi-sub { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .kpi-row--compacto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .kpi-row--compacto .kpi-value { font-size: 22px; }
}
/* Chip "Filtrando: Recorrentes x" (decisao EJ): aparece no cartao do bloco filtrado
   pelo clique no grafico de recorrencia, e o clique nele desfaz o filtro. O `hidden`
   precisa de regra propria porque `display` do autor vence o do agente. */
.filtro-chip {
  font: inherit; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  color: var(--text-strong); background: var(--surface2);
  border: 1px solid var(--accent);
}
.filtro-chip:hover { background: var(--surface); }
.filtro-chip[hidden] { display: none; }

/* Botao global de recolher/exibir o comparativo entre edicoes (o `.kpi-hist`
   de cada card). Um so, acima da grade -- o pedido foi por um controle unico,
   nao um por card. */
.kpi-hist-toggle {
  display: block;
  margin: 20px max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2)) 0 auto;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.kpi-hist-toggle:hover { color: var(--text); background: var(--surface); }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kpi-color, var(--accent));
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
/* `flex-wrap` e o cinto de seguranca do minimo de 230px acima: se um valor
   ainda assim nao couber -- numero maior do que qualquer um medido, fonte
   maior por acessibilidade, idioma mais longo --, a variacao desce para a
   linha de baixo em vez de ser cortada. Largura e palpite; nao cortar o
   numero e regra. */
.kpi-value {
  font-size: 28px; font-weight: 700; color: var(--text-strong);
  margin: 6px 0 2px;
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.kpi-sub   { font-size: 12px; color: var(--text-muted); }
/* Variacao contra a edicao anterior. Cor neutra: a seta diz a direcao, que e
   fato; verde/vermelho diria se e bom ou ruim, que o painel nao sabe. */
.kpi-var {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 7px;
  white-space: nowrap;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}
/* Valor ausente: travessao apagado e a nota do payload. Nunca zero. */
.kpi.sem-dado .kpi-value { color: var(--text-muted); }

/* Historico de edicoes: eixo categorico, uma linha por edicao autorizada. */
.kpi-hist {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 5px;
}
/* `display:grid` acima tem a mesma especificidade do `[hidden]{display:none}`
   do agente, e o author sempre vence -- sem isto, `el.hidden = true` nao
   escondia nada. */
.kpi-hist[hidden] { display: none; }
.kpi-hist-item {
  display: grid;
  grid-template-columns: 3.2em 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.kpi-hist-barra {
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.kpi-hist-barra i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--kpi-color, var(--accent));
  opacity: .45;
}
.kpi-hist-valor { font-variant-numeric: tabular-nums; }
/* A edicao aberta e a referencia: destacada, as outras ficam de apoio. */
.kpi-hist-item.atual { color: var(--text); font-weight: 600; }
.kpi-hist-item.atual .kpi-hist-barra i { opacity: 1; }

/* ── Bloco Consolidado ── */
/* Piramide de especialidade comparando a edicao atual com a anterior
   (pedido de 16/09/2026, reformulado em 22/09/2026 -- decisao DP; ate entao
   era soma entre edicoes + cartoes por edicao, e este bloco reaproveitava
   `.kpi`/`.kpi-row`, que nenhum conteudo daqui usa mais). O `.card` interno
   e' o padrao de sempre -- so o wrapper `.consolidado-secao` e proprio, para
   se destacar como bloco separado em vez de se misturar com os KPIs da
   edicao selecionada. */
.consolidado-secao {
  margin: 24px max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2)) 0;
  padding: 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  display: grid;
  gap: 10px;
}
.consolidado-secao[hidden] { display: none; }
.consolidado-titulo {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
/* Toggle menor, do tamanho do `.card-header` -- reaproveitado do antigo
   controle Mes-Ano/Semana-Ano por edicao, agora para Todas/Pagas. */
.toggle-group-mini .toggle-btn { padding: 3px 10px; font-size: 11px; }

/* ── Main Grid ── */
/* `grid-template-columns: minmax(0, 1fr)` nao e decoracao -- sem ela, a UNICA
   coluna implicita deste grid nao herda a largura do container: ela e
   dimensionada pelo MAX-CONTENT do filho mais largo (achado em 18/09/2026,
   auditoria de responsividade). Com uma tabela de 9 colunas ou um grafico
   dentro de `.card > .chart-wrap`/`.tabela-wrap` (ambos `flex: 1 1 auto`), o
   max-content passava de 1400px -- e o grid CRESCIA ate esse tamanho e
   ultrapassava `.main`, que continuava com os 390px certos por fora. O
   resultado, medido: cartoes de KPI corretos (largura de bloco normal,
   preenchem o container), gráfico e tabela vazando ~1000px para a direita,
   sem rolagem nem erro nenhum -- so espaco em branco depois do que cabia na
   tela, porque o que vazava simplesmente nao aparecia no viewport.
   `minmax(0, 1fr)` for a a coluna a ocupar exatamente o espaco disponivel do
   CONTAINER, e `min-width:0` (o primeiro argumento) e o que permite ela ficar
   menor que o max-content dos filhos -- sem ele, `1fr` sozinho ainda respeita
   o `min-width:auto` implicito e o vazamento continuaria. Uma vez contida,
   `.tabela-wrap { overflow:auto }` (linha ~484) volta a fazer o que sempre
   devia: rolar a tabela DENTRO do proprio cartao, nao a pagina inteira. */
.main {
  padding: 24px max(var(--folga-lateral), calc((100% - var(--largura-max)) / 2)) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* ── Card ── */
/* Coluna flex, nao bloco: quando `.grid-2`/`.grid-3` esticam este cartao para
   o tamanho do vizinho mais alto, e' o CONTEUDO (`.chart-wrap`/`.tabela-wrap`/
   `.estado`, regra logo abaixo) que precisa crescer para preencher a
   diferenca -- sem isso o cartao ficaria do tamanho certo e o grafico pequeno
   continuaria pequeno, com um vao vazio embaixo dele. Fora de um grid
   esticado (cartao sozinho, largura cheia), a coluna nao tem sobra nenhuma
   para distribuir e o cartao continua do tamanho do proprio conteudo, como
   sempre foi. */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 22px 24px;
}
/* `1 1 auto`, e nao o atalho `flex: 1` (que zera o `flex-basis` para `0%`):
   a altura em pixel que `_comum.js` já calcula por item continua sendo o
   PISO de cada cartão -- cresce a partir dali, nunca encolhe abaixo do que o
   gráfico/tabela precisa para ficar legível. */
.card > .chart-wrap, .card > .tabela-wrap { flex: 1 1 auto; }
/* O estado vazio ("sem dado para este evento") ganha o mesmo tratamento, e
   centraliza o proprio texto na sobra em vez de deixá-lo colado no topo com
   uma faixa em branco embaixo. */
.card > .estado {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--icon-bg, rgba(79,142,247,.15));
}
.card-note { font-size: 12px; color: var(--text-muted); }

/* -- Tabela de distribuicao --
 *
 * Rola na horizontal dentro do proprio cartao, e nao na pagina: sete colunas
 * nao cabem em tela de celular, e uma pagina que rola de lado quebra a leitura
 * de tudo o que esta acima e abaixo.
 */
/* `overflow: auto` nos dois eixos: a rolagem horizontal ja existia (sete
   colunas nao cabem em tela de celular), e a vertical entra quando o bloco
   declara `altura_max` -- a tabela de negocios do CBU 2025 tem 180 linhas, e
   sem teto ela empurraria tudo o que vem depois para fora da tela. Sem
   `altura_max` nao ha `max-height`, e a tabela cresce como sempre cresceu. */
.tabela-wrap { overflow: auto; }
/* Cabecalho preso ao topo: numa tabela que rola 180 linhas dentro de si, sem
   isto a pessoa perde de vista o que cada coluna significa na terceira tela. */
.tabela-dist thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.link-externo {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.link-externo:hover { text-decoration: underline; }
/* O mesmo anel de foco do resto da interface: o link e alcancavel por teclado,
   e sem marca visivel quem navega por Tab nao sabe onde esta. */
.link-externo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.tabela-dist {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* Numeros alinhados coluna a coluna: sem isso "1.412" e "283" nao se
     comparam de relance, que e a unica razao de existir uma tabela aqui. */
  font-variant-numeric: tabular-nums;
}
.tabela-dist th, .tabela-dist td { padding: 9px 12px; white-space: nowrap; }
/* Cabecalho do nome da coluna quebra linha; o valor (numero) continua numa
   linha so, herdado da regra acima -- e' o que mantem "1.412" e "283"
   comparaveis coluna a coluna (ver comentario em `.tabela-dist`, acima).
   `max-width` e' o que faz a quebra acontecer de fato: sem um teto, o
   layout `auto` da tabela mede o rotulo inteiro sem quebrar antes de
   decidir a largura da coluna, e so entao aplica `white-space: normal` --
   tarde demais. Com o teto, a coluna se estreita e o texto quebra dentro
   dele; o numero da linha de baixo, que nao tem este limite, continua
   ditando a largura minima real da coluna. */
.tabela-dist thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: normal;
  max-width: 140px;
}
.tabela-dist .num { text-align: right; }
.tabela-dist tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  /* A categoria pode ser longa ("Outros profissionais da area da saude"): e a
     unica coluna que quebra linha, para nao empurrar os numeros para fora. */
  white-space: normal;
  min-width: 180px;
}
.tabela-dist tbody td { color: var(--text); }
.tabela-dist tbody tr + tr th,
.tabela-dist tbody tr + tr td { border-top: 1px solid var(--border); }
.tabela-dist tbody tr:hover th,
.tabela-dist tbody tr:hover td { background: var(--surface2); }
/* Ausencia de dado com o mesmo peso visual do travessao dos KPIs. */
.tabela-dist td.sem-dado { color: var(--text-muted); }
.tabela-dist tr.total th, .tabela-dist tr.total td {
  font-weight: 700;
  color: var(--text-strong);
  border-top: 2px solid var(--border);
}
/* A linha do evento sendo visto agora (pedido de 17/09/2026, "Comparação
   Entre Eventos") -- mesmo tom de fundo do hover, para nao inventar cor
   nova, mais uma faixa na borda esquerda (a mesma cor de destaque que ja
   marca o topo de cada KPI) para continuar visivel sem o mouse em cima. */
.tabela-dist tr.atual th, .tabela-dist tr.atual td {
  background: var(--surface2);
  font-weight: 600;
}
.tabela-dist tr.atual th { box-shadow: inset 3px 0 0 var(--accent); }

/* -- Kanban do pipeline de patrocinios (decisao DK, 17/09/2026) --
 *
 * Uma coluna por etapa, um cartao por negocio. Divide o `.tabela-wrap` com a
 * tabela de distribuicao -- os dois rolam na horizontal dentro do proprio
 * cartao, e nao na pagina, pela mesma razao: oito colunas nao cabem em tela de
 * celular, e uma pagina que rola de lado quebra a leitura de tudo o que esta
 * acima e abaixo.
 */
.kanban {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  /* `min-content` para as colunas NAO encolherem ate caber: uma coluna de 90px
     corta o nome do patrocinador, que e a unica coisa que este bloco existe
     para mostrar. Elas mantem a largura e o `.tabela-wrap` rola. */
  min-width: min-content;
  padding-bottom: 4px;
}
/* Cresce quando ha poucas etapas, nunca encolhe abaixo do legivel.
   `1 0 210px` com teto de 320px: o CBU 2025 tem duas colunas e elas ocupam a
   largura do cartao em vez de deixarem dois tercos de vao a direita; um evento
   com as oito etapas volta a 210px cada e o `.tabela-wrap` rola, que e o
   comportamento que a largura cheia existe para permitir. */
.kanban-col {
  flex: 1 0 210px;
  max-width: 320px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.kanban-col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.kanban-col-nome {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-strong);
}
/* A contagem e o valor da etapa -- as MESMAS duas metricas que a barra
   "Situacao das negociacoes" desenha logo acima. Ficam no cabecalho de
   proposito: os dois blocos recortam "Perdido" de formas diferentes (decisoes
   AU e DK), e poder conferir um contra o outro de relance e o que impede a
   diferenca de passar por erro. */
.kanban-col-resumo {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Coluna alta rola dentro de si, e nao estica o cartao: sao 111 negocios numa
   unica etapa do CBU 2025, e um cartao de 4.000px de altura empurraria todo o
   resto da aba para fora da tela. */
.kanban-col-corpo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.kanban-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 8px 10px;
}
.kanban-card-nome {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  /* O nome QUEBRA em vez de ser cortado por reticencias: "FUNDACAO ANTONIO
     PRUDENTE" abreviado nao identifica ninguem, e identificar e o pedido. */
  overflow-wrap: anywhere;
}
.kanban-card-valor {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
/* Ausencia de valor com o mesmo peso do travessao dos KPIs e da tabela. */
.kanban-card-valor .sem-dado { color: var(--text-muted); font-weight: 500; }
.kanban-card-cota {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Toggle ── */
.toggle-group {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.toggle-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.toggle-btn:hover { color: var(--text); }
.toggle-btn.active { background: var(--accent-solido); color: #fff; }

/* ── Alternador de tema ── */
.tema-btn {
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.tema-btn:hover { color: var(--text); background: var(--surface); }

/* ── Chart wrapper ── */
.chart-wrap { position: relative; }
.chart-wrap canvas { max-width: 100%; }

/* ── Grids ── */
/* Ate 11/09/2026 estes dois usavam `align-items: start`, porque o padrao e
   `stretch`: um cartao de 3 barras ao lado de um de 13 esticava para 472px e
   ficava com ~290px vazios embaixo do grafico pequeno. Pedido do usuario:
   os dois cartoes de uma linha devem ter o MESMO tamanho -- o padrao
   `stretch` volta a valer, e quem absorve a diferenca agora e o CONTEUDO de
   cada cartao (`.chart-wrap`/`.estado`, ver abaixo), nao o cartao inteiro. */
/* `minmax(0, ...)` em vez de `1fr` sozinho, mesma razao do `.main` acima
   (18/09/2026): o comentario logo em cima destas duas linhas ja dizia que um
   destes cartoes pode ser `.chart-wrap`/`.tabela-wrap` -- e um `1fr` sozinho
   ainda tem minimo automatico igual ao max-content do conteudo, entao a
   coluna com o grafico/tabela cresce e estica a outra, ou vaza as duas para
   fora do `.grid-2`/`.grid-3`. So nao apareceu ainda porque nenhum par desta
   aba tinha um lado largo o bastante para revelar -- nao porque estes dois
   estivessem imunes. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

@media(max-width:900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .kpi-row         { padding: 20px 16px 0; }
  .kpi-hist-toggle { margin: 16px 16px 0 auto; }
  .main            { padding: 16px 16px 40px; }
  .header          { padding: 16px; }
  .tab-nav         { padding-left: 16px; padding-right: 16px; }
}

/* ── Estados ── */
.estado { text-align: center; padding: 40px 20px; }
.estado h2 { font-size: 16px; color: var(--text-strong); margin-bottom: 8px; }
.estado p  { font-size: 13px; color: var(--text-muted); max-width: 46ch; margin: 0 auto; }
.estado button {
  margin-top: 16px; padding: 9px 18px; font-size: 13px; font-weight: 600;
  font-family: inherit; background: var(--accent-solido); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
}

.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: slide 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes slide { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Login ─────────────────────────────────────────────────────────────────
   Mesma linguagem do painel, e nao uma tela avulsa: fundo com o gradiente do
   header, cartao com a mesma superficie, borda, raio e faixa de acento no topo
   que os KPIs tem. Nenhuma cor nova -- so os tokens que os graficos e os
   cartoes ja usam, entao o tema escolhido pelo usuario vale aqui igual. */
.login-body {
  /* `grid` + `place-items: center` centraliza nos DOIS eixos. `min-height:
     100dvh` e nao `100vh`: no celular a barra de endereco entra na conta do
     `vh` e a caixa nasce deslocada para baixo. */
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  /* Gradiente do header MAIS um halo do acento. No tema claro os dois tons do
     header sao quase brancos, e o fundo ficava chapado -- o halo da presenca
     sem inventar cor: sai do `--accent`, que ja existe e ja acompanha o tema. */
  background:
    radial-gradient(60% 50% at 50% 32%,
                    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
                    transparent 100%),
    linear-gradient(135deg, var(--header-de) 0%, var(--header-para) 100%);
}

.login-caixa {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  /* O painel nao usa sombra em cartao -- lá eles ficam sobre `--bg` e a borda
     basta. Aqui o cartao flutua sobre um fundo com gradiente, e sem sombra ele
     parecia colado. Sombra neutra e discreta, nao um efeito. */
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
/* A mesma faixa de 3px dos KPIs. E o detalhe que faz a tela pertencer ao
   produto em vez de parecer um formulario generico. */
.login-caixa::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.login-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
}
.login-marca-selo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  /* A marca e um SVG com `fill: currentColor`, entao a cor vem daqui e segue o
     tema -- ao contrario de um emoji, que ignora a cor e muda de desenho em
     cada sistema. */
  color: var(--accent);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.login-marca-selo svg { display: block; }
/* `.login-titulo` e o nome do PRODUTO, nao de um evento -- ao contrario do <h1>
   do painel. Por isso o tamanho e o do titulo do header, e nao maior. */
.login-titulo { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-strong);
                line-height: 1.2; }
.login-sub    { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

.login-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
  /* Mesmo tratamento do `.kpi-label`: e rotulo de campo, mesma familia visual
     dos rotulos de metrica. */
  text-transform: uppercase;
  letter-spacing: .5px;
}

.login-campo {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  /* Mesma superficie, borda e raio do `.event-select` -- os dois sao campos de
     entrada do mesmo produto. */
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.login-campo::placeholder { color: var(--text-muted); }

.login-botao {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  /* `--accent-solido`, nao `--accent`: aqui a cor e fundo com texto branco em
     cima, e e o papel para o qual ela foi escolhida (ver o comentario do tema).
     E o mesmo tratamento do `.edition-badge`. */
  background: var(--accent-solido);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .2s;
}
.login-botao:hover:not(:disabled) { opacity: .9; }
.login-botao:disabled { opacity: .55; cursor: progress; }

.login-link {
  display: block;
  margin: 14px auto 0;
  padding: 4px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.login-link:hover:not(:disabled) { color: var(--text); }
.login-link:disabled { opacity: .55; cursor: progress; }

/* Erro e aviso dividem a caixa e diferem na cor. `--serie-6` e o vermelho
   validado para contraste nos dois temas; `--accent5` e cromo de interface e
   nao passou por essa checagem. */
.login-erro {
  margin: 0 0 14px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--serie-6);
  background: color-mix(in srgb, var(--serie-6) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--serie-6) 30%, transparent);
  border-radius: 8px;
}
.login-erro.login-aviso {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--border);
}

/* O seletor de tema vive no header no painel; aqui nao ha header, e ele fica no
   canto. Reaproveita `.tema-btn`, so posicionando. */
.login-tema { position: fixed; top: 18px; right: 18px; }

/* ════════════════════════════ ADMINISTRAÇÃO ════════════════════════════
   Sem paleta própria: tudo abaixo usa as variáveis já definidas no topo, para
   que a tela siga os dois temas sem uma segunda lista de cores para manter. */

.admin-voltar {
  width: auto; padding: 0 12px; font-size: 13px; text-decoration: none;
  display: inline-flex; align-items: center;
}

.admin-tabela-rolagem { overflow-x: auto; }
.admin-tabela {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.admin-tabela th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.admin-tabela td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.admin-tabela tr:last-child td { border-bottom: none; }
.admin-tabela strong { color: var(--text-strong); font-weight: 600; display: block; }

/* O identificador técnico embaixo do nome: quem administra precisa dele para
   conferir, mas ele não pode competir com o nome. */
.admin-chave { font-size: 11px; color: var(--text-muted); font-family: monospace; }

.admin-inativo td { opacity: .55; }

.admin-papel {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600; background: var(--surface2);
  color: var(--text-muted); border: 1px solid var(--border);
}
.admin-papel.papel-admin   { background: rgba(239,68,68,.15);  color: var(--accent5);
                             border-color: rgba(239,68,68,.35); }
.admin-papel.papel-interno { background: rgba(124,58,237,.15); color: var(--accent2);
                             border-color: rgba(124,58,237,.35); }

.admin-campo-num {
  width: 72px; padding: 6px 8px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-size: 13px; font-variant-numeric: tabular-nums;
}

/* Aviso ao lado do campo de ordem, quando o numero digitado ja e usado por
   outra aba. Mesma cor de `.admin-aviso` -- e o mesmo tipo de alerta, so que
   preso ao campo em vez de preso ao topo da secao. */
.admin-erro-campo {
  display: block; margin-top: 4px; font-size: 12px; color: var(--accent5);
}

.admin-checkbox {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.admin-checkbox input { accent-color: var(--accent-solido); cursor: pointer; }

/* Interruptor ON/OFF, para as duas chaves booleanas de administracao: "ativa"
   no catalogo de abas e "visivel" no seletor de grupos. As duas sao a mesma
   ideia -- liga/desliga algo para todo mundo -- e usam o mesmo desenho para
   nao parecer dois controles diferentes na mesma tela.

   Checkbox nativo escondido, e nao removido: o teclado e o leitor de tela
   continuam falando com um <input type="checkbox"> de verdade. O trilho e a
   bolinha sao SIBLINGS dele, e `:checked + .admin-switch-trilho` e o que move
   a bolinha -- por isso a ordem no HTML importa (input, depois o trilho). */
.admin-switch {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.admin-switch input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;
}
.admin-switch-trilho {
  position: relative; flex: none;
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--border);
  transition: background .15s ease;
}
.admin-switch-trilho::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.admin-switch input:checked + .admin-switch-trilho { background: var(--accent-solido); }
.admin-switch input:checked + .admin-switch-trilho::after {
  transform: translateX(16px);
  background: #fff;
}
.admin-switch input:focus-visible + .admin-switch-trilho {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.admin-switch input:disabled + .admin-switch-trilho { opacity: .5; }
.admin-switch:has(input:disabled) { cursor: default; }

.admin-aviso {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
  color: var(--accent5);
}
.admin-aviso.admin-ok {
  background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3);
  color: var(--accent3);
}

.admin-editor {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; margin: 8px 0 16px;
}
.admin-linha { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.admin-linha label { display: flex; flex-direction: column; gap: 4px; }
.admin-linha .login-campo { margin: 0; width: 220px; }
.admin-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.admin-acessos { display: grid; gap: 10px; margin-bottom: 4px; }
.admin-lista-acessos { display: grid; gap: 8px; }
.admin-acesso {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.admin-acesso-topo {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.admin-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-adicionar { display: flex; gap: 8px; align-items: center; }
.admin-remover {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px;
}
.admin-remover:hover { color: var(--accent5); }

/* ──────────────── confirmação (tarefa 6.7) ────────────────
   Fundo escurecido de propósito: a pergunta interrompe. É a única ação do
   sistema que muda o que gente de fora enxerga, e ela não deve poder ser
   respondida de passagem. */
.dialogo-fundo {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.dialogo-fundo[hidden] { display: none; }
.dialogo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px; max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.dialogo-titulo {
  margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--text-strong);
}
.dialogo-texto {
  margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.dialogo-acoes { display: flex; gap: 10px; justify-content: flex-end; }

.botao-neutro, .botao-perigo {
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border);
}
.botao-neutro { background: var(--surface2); color: var(--text); }
.botao-neutro:hover { color: var(--text-strong); }
/* Vermelho no confirmar, e não no cancelar: a cor de alerta pertence à ação
   que tem consequência, não à que desfaz. */
.botao-perigo {
  background: var(--accent5); border-color: var(--accent5); color: #fff;
}
.botao-perigo:hover { opacity: .9; }

@media (max-width: 720px) {
  .admin-linha .login-campo { width: 100%; }
  .admin-linha label { width: 100%; }
}