/* ============================================================================
   PAINEL AmendoIA — folha de estilo única.

   POR QUE ARQUIVO EXTERNO, e não <style> embutido como era até 11/08/2026: a
   política de segurança do painel é `default-src 'none'`, e o estilo só passava
   porque havia `style-src 'unsafe-inline'`. Servindo daqui, o `unsafe-inline`
   pode cair — e some o vetor de injeção de estilo na tela de quem enxerga a
   base inteira de produtores.

   NADA DE CDN. Fonte, ícone e cor são locais. Bootstrap ou Tailwind por link
   simplesmente não carregariam sob esta CSP — e afrouxá-la para "ficar bonito"
   abriria exatamente a porta que ela existe para fechar.
   ============================================================================ */

:root{
  /* Marca — extraída da logo */
  --marca-navy:#002040; --marca-ouro:#e09000;
  /* Tema escuro refinado (a logo é branca/transparente — escuro é decisão) */
  --fundo:#0b1420; --superficie:#121e2e; --superficie-2:#18283c;
  --borda:#22344c; --borda-forte:#31496b;
  --campo-borda:#456a9b;   /* só o contorno de campo de formulário — ver a regra do input */
  --texto:#e8edf4; --texto-2:#9fb0c3;
  /* --texto-3 subiu de #64778e para #74869d em 18/08: o valor antigo dava 3,65:1 sobre
     o cartão e 4,03:1 sobre o fundo — os dois abaixo do 4,5:1 que a WCAG pede para
     texto pequeno. E ele é o rótulo de TODO KPI, toda data e todo "nunca" da tela.
     O novo dá 4,51:1 e 4,97:1. Calculado, não escolhido: é o mínimo que passa. */
  --texto-3:#74869d;
  --acento:#3d8bfd; --ouro:#e09000;
  /* O QUE SE ESCREVE EM CIMA DO ACENTO (rótulo de botão). Era branco, e branco sobre
     este azul dá 3,33:1 — reprova o 4,5:1 de texto pequeno, e o alvo é o rótulo de
     TODO botão principal do painel ("filtrar", "Entrar", "Disparar"). Escurecer o
     azul não servia: ele também é a cor dos LINKS, e escurecê-lo derrubaria o
     contraste deles sobre o fundo. Quem muda é o texto: quase-preto dá 5,56:1. */
  --sobre-acento:#0b1420;
  --ok:#2fbf71; --alerta:#e5a50a;
  /* --erro de #e5484d para #e65156: 4,29:1 sobre o cartão, faltavam 0,21. A cor do erro
     é a última que pode ser difícil de ler. */
  --erro:#e65156;
  /* Tipografia — escala de 5 tamanhos, nada fora dela */
  --f-xs:12px; --f-sm:13px; --f-md:14px; --f-lg:18px; --f-xl:28px;
  /* Espaço — múltiplos de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --raio:10px; --raio-sm:6px;
  --sombra:0 1px 2px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

html{color-scheme:dark}

body{
  margin:0; background:var(--fundo); color:var(--texto);
  /* Stack de sistema: zero requisição, zero CDN, e já é a fonte que o dono
     enxerga como "nativa" no aparelho dele. */
  font:var(--f-md)/1.55 -apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--acento);text-decoration:none}
a:hover{text-decoration:underline}

/* REGRA DE OURO (a): número é sempre tabular e alinhado à direita. Sem isto a
   coluna de custo "dança" a cada linha e a leitura vertical se perde. */
.num,td.num,th.num{font-variant-numeric:tabular-nums;text-align:right}

h1{font-size:var(--f-lg);line-height:1.3;letter-spacing:-.01em;margin:0 0 var(--e1);font-weight:650}
h2{font-size:var(--f-md);letter-spacing:.02em;text-transform:uppercase;color:var(--texto-3);
   font-weight:650;margin:var(--e6) 0 var(--e3)}
.sub{color:var(--texto-2);font-size:var(--f-sm);margin-bottom:var(--e5)}

/* ============================== SHELL ============================== */

.topo{
  height:56px; display:flex; align-items:center; gap:var(--e5);
  padding:0 var(--e5); background:var(--superficie);
  border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:10;
}
.topo .logo{display:flex;align-items:center;gap:var(--e2);flex:0 0 auto}
.topo .logo img{height:26px;width:auto;display:block}
.topo .logo b{font-size:var(--f-md);letter-spacing:-.01em}
.topo nav{display:flex;gap:var(--e1);flex:1 1 auto;overflow-x:auto;
  scrollbar-width:none}
.topo nav::-webkit-scrollbar{display:none}
.topo nav a{
  padding:0 var(--e3); height:56px; display:inline-flex; align-items:center;
  color:var(--texto-2); font-size:var(--f-sm); font-weight:500;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.topo nav a:hover{color:var(--texto);text-decoration:none}
/* Item ativo: texto claro + sublinhado dourado. É o único dourado do shell. */
.topo nav a[aria-current="page"]{color:var(--texto);border-bottom-color:var(--ouro);font-weight:650}
.topo .dir{flex:0 0 auto;color:var(--texto-3);font-size:var(--f-xs);
  display:flex;align-items:center;gap:var(--e3)}
.topo .bot{white-space:nowrap}
.topo .bot b{color:var(--texto-2);font-weight:600}

.wrap{max-width:1180px;margin:0 auto;padding:var(--e5) var(--e5) var(--e6)}

.rodape{
  max-width:1180px;margin:0 auto;padding:var(--e5);
  border-top:1px solid var(--borda); color:var(--texto-3); font-size:var(--f-xs);
  display:flex; gap:var(--e3); flex-wrap:wrap; align-items:center;
}

/* ============================== KPI ============================== */

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.kpi{background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--raio);padding:var(--e4);box-shadow:var(--sombra)}
.kpi .rot{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-3);font-weight:600}
.kpi .val{font-size:var(--f-xl);font-weight:660;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;margin-top:var(--e1)}
/* `.ctx` GENÉRICA. Nasceu presa ao KPI (`.kpi .ctx`) e eu a usei dentro do cartão do
   gráfico, onde ela não pegava nada — texto de contexto saindo do tamanho do corpo, sem
   erro nenhum para denunciar. Classe de uso geral tem de valer em qualquer lugar. */
.ctx{font-size:var(--f-xs);color:var(--texto-2);margin-top:var(--e1)}
/* REGRA DE OURO (b): UM dourado por tela — o dado mais importante. */
.kpi.destaque .val{color:var(--ouro)}
.kpi.destaque{border-color:var(--borda-forte)}

/* ============================== CARTÃO ============================== */

.cartao{background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--raio);padding:var(--e4);box-shadow:var(--sombra);
  margin-bottom:var(--e5)}
.cartao .rot{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-3);font-weight:600;margin-bottom:var(--e3)}

/* ============================== TABELA ============================== */

.tblwrap{overflow-x:auto;background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--raio);box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;font-size:var(--f-sm)}
th,td{text-align:left;padding:var(--e3) var(--e4);white-space:nowrap}
th{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto-3);font-weight:600;background:var(--superficie-2);
  border-bottom:1px solid var(--borda);position:sticky;top:0}
th a{color:inherit}
td{border-bottom:1px solid var(--borda);color:var(--texto)}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
tbody tr:hover td{background:var(--superficie-2)}
tr:last-child td{border-bottom:0}
/* Ausência é ausência: "—" e "nunca" não competem com dado real. */
td .vazio{color:var(--texto-3)}
td .anon{color:var(--texto-3);font-style:italic}
code{font:var(--f-xs) ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--texto-2)}

/* ============================== ETIQUETAS ============================== */

.tag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px var(--e2);
  border-radius:99px;display:inline-block;vertical-align:middle;text-transform:uppercase}
.tag.premium{border:1px solid var(--ouro);color:var(--ouro);background:transparent}
.tag.aberto{border:1px solid var(--borda-forte);color:var(--texto-3);background:transparent}

/* ============================== AVISOS ============================== */
/* REGRA DE OURO (c): cor semântica SÓ para semântica, nunca decoração. */

.alerta{border-radius:var(--raio);padding:var(--e3) var(--e4);font-size:var(--f-sm);
  margin-bottom:var(--e4);border:1px solid;background:var(--superficie)}
.alerta.info{border-color:var(--borda-forte);color:var(--texto-2)}
.alerta.ok{border-color:var(--ok);color:var(--ok)}
.alerta.aviso{border-color:var(--alerta);color:var(--alerta)}
.alerta.erro{border-color:var(--erro);color:var(--erro)}
.alerta b{color:var(--texto)}

/* pílula de status (estado da API da Meta, etc.) */
.pilula{display:inline-flex;align-items:center;gap:var(--e2);font-size:var(--f-xs);
  font-weight:600;padding:var(--e1) var(--e3);border-radius:99px;border:1px solid}
.pilula.ok{border-color:var(--ok);color:var(--ok)}
.pilula.aviso{border-color:var(--alerta);color:var(--alerta)}
.pilula.erro{border-color:var(--erro);color:var(--erro)}

/* ============================== FORMULÁRIOS ============================== */

label{display:block;font-size:var(--f-xs);margin:var(--e3) 0 var(--e1);
  color:var(--texto-2);font-weight:500}
/* A BORDA AQUI É MAIS FORTE QUE A DOS CARTÕES, de propósito: o cartão se distingue pelo
   fundo, mas um campo de formulário só é reconhecível como campo pelo contorno — e a
   WCAG 1.4.11 pede 3:1 para ele. `--borda` dá 1,3:1 sobre o cartão; `--campo-borda`
   dá 3,03:1. Não toquei nas bordas decorativas: elas não precisam, e clareá-las mudaria
   o visual inteiro. */
input,select,textarea{width:100%;padding:var(--e2) var(--e3);border:1px solid var(--campo-borda);
  border-radius:var(--raio-sm);font-size:var(--f-md);background:var(--fundo);
  color:var(--texto);font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px;
  border-color:transparent}
button{width:100%;margin-top:var(--e4);padding:var(--e3);border:0;border-radius:var(--raio-sm);
  background:var(--acento);color:var(--sobre-acento);font-size:var(--f-md);font-weight:600;cursor:pointer;
  font-family:inherit}
button:hover{filter:brightness(1.1)}

/* barra de filtro: mesmo <form>, outra postura */
form.filtro{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e3);margin-bottom:var(--e4)}
form.filtro input,form.filtro select{width:auto;padding:var(--e1) var(--e2);font-size:var(--f-sm)}
form.filtro input.busca{min-width:220px}
form.filtro button{width:auto;margin:0;padding:var(--e1) var(--e4);font-size:var(--f-sm)}
form.filtro label{margin:0;font-size:var(--f-xs)}
form.filtro .empurra{margin-left:auto}

/* chip do filtro ativo */
.chips{display:flex;gap:var(--e2);align-items:center;flex-wrap:wrap;margin-bottom:var(--e4);
  font-size:var(--f-xs);color:var(--texto-2)}
.chip{border:1px solid var(--borda-forte);border-radius:99px;padding:2px var(--e3);
  color:var(--texto-2)}

/* ============================== BOTÕES DE LINHA ============================== */

.btn{display:inline-block;padding:var(--e1) var(--e3);border-radius:var(--raio-sm);
  background:var(--acento);color:var(--sobre-acento);font-size:var(--f-xs);font-weight:600;line-height:1.5;
  width:auto;margin:0}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn.sec{background:transparent;border:1px solid var(--borda-forte);color:var(--texto-2)}
.btn.sec:hover{background:var(--superficie-2);color:var(--texto)}

/* ============================== LOGIN ============================== */

.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--e5)}
.login form{width:100%;max-width:380px;background:var(--superficie);
  border:1px solid var(--borda);border-radius:14px;padding:var(--e6) var(--e5);
  box-shadow:0 8px 32px rgba(0,0,0,.4);margin:0}
.login .marca{text-align:center;margin-bottom:var(--e5)}
.login .marca img{height:44px;width:auto;display:inline-block}
.login .marca .nome{font-size:var(--f-sm);color:var(--texto-2);margin-top:var(--e2)}
.login .pe{margin-top:var(--e5);text-align:center;font-size:var(--f-xs);color:var(--texto-3)}

/* ============================== ESTADO VAZIO ============================== */

.vazio{text-align:center;padding:var(--e6) var(--e5);color:var(--texto-3)}
.vazio svg{opacity:.4;margin-bottom:var(--e3)}
.vazio .frase{font-size:var(--f-sm);color:var(--texto-2)}
.vazio .acao{font-size:var(--f-xs);margin-top:var(--e2)}

/* ============================== GRÁFICO ============================== */

.gr{width:100%;height:auto;display:block}
.gr .grade{stroke:var(--borda);stroke-width:1}
.gr .eixo{fill:var(--texto-3);font-size:10px}
.gr .barra{fill:var(--acento)}
.gr .barra-vazia{fill:var(--borda)}
.gr .valor{fill:var(--texto-2);font-size:9px;text-anchor:middle}

/* ============================== ACESSIBILIDADE ============================== */

:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ============================== CELULAR ============================== */
/* O dono abre o painel no telefone, no meio da lavoura. */

@media(max-width:720px){
  .topo{padding:0 var(--e3);gap:var(--e3)}
  .topo .logo b{display:none}
  .topo .dir{font-size:11px}
  .wrap{padding:var(--e4) var(--e3) var(--e5)}
  .kpis{grid-template-columns:repeat(2,1fr);gap:var(--e2)}
  .kpi{padding:var(--e3)}
  .kpi .val{font-size:22px}
  th,td{padding:var(--e2) var(--e3)}
}


/* ============================================================================
   FASE 2 — as classes das paginas migradas.

   Vem de sete blocos escritos em paralelo, um por pagina, e RECONCILIADOS aqui:
   duas paginas tinham inventado nomes diferentes (`.barra-prop` e `.prop`) e
   escalas diferentes (`w-05` e `p5`) para desenhar o MESMO widget. Ficou uma de
   cada — duas convencoes para a mesma coisa no mesmo arquivo e o comeco de uma
   terceira.

   Estas classes existem para NAO haver `style="..."` inline: e o que permite a
   CSP largar o 'unsafe-inline' no fim desta fase.
   ============================================================================ */

/* ===== de custos.html ===== */
/* ============================== CUSTOS ==============================
   Bloco novo da página /custos. Nada aqui usa JavaScript e nada aqui existe para permitir
   `style="..."` — é o contrário: existe para TIRAR os 8 style inline que a página tinha. */

/* Seletor de período. É UM filtro só, então são links (cada recorte vira URL favoritável),
   não formulário. Substitui o `style=font-weight:700` que marcava o período ativo. */
.periodos{display:flex;gap:var(--e1);flex-wrap:wrap;align-items:center;width:max-content;
  max-width:100%;background:var(--superficie);border:1px solid var(--borda);
  border-radius:99px;padding:var(--e1);margin-bottom:var(--e5)}
.periodos b{padding:0 var(--e2);font-size:var(--f-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto-3)}
.periodos a{padding:var(--e1) var(--e3);border-radius:99px;font-size:var(--f-xs);
  font-weight:600;color:var(--texto-2)}
.periodos a:hover{background:var(--superficie-2);color:var(--texto);text-decoration:none}
.periodos a[aria-current="true"]{background:var(--superficie-2);color:var(--texto)}

/* ETIQUETA DE MOEDA. Custos é US$ (API Anthropic), Gestão é R$ (negócio). Sem dizer isso na
   cara, "4,88" numa aba e "33,72" na outra parecem contradição quando são conversão. */
.moeda{display:inline-block;font-size:var(--f-xs);font-weight:700;letter-spacing:.03em;
  padding:1px var(--e2);border-radius:var(--raio-sm);border:1px solid var(--borda-forte);
  color:var(--texto-2);white-space:nowrap}

/* Ícone inline (SVG escrito à mão — nada de CDN), alinhado à linha de texto do aviso. */
.ico{vertical-align:-3px;margin-right:var(--e1)}

/* O número que decide, DENTRO de um .alerta: grande e tabular, sem virar um KPI concorrente
   (o dourado da tela continua sendo um só, o do cartão de projeção). */
.num-forte{font-size:var(--f-lg);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;color:var(--texto);margin-top:var(--e2)}

/* Legenda curta logo abaixo de um <h2> de seção — o h2 já deu o respiro de cima, então ela
   sobe um pouco para ficar colada no título a que pertence. */
.sub-secao{margin:calc(-1 * var(--e2)) 0 var(--e3);color:var(--texto-2);font-size:var(--f-sm)}

/* ---- BARRA DE PROPORÇÃO DENTRO DA LINHA DA TABELA ----
   ⚠️ O nome é `.barra-prop`, NÃO `.barra`: `.barra` já é a barra do gráfico (`.gr .barra`), e
   uma regra `.barra{height:8px}` pegaria também os <rect> do SVG — navegador moderno aplica
   `height`/`width` de CSS em elemento SVG, e o gráfico quebraria calado.
   A LARGURA vem do servidor como CLASSE DE FAIXA (de 5 em 5) porque `style="..."` é o que a
   CSP vai proibir e não existe JavaScript aqui para calcular nada. Por isso a lista é literal. */
.cel-barra{width:34%;min-width:110px}
.barra-prop{height:8px;border-radius:99px;background:var(--fundo);
  border:1px solid var(--borda);overflow:hidden}
.barra-prop span{display:block;height:100%;background:var(--acento);border-radius:99px}
/* 0% ainda ganha um fio: aquela origem EXISTIU no período. Mesma regra da barra fantasma do
   gráfico — buraco lê-se como "o painel não sabe", quando o que houve foi "quase nada". */
.w-00{width:2px}
.w-05{width:5%}    .w-10{width:10%}   .w-15{width:15%}   .w-20{width:20%}
.w-25{width:25%}   .w-30{width:30%}   .w-35{width:35%}   .w-40{width:40%}
.w-45{width:45%}   .w-50{width:50%}   .w-55{width:55%}   .w-60{width:60%}
.w-65{width:65%}   .w-70{width:70%}   .w-75{width:75%}   .w-80{width:80%}
.w-85{width:85%}   .w-90{width:90%}   .w-95{width:95%}   .w-100{width:100%}

/* ---- MARCO no gráfico de barras (data de troca de modelo) ----
   Usadas pelo SVG que `_grafico_barras` monta, não diretamente pelo template. */
.gr .marco{stroke:var(--texto-3);stroke-width:1;stroke-dasharray:3 3}
.gr .marco-rot{fill:var(--texto-3);font-size:9px}

@media(max-width:720px){
  .cel-barra{width:26%;min-width:70px}
  .periodos{width:100%}
}

/* ===== de gestao.html ===== */
/* ============================== GESTÃO ==============================
   A EQUAÇÃO DO CUSTO. Cinco números que são a MESMA conta vista de ângulos
   diferentes — como cartões iguais e soltos, pareciam cinco fatos distintos que
   por acaso batiam. Ligados por sinais, a repetição vira explicação.

   Os cartões são os `.kpi` de sempre (mesmo componente da tela de Produtores);
   a `.equacao` só os arruma em linha com os sinais no meio. O dourado do último
   já vem de `.kpi.destaque` — REGRA DE OURO (b), um por tela. */

.equacao{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--e2);margin-bottom:var(--e3)}
.equacao .kpi{flex:1 1 165px}
.eq-sinal{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--texto-3);font-size:var(--f-lg);font-weight:650;padding:0 var(--e1)}
.eq-sinal svg{display:block}

/* "O MODELO FECHA?" — o melhor conteúdo do painel, com o melhor lugar da tela. */
.modelo p{margin:0 0 var(--e3);font-size:var(--f-sm);color:var(--texto-2)}
.modelo p b{color:var(--texto)}
.modelo .premissa{margin-bottom:0}
.modelo-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);
  margin:var(--e4) 0;padding:var(--e4) 0;border-top:1px solid var(--borda);
  border-bottom:1px solid var(--borda)}
.modelo-n .n{font-size:var(--f-xl);font-weight:660;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.modelo-n .l{font-size:var(--f-xs);color:var(--texto-2);margin-top:var(--e2);line-height:1.45}
/* Vermelho SÓ quando a sobra é negativa (o custo comeu a margem) — cor semântica
   para semântica, nunca decoração. Sobra positiva fica neutra. */
.modelo-n.ruim .n{color:var(--erro)}
/* parâmetro que ninguém escolheu ainda: o número existe, mas não é decisão */
.sugerido{font-size:var(--f-xs);color:var(--alerta);font-weight:600;white-space:nowrap}
/* simulador dentro do cartão: um degrau acima da superfície, senão some no fundo */
form.filtro.sim{background:var(--superficie-2);margin:var(--e4) 0 var(--e2)}

/* linha da tabela de escala mais próxima da base de hoje */
tr.linha-atual td{background:var(--superficie-2);box-shadow:inset 3px 0 0 var(--acento)}
tr.linha-atual td:first-child{font-weight:650}
/* despesa desativada: continua no histórico, riscada */
tr.riscada td{opacity:.45;text-decoration:line-through}

/* Botão de ação DENTRO de uma célula. O `all:unset` nasceu para desfazer o cartão de login
   que a ponte impunha a todo <form>; a ponte saiu, mas ele fica — é o que impede a margem
   padrão do <form> de empurrar a linha da tabela. */
form.acao-inline{all:unset;display:inline}
form.acao-inline button{width:auto;margin:0;padding:var(--e1) var(--e3);
  font-size:var(--f-xs);font-weight:600;line-height:1.5;border-radius:var(--raio-sm);
  background:transparent;border:1px solid var(--borda-forte);color:var(--texto-2);
  cursor:pointer;font-family:inherit}
form.acao-inline button:hover{background:var(--superficie-2);color:var(--texto);filter:none}

/* larguras de campo dentro de `form.filtro` (onde `input{width:auto}`) — existem
   para que nenhum template precise de `style="width:…"` */
.campo-xg{min-width:230px;flex:1 1 230px}
.campo-g{width:140px}
.campo-m{width:110px}
.campo-p{width:90px}

@media(max-width:720px){
  /* empilhada, a equação passa a ser lida de cima para baixo — a seta acompanha */
  .equacao .kpi{flex:1 1 100%}
  .eq-sinal{flex:1 1 100%;padding:0}
  .eq-sinal svg{transform:rotate(90deg)}
  .modelo-numeros{grid-template-columns:1fr;gap:var(--e5)}
  .modelo-n .n{font-size:22px}
}

/* ===== de qualidade.html ===== */
/* A barra da Qualidade é o MESMO widget da tabela de Custos: `.barra-prop` + faixa `.w-NN`.
   Os dois agentes que a escreveram inventaram nomes diferentes (`.barra-prop` e `.prop`) e
   convenções de faixa diferentes (`w-05` e `p5`) para desenhar a mesma coisa — unificado aqui,
   antes de virar duas verdades no mesmo arquivo. A versão estreita ganha um modificador. */
.barra-prop.estreita{display:inline-block;width:64px;height:6px;vertical-align:middle}
.cel-score{white-space:nowrap}
.score-num{font-variant-numeric:tabular-nums;color:var(--texto-2);
  font-size:var(--f-xs);margin-left:var(--e2)}

/* Microcopy do cartão: UMA linha explicando o que a métrica significa. Sem ela, só
   quem escreveu o código sabe a diferença entre "disse que não sabe" (certo) e
   "acervo não respondeu" (falta conteúdo). */
.kpi .dica{font-size:var(--f-xs);color:var(--texto-3);line-height:1.4;margin-top:var(--e2)}

/* Células de texto longo. O `white-space:nowrap` global de `th,td` é ótimo para
   número e data e péssimo para pergunta de produtor: sem isto uma frase de 300
   caracteres estica a tabela inteira. */
td.txt{white-space:normal;max-width:34ch}
td.det{white-space:normal;max-width:30ch;font-size:var(--f-xs);color:var(--texto-2)}

/* Fila de correção — cartões em pilha */
.casos{display:grid;gap:var(--e3);margin-bottom:var(--e5)}
.casos .cartao{margin-bottom:0}
.caso .motivo{color:var(--erro);font-weight:600;margin:var(--e2) 0}
/* `pre-wrap` porque a resposta do bot tem quebras de linha que fazem parte do
   sentido (lista, cálculo). O texto é autoescapado — pre-wrap é só apresentação. */
.fala{white-space:pre-wrap;font-size:var(--f-sm);color:var(--texto-2);margin-top:var(--e2)}
.fala b{display:block;font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--texto-3);font-weight:600}

/* ===== de disparo.html ===== */
/* ============================== DISPARO (fase 2) ==============================
   Classes usadas por painel/templates/disparo.html. As TRÊS PRIMEIRAS não são enfeite: são
   correções de colisão com regras que já estão no arquivo, e eu medi as duas no navegador
   (Chrome, com o estilo.css real + este bloco) antes de escrever. */

/* 1) O <form> do disparo embrulha a página inteira: a tabela de marcação vive DENTRO dele,
   senão o que o Pedro marca não é enviado. A classe existia para DESFAZER a regra
   `.wrap form:not(.filtro)` da ponte, que espremia qualquer <form> em 380px com cara de cartão
   de login. A ponte saiu em 17/08 e não há mais nada a desfazer: hoje o <form> já nasce sem
   moldura, e a classe fica só como nome do que ele é. */
form.disparo{margin:0}

/* 2) `input,select,textarea{width:100%}` nasceu para o cartão do login e estica caixa de marcar
   e rádio até a largura da tela. Seletor de atributo (0,1,1) ganha do de elemento (0,0,1).
   Hoje TODA caixa de marcar do painel está nesta página (conferido com grep) — nenhuma outra
   tela muda de aparência por causa desta linha. */
input[type="checkbox"],input[type="radio"]{width:auto;margin:0 var(--e2) 0 0;padding:0;
  accent-color:var(--acento);vertical-align:middle}

/* 3) (a pílula de status desta tela é a `.pilula` da fase 1, lá em cima — o retoque que
   existia aqui era só para vencer as caixas da PONTE DA TRANSIÇÃO, e saiu com ela) */

/* 4) Os três passos numerados */
.passo{margin:0 0 var(--e6)}
.passo-cab{display:flex;align-items:center;gap:var(--e3);margin:0 0 var(--e3)}
.passo-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--borda-forte);color:var(--texto-2);font-size:var(--f-xs);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.passo-tit{margin:0;font-size:var(--f-md);font-weight:650;letter-spacing:.02em;
  text-transform:uppercase;color:var(--texto-3)}

/* 5) Escolha do público: links em forma de pílula, o atual preenchido (era um style inline de
   negrito, e negrito sozinho não diz "você está aqui"). */
.opcoes{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;margin:0 0 var(--e3)}
.opcoes a{border:1px solid var(--borda);border-radius:99px;padding:2px var(--e3);
  font-size:var(--f-xs);color:var(--texto-2)}
.opcoes a:hover{border-color:var(--borda-forte);color:var(--texto);text-decoration:none}
.opcoes a[aria-current="true"]{border-color:var(--borda-forte);background:var(--superficie-2);
  color:var(--texto);font-weight:650}

/* 6) Texto fraco INLINE. `.vazio` não serve para isto: ela é a moldura do estado vazio e carrega
   padding de bloco (32/24) que, num <span> dentro de <td>, vira 24px de sobra dos dois lados.
   ⚠️ produtores.html já usa <span class="vazio"> dentro de <td> e come esse padding — não
   mexi lá (não é a minha página), mas vale a conferida. */
.fraco{color:var(--texto-3)}
.janela-ok{color:var(--ok)}
/* Janela fechada não é ERRO — é a condição que passa a custar dinheiro. Âmbar, não vermelho. */
.janela-fim{color:var(--alerta)}
.custo-cobrado{color:var(--alerta);font-weight:600}

/* 7) O rádio do template, recuado sob a caixa que o liga (era margin-left:22px inline) */
.opcao-template{margin:var(--e1) 0 0 24px}
.confirmar{margin-top:var(--e4);color:var(--texto);font-size:var(--f-sm)}

/* 8) O `button` global é 100% de largura (também nasceu no cartão de login) */
.btn-enviar{width:auto;margin-top:var(--e3);padding:var(--e3) var(--e5)}

/* 9) Linha do tempo dos disparos anteriores */
.linha-tempo{border-left:2px solid var(--borda);padding-left:var(--e4);margin-left:5px}
.evento{position:relative;padding-bottom:var(--e5)}
.evento::before{content:"";position:absolute;left:calc(-1 * var(--e4) - 6px);top:5px;width:9px;
  height:9px;border-radius:50%;background:var(--superficie);border:2px solid var(--borda-forte)}
.evento .cab{font-size:var(--f-xs);color:var(--texto-3)}
.evento .recado{font-size:var(--f-sm);white-space:pre-wrap;background:var(--superficie);
  border:1px solid var(--borda);border-radius:var(--raio-sm);padding:var(--e2) var(--e3);
  margin:var(--e2) 0}
.evento .dest{font-size:var(--f-xs);margin-top:var(--e1);display:flex;gap:var(--e2);
  align-items:baseline;flex-wrap:wrap}

/* 10) Selo de status por destino. Nomes próprios de propósito: `ok`/`erro`/`aviso` são CAIXAS de
   aviso no bloco da ponte e contaminariam o selo com padding e margem de bloco (é a mesma
   armadilha do item 3). */
.tag.enviado{border:1px solid var(--ok);color:var(--ok);background:transparent}
.tag.pendente{border:1px solid var(--borda-forte);color:var(--texto-3);background:transparent}
.tag.falhou{border:1px solid var(--erro);color:var(--erro);background:transparent}
.tag.fechada{border:1px solid var(--alerta);color:var(--alerta);background:transparent}

/* ===== de auditoria.html ===== */
/* ============================== AUDITORIA ==============================
   Duas dimensões, e é de propósito: o ÍCONE diz o TIPO do evento, a COR diz a CLASSE (o que
   ele significa). `backup_falhou` usa o ícone do backup e a cor do recusado — com uma
   dimensão só, ele sumia de um dos dois lugares. */

.log-ev{display:inline-flex;align-items:center;gap:var(--e2);white-space:nowrap;font-weight:600}
.log-ev svg{flex:0 0 auto}
.log-ev.acesso{color:var(--texto-2)}
.log-ev.backup{color:var(--ok)}
.log-ev.anonimizar{color:var(--alerta)}
.log-ev.recusado{color:var(--erro)}

/* Fundo tingido SÓ no recusado. Vermelho de fundo tem de significar "algo deu errado" — se
   "deu certo" também pintar, a cor que precisa gritar já está gasta. (Era `style="background:
   #fde8e8"` inline, cor do tema CLARO antigo, que no escuro virava uma faixa branca.)
   Seletor com `tbody` na frente de propósito: precisa vencer a zebra (`tbody tr:nth-child(even)
   td`) e o hover (`tbody tr:hover td`) sem depender da ordem em que este bloco cair no arquivo. */
tbody tr.l-recusado td{background:rgba(229,72,77,.07)}
tbody tr.l-recusado:hover td{background:rgba(229,72,77,.13)}

/* A única célula da tabela que QUEBRA linha: detalhe é texto corrido, não dado tabular
   (substitui o `style="white-space:normal;font-size:12px;opacity:.75"` inline). */
.log-det{white-space:normal;font-size:var(--f-xs);color:var(--texto-2);min-width:240px;max-width:520px}

/* "só no volume da Railway" — enquanto o destino externo do backup não existir, toda linha de
   backup carrega esta ressalva. Âmbar, não vermelho: não é erro (o backup aconteceu), é a
   fraqueza conhecida dele. */
.log-vol{display:inline-flex;align-items:center;gap:var(--e1);color:var(--alerta);white-space:nowrap}

.log-mais{margin:var(--e4) 0 0;text-align:center}

/* Contadores do topo: chip com número em destaque; `alarme` é o de recusadas quando não é zero.
   `alarme` e não `erro`: a `.erro` solta era uma CAIXA de aviso no bloco da ponte e teria
   transformado o chip num bloco. A ponte saiu, mas o nome próprio fica — `.erro` sozinha voltar
   a existir um dia é mais provável que este comentário ser lido a tempo. */
.chip b{color:var(--texto);font-weight:700}
.chip.alarme{border-color:var(--erro);color:var(--erro)}
.chip.alarme b{color:var(--erro)}

/* Utilitária: um `.sub` que encosta no que vem logo abaixo (os 24px padrão separavam a frase
   dos contadores que são parte dela). Vale para qualquer página. */
.sub.rente{margin-bottom:var(--e2)}

/* ===== de ficha.html ===== */
/* ============================== FICHA DO PRODUTOR ==============================
   Classes NOVAS usadas por painel/templates/ficha.html. */

/* CADASTRO EM PARES ROTULO/VALOR. `dl` com um <div> por par e HTML5 valido e e o
   que permite o grid. Existe por um motivo de conteudo, nao de enfeite: numa
   frase corrida ("... vence 12/03/2027 · origem: pedido 4471 ..."), um campo
   vazio some sem deixar buraco — foi assim que a ORIGEM DA VENDA evaporou da
   tela de Produtores em 11/08. Em par, o rotulo fica na tela e a falta aparece. */
.ficha-dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e4) var(--e3);margin:0}
.ficha-dados dt{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-3);font-weight:600}
.ficha-dados dd{margin:var(--e1) 0 0;font-size:var(--f-sm);color:var(--texto)}

/* AUSENCIA FORA DE TABELA. `.vazio` nao serve aqui: ela e o BLOCO de estado vazio
   (`text-align:center;padding:var(--e6) var(--e5)`) e, aplicada a um <span> ou a
   um <dd>, leva junto esse padding — `td .vazio` so acrescenta a cor. `.sem` faz
   so o que o nome diz: apaga o valor ausente sem mexer no espaco. */
.sem{color:var(--texto-3)}

/* CONVERSA. Sem JavaScript: a bolha e uma <div> com borda, e quem falou se
   distingue por FUNDO e por LADO (o bot a direita, como no WhatsApp). O verde
   claro `#e8f3ec` que as mensagens recebidas tinham no inline morreu de
   proposito: era cor de tema claro e, sobre o tema escuro da Fase 1, deixava a
   fala do produtor em texto quase branco sobre fundo quase branco. */
.conversa{display:flex;flex-direction:column;gap:var(--e2);margin-bottom:var(--e5)}
.conversa .msg{max-width:min(680px,90%);background:var(--superficie);
  border:1px solid var(--borda);border-radius:var(--raio);
  padding:var(--e2) var(--e3);box-shadow:var(--sombra)}
.conversa .msg.de-produtor{background:var(--superficie-2);border-color:var(--borda-forte)}
.conversa .msg.do-bot{margin-left:auto}
.conversa .msg .quem{font-size:var(--f-xs);color:var(--texto-3);margin-bottom:var(--e1)}
/* `pre-wrap` guarda as quebras de linha que a pessoa digitou; `overflow-wrap` e a
   trava contra a mensagem de 400 caracteres sem espaco (um link colado), que
   esticaria a pagina inteira para o lado. */
.conversa .msg .texto{white-space:pre-wrap;overflow-wrap:anywhere}
.conversa .msg .marcada{font-size:var(--f-xs);color:var(--alerta);margin-top:var(--e1)}
.conversa .msg .acao{margin-top:var(--e2)}

@media(max-width:720px){
  .conversa .msg{max-width:100%}
  .ficha-dados{gap:var(--e3)}
}

/* ===== de acoes.html ===== */
/* ============================== TELAS DE AÇÃO ==============================
   /produtor/{id} (premium · rebaixar · teste · apagar), /novo e /marcar/{id}.
   Uma pergunta por tela: coluna estreita, o que vai mudar por extenso, um botão
   no fim. A largura curta é funcional — é ela que faz a frase da consequência
   ser lida ANTES do botão, e não ao lado dele.

   `tela-acao`, e não `acao`: `class="acao"` JÁ É de outra gente — a linha de
   sugestão do `_vazio.html` e a fileira do "⚑ resposta errada" na ficha. Todo o
   resto desce escopado a partir dela, para não vazar em página de ninguém. */
.tela-acao{max-width:560px}

/* O FORMULÁRIO. O seletor carregava `.wrap` na frente para vencer a regra da PONTE DA
   TRANSIÇÃO, que fazia de qualquer <form> um cartão de login de 380px. A ponte saiu em
   17/08 e o seletor encurtou, como o comentário antigo previa — as propriedades do cartão
   sempre estiveram declaradas aqui, então a tela não mudou. */
.tela-acao form.pergunta{
  max-width:none; margin:0; padding:var(--e4); border-radius:var(--raio);
  background:var(--superficie); border:1px solid var(--borda); box-shadow:var(--sombra);
}

/* COM QUEM — nome, número, plano de hoje e vencimento numa linha só. É o bloco
   que denuncia o produtor errado antes do clique. `overflow-wrap` porque o nome
   vem do WhatsApp e pode ser uma palavra só de 120 caracteres. */
.tela-acao .alvo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e1) var(--e3);
  padding:var(--e3) var(--e4);margin-bottom:var(--e4);background:var(--superficie);
  border:1px solid var(--borda);border-radius:var(--raio)}
.tela-acao .alvo .nome{font-weight:650;overflow-wrap:anywhere}
.tela-acao .alvo .venc{font-size:var(--f-xs);color:var(--texto-3)}

/* Prosa curta FORA da caixa de aviso: o que continua valendo depois da ação. */
.tela-acao .prosa{margin:0 0 var(--e4);font-size:var(--f-sm);color:var(--texto-2)}
.tela-acao .prosa b{color:var(--texto)}
.tela-acao .cartao .prosa:last-child{margin-bottom:0}

/* Depois do botão: a nota de rodapé da tela e o caminho de volta. */
.tela-acao .nota{margin:var(--e4) 0 0;font-size:var(--f-xs);color:var(--texto-3)}
.tela-acao .cancelar{margin:var(--e4) 0 0;font-size:var(--f-sm)}

/* A resposta do bot como ela saiu no WhatsApp: quebra de linha preservada pelo
   CSS (nunca por `| safe`), e link comprido quebrando em vez de furar o cartão. */
.tela-acao .resposta{white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:var(--f-md);color:var(--texto)}

/* O RODAPÉ EXPLICATIVO no fim de uma página (Gestão). Nasceu no bloco "PONTE DA
   TRANSIÇÃO", que foi embora em 17/08 quando a última tela virou template — mas esta
   classe não era da ponte: é usada por template, e por isso ficou. */
.foot{margin-top:var(--e5);font-size:var(--f-xs);color:var(--texto-3);line-height:1.6}

/* Utilitárias mínimas — existem para que NENHUM template precise de `style="..."`
   inline. É o que permitirá a CSP largar o `unsafe-inline` no fim da Fase 2. */
.espaco-cima{margin-top:var(--e2)}
.nota-rodape{margin-top:var(--e4);margin-bottom:0}

/* ============================== PAGINAÇÃO E EXPORTAÇÃO (Fase 3) ==============================
   A faixa embaixo da tabela: quantos de quantos, os passos e o botão de levar para a planilha.
   Fica FORA da `.tblwrap` de propósito — dentro dela, a rolagem horizontal da tabela larga
   levaria o "próxima →" para fora da tela justamente quando há mais páginas. */
.paginacao{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;
  margin:var(--e3) 0 var(--e5);font-size:var(--f-sm);color:var(--texto-2)}
.paginacao .conta b{color:var(--texto);font-variant-numeric:tabular-nums}
.paginacao .passos{display:flex;gap:var(--e3)}
.paginacao .empurra{margin-left:auto}

/* A seta da coluna ordenada. Fica em `--ouro` porque é estado, não enfeite: é o que responde
   "por que esta lista está nesta ordem?" sem obrigar a ler a URL. */
.seta{color:var(--ouro);margin-left:var(--e1);font-size:10px;vertical-align:1px}

/* ============================== TABELA QUE VIRA CARTÃO (Fase 4) ==============================
   A lista de produtores tem 10 colunas. Num celular isso vira rolagem horizontal, e rolagem
   horizontal esconde: foi assim que a COTA sumiu da tela do dono — ela existia, e não era
   vista. Abaixo de 720px cada linha vira um cartão com rótulo na frente do valor.

   COMO FUNCIONA, sem uma linha de JavaScript: o `<thead>` some, cada `<td>` vira uma linha
   flex, e o rótulo é impresso pelo CSS a partir do atributo (`content: attr(data-label)`) que
   o template escreveu. A CSP proíbe script — inclusive o nosso —, então esta é a única
   maneira, e é também a mais robusta: o rótulo viaja grudado no dado.

   ⚠️ Só a tabela com `.vira-cartao` muda. As outras continuam rolando: tabela de 3 colunas
   cabe na tela, e virar cartão faria ocupar três vezes mais altura sem ganhar nada. */
@media(max-width:720px){
  .vira-cartao thead{
    /* `clip` e não `display:none`: some da tela mas continua existindo para o leitor de tela,
       que precisa do cabeçalho para anunciar a estrutura. */
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
  }
  .vira-cartao,.vira-cartao tbody,.vira-cartao tr,.vira-cartao td{display:block;width:auto}
  .vira-cartao tr{
    border:1px solid var(--borda);border-radius:var(--raio);margin-bottom:var(--e3);
    padding:var(--e2) var(--e3);background:var(--superficie)
  }
  .vira-cartao tr:nth-child(even){background:var(--superficie)}   /* zebra não faz sentido em cartão */
  .vira-cartao td{
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
    padding:var(--e1) 0;border:0;text-align:right
  }
  .vira-cartao td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:var(--f-xs);color:var(--texto-3);font-weight:600;letter-spacing:.02em
  }
  /* A PRIMEIRA CÉLULA é o título do cartão: nome grande, sem rótulo (o nome se explica). */
  .vira-cartao td:first-child{
    display:block;text-align:left;font-size:var(--f-lg);padding-bottom:var(--e2);
    margin-bottom:var(--e2);border-bottom:1px solid var(--borda)
  }
  .vira-cartao td:first-child::before{content:none}
  /* O `.tblwrap` é o PAI da tabela, então quem seleciona é o `:has()`. Eu tinha escrito
     `.vira-cartao .tblwrap` junto, que é o contrário e nunca casaria com nada — regra
     morta não dá erro, só fica ali parecendo que faz alguma coisa. */
  .tblwrap:has(.vira-cartao){overflow-x:visible;border:0;background:transparent}
}

/* ============================== IMPRESSÃO (Fase 4) ==============================
   A Gestão é a página que vira PDF para sócio e contador — mas a regra vale para todas, porque
   qualquer tela pode acabar num papel e um `@media print` só na Gestão deixaria as outras
   saindo pretas.

   POR QUE INVERTER AS CORES: o painel é escuro por decisão (a logo é branca), e imprimir tela
   escura gasta a tinta inteira do cartucho para produzir um papel cinza onde não se lê nada.
   No papel, o certo é preto no branco. Os TOKENS são redefinidos aqui, e não as regras: assim
   cada componente continua usando `var(--texto)` e nada precisa saber que está sendo impresso.

   O que SOME no papel: navegação, rodapé, formulários e paginação. Nenhum deles é informação —
   são maneiras de chegar a outra tela, e papel não tem outra tela. */
@media print{
  :root{
    --fundo:#ffffff; --superficie:#ffffff; --superficie-2:#f2f4f7;
    --borda:#c9d1dc; --borda-forte:#9aa7b8; --campo-borda:#8796aa;
    --texto:#101820; --texto-2:#3c4753; --texto-3:#5b6675;
    --acento:#12408f; --ouro:#8a5a00; --sobre-acento:#ffffff;
    --ok:#186a3b; --alerta:#8a5a00; --erro:#a11a1f;
    --sombra:none;
  }
  html{color-scheme:light}
  body{background:#fff}
  .topo,.rodape,.filtro,.paginacao,.periodos,.opcoes,.log-mais,form{display:none}
  .wrap{max-width:none;padding:0}
  /* Cartão no papel precisa de contorno: sem o fundo que o separava na tela, ele some. */
  .kpi,.cartao,.tblwrap,.alerta{border:1px solid var(--borda);box-shadow:none;
    break-inside:avoid}
  table{border-collapse:collapse}
  th,td{border-bottom:1px solid var(--borda)}
  thead{display:table-header-group}          /* o cabeçalho se repete a cada página */
  tr{break-inside:avoid}
  h1,h2{break-after:avoid}
  /* O ENDEREÇO DO LINK vai junto: num papel, "ver detalhe por origem" sublinhado de azul é
     uma promessa que o papel não cumpre. */
  a[href^="/"]::after{content:" (" attr(href) ")";font-size:10px;color:var(--texto-3)}
  .g-nao-imprime{display:none}
}