/* Calculadora BESS — padrão visual da casa: laranja #FA5916, Montserrat + Source Sans 3 */
:root{
  --fundo:#14110F; --superficie:#1C1917; --superficie2:#23201D;
  --linha:#332E29; --linha-fraca:#272320;
  /* --texto3 passou por #847A70 e #8A8076 antes de chegar aqui, e a lição é
     sobre MEDIR CONTRA TUDO: são três fundos, não dois. O mais exigente não é a
     página nem o cartão — é --superficie2, que pinta o cabeçalho de TODA tabela
     (thead th), a ficha .resumo-energia, .escolha-bloco e details.manual.
     #8A8076 dava 4,86 sobre o fundo e 4,52 sobre o cartão, e reprovava com
     4,19 justamente ali. Agora: 5,54 / 5,15 / 4,78. */
  --texto:#F3EEE9; --texto2:#B4AAA0; --texto3:#938A80;
  --laranja:#FA5916; --ok:#2DB87A; --alerta:#F5A623; --erro:#E05252;
  /* Texto SOBRE o laranja do botão. Precisa ser variável porque o par vence em
     temas opostos: no escuro (#FA5916) o branco dá 3,23:1 e o grafite 5,39:1;
     no claro (#C4430E) é o contrário — branco 5,05:1, grafite 3,44:1. Fixar
     uma cor só conserta um tema e estraga o outro. */
  --texto-botao:#1A1A1A;
  /* campo de formulário: mais escuro que o cartão, para afundar em vez de sumir */
  --campo:#151210; --campo-borda:#3B342E; --linha-forte:#4A423A;
  /* placeholder: 4,8:1 sobre o campo — lê sem esforço e ainda é nitidamente
     mais fraco que valor digitado. Em 3,1:1 o texto parecia resíduo na tela */
  --texto4:#8A7F75;
  /* cores dos gráficos no escuro — o SVG lê daqui, não de valor fixo */
  --g-solar:#F5A623; --g-bess:#2DB87A; --g-rede:#7C8B9A; --g-carga:#F3EEE9;
  --g-carrega:#3B82C4; --g-carregaRede:#5C6B7A; --g-laranja:#FA5916;
  --g-guarda:#5B3FA8; --g-devolve:#B79CF5;
  --g-grade:rgba(255,255,255,.07); --g-texto:#B4AAA0; --g-texto3:#847A70;
  --sombra-menu:0 16px 40px rgba(0,0,0,.55);
  /* texto sobre fundo tingido: no escuro clareia, no claro escurece */
  /* Texto SOBRE a tinta tingida — a etiqueta de estado pinta o fundo com a
     propria cor a 10-12%% de opacidade, e a cor cheia por cima perde
     contraste contra ela. --texto-erro e --texto-info ja existiam por esse
     motivo; --texto-ok e --texto-alerta faltavam, e as etiquetas usavam a
     cor cheia: .e-flag dava 4,01:1 no escuro, .e-respondida 3,97 e
     .e-aberta 4,03 no claro. */
  --texto-erro:#FFB4B4; --texto-info:#7FB3E0;
  --texto-ok:#2DB87A; --texto-alerta:#F5A623;   /* ja passam no escuro */
  --texto-etiqueta-erro:#EC5E5E;                 /* 4,01 -> 4,62:1 */
  --tinta-erro:rgba(224,82,82,.12); --tinta-alerta:rgba(245,166,35,.10);
  --tinta-ok:rgba(45,184,122,.10); --tinta-laranja:rgba(250,89,22,.10);
  --tinta-info:rgba(59,130,196,.16);
  --realce-alvo:rgba(255,255,255,.05);
  --veu:rgba(10,8,7,.86);
}

/* ---- tema claro ---------------------------------------------------------
   As mesmas variáveis, outros valores — nenhuma regra abaixo precisa saber
   que existem dois temas. O contraste foi conferido: texto principal 15,8:1
   sobre o fundo, dica de campo 4,6:1, ambos acima do mínimo de leitura.

   O laranja escurece de #FA5916 para #C4430E: o laranja da marca vibra bonito
   sobre preto e some sobre branco — 2,9:1, abaixo de qualquer piso. É a mesma
   correção que o documento do cliente já fazia. */
:root[data-tema="claro"]{
  --fundo:#FBF9F7; --superficie:#FFFFFF; --superficie2:#F4F0EC;
  --linha:#E4DCD4; --linha-fraca:#EFE9E3;
  /* Mesma história do tema escuro, com a direção invertida (aqui o valor
     ESCURECE). #8B8177 reprovava nos três fundos; #7F756B passava no cartão e
     falhava no fundo; #7B7167 vencia os dois e ainda reprovava em --superficie2
     com 4,21 — o cabeçalho de tabela. Agora: 5,17 / 5,43 / 4,79.
     --alerta era #A9700A (4,19:1 sobre o cartão). */
  --texto:#1C1815; --texto2:#5C534B; --texto3:#726860;
  --laranja:#C4430E; --ok:#1E8757; --alerta:#A36A04; --erro:#C13535;
  --texto-botao:#FFFFFF;   /* ver a nota no tema escuro: o par se inverte */
  --campo:#FFFFFF; --campo-borda:#D8CFC6; --linha-forte:#BDB2A6;
  --texto4:#7C7169;
  --g-solar:#C87F0A; --g-bess:#1E8757; --g-rede:#8E9AA6; --g-carga:#1C1815;
  --g-carrega:#2E6FA8; --g-carregaRede:#8B8177; --g-laranja:#C4430E;
  --g-guarda:#4A3191; --g-devolve:#8B6FD4;
  --g-grade:rgba(0,0,0,.08); --g-texto:#5C534B; --g-texto3:#8B8177;
  --sombra-menu:0 14px 34px rgba(60,45,35,.16);
  /* no claro o texto de aviso ESCURECE: #FFB4B4 sobre branco é 1,4:1 — some */
  --texto-erro:#A32020; --texto-info:#1F5C8C;
  --texto-ok:#137C4C; --texto-alerta:#996000;   /* 3,97 e 4,03 -> 4,60 e 4,63 */
  --texto-etiqueta-erro:#C13535;                 /* 4,80:1, ja passava */
  --tinta-erro:rgba(193,53,53,.09); --tinta-alerta:rgba(169,112,10,.10);
  --tinta-ok:rgba(30,135,87,.10); --tinta-laranja:rgba(196,67,14,.08);
  --tinta-info:rgba(31,92,140,.10);
  --realce-alvo:rgba(0,0,0,.04);
  --veu:rgba(40,32,26,.55);
}
*{box-sizing:border-box}
/* Um lugar só para a dica de campo. Antes era regra por seletor, e todo campo
   criado depois herdava o cinza do navegador — que no tema escuro desaparece. */
input::placeholder,textarea::placeholder{color:var(--texto4);opacity:1}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--laranja)}
h1{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.02em;margin:0 0 18px}
h2{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.05rem;margin:0 0 12px}

/* topo — acompanha a rolagem: a tela do estudo é longa, e voltar ao começo só
   para trocar de seção é atrito puro. A altura vira variável porque o painel
   tem a própria barra fixa e precisa parar exatamente embaixo desta. */
/* Valor de RESERVA: quem manda é o menu.js, que mede a barra de verdade e
   regrava esta variável. 73px é a altura no desktop (28 de padding + 44 do item
   mais alto + 1 de borda); no celular a barra quebra em várias linhas e passa
   disso, que é precisamente o motivo de a medida ser feita no navegador. */
:root{--altura-topo:73px}
.topo{background:var(--superficie);border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:60}
.topo-int{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca-sinal{width:9px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,var(--laranja) 0 62%,var(--texto3) 62% 100%)}
.marca-nome{font-family:Montserrat,sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.menu{display:flex;gap:20px;flex:1}
.menu a{color:var(--texto2);text-decoration:none;font-weight:600;font-size:.92rem;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--texto)}
.menu a.ativo{color:var(--laranja);border-bottom-color:var(--laranja)}
.quem-nome{font-weight:600}
.sair{background:none;border:1px solid var(--linha);color:var(--texto2);
  border-radius:999px;padding:5px 14px;font-size:.8rem;cursor:pointer;font-family:inherit}
.sair:hover{border-color:var(--laranja);color:var(--laranja)}

/* conteúdo */
.conteudo{max-width:1180px;margin:0 auto;padding:36px 24px 80px}
.migalha{color:var(--texto3);font-size:.85rem;margin:0 0 8px}
.cinza{color:var(--texto3)}
.linha-estado{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:-8px 0 22px;font-size:.88rem}

/* entrada */
.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.cartao-entrada{width:100%;max-width:380px;background:var(--superficie);
  border:1px solid var(--linha);border-radius:14px;padding:34px 32px}
.marca-grande{margin-bottom:6px}
.marca-grande .marca-sinal{height:28px;width:11px}
.marca-grande .marca-nome{font-size:1.2rem}
.cartao-entrada .sub{color:var(--texto3);font-size:.85rem;margin:0 0 24px}
.form{display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--texto2);font-weight:600}
.form input{background:var(--superficie2);border:1px solid var(--linha);border-radius:8px;
  padding:11px 13px;color:var(--texto);font-family:inherit;font-size:.95rem}
.form input:focus{outline:2px solid var(--laranja);outline-offset:1px;border-color:transparent}
.principal{background:var(--laranja);color:var(--texto-botao);border:none;border-radius:8px;padding:12px;
  font-family:Montserrat,sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;margin-top:6px}
.principal:hover{filter:brightness(1.08)}
.erro{background:var(--tinta-erro);border:1px solid var(--erro);color:var(--texto-erro);
  border-radius:8px;padding:10px 13px;font-size:.87rem;margin:0 0 18px}
.aviso{background:var(--tinta-alerta);border-left:3px solid var(--alerta);
  border-radius:0 8px 8px 0;padding:11px 15px;font-size:.9rem;color:var(--texto2);margin:0 0 20px}
.vazio{color:var(--texto3);font-size:.92rem}

/* números */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:0 0 26px}
.numero{background:var(--superficie);border:1px solid var(--linha);border-radius:10px;padding:14px 16px}
.numero.destaque{border-color:var(--alerta)}
.numero .n{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:1.5rem;
  font-variant-numeric:tabular-nums;line-height:1.1}
.numero .r{display:block;color:var(--texto3);font-size:.8rem;margin-top:2px}
.numero.destaque .n{color:var(--alerta)}

/* cartões e tabelas */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:12px;padding:22px 24px;margin:0 0 18px}
.tabela-rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:10px;background:var(--superficie)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:560px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--linha-fraca)}
thead th{font-family:Montserrat,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto3);background:var(--superficie2);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
tr.na-rede td:first-child{box-shadow:inset 3px 0 0 var(--laranja)}

.etiqueta{font-family:Montserrat,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid currentColor;white-space:nowrap}
.e-rascunho{color:var(--texto3)}
.e-conferido{color:var(--ok)}
.e-em_revisao{color:var(--alerta)}
.e-publicado{color:var(--laranja)}
.e-arquivado{color:var(--texto3)}
.e-integrador{color:var(--texto3)}

@media (max-width:640px){
  .topo-int{gap:14px}
  .quem{width:100%;justify-content:space-between}
  h1{font-size:1.35rem}
}

/* ---------- formulários largos ---------- */
.form-largo{display:flex;flex-direction:column;gap:16px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.grade label{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--texto2);font-weight:600}
.grade label.col2{grid-column:span 2}
.grade input,.grade select{
  background:var(--campo);
  border:1px solid var(--campo-borda);
  border-radius:8px;padding:11px 13px;
  color:var(--texto);font-family:inherit;font-size:.92rem;
}
.grade input:hover,.grade select:hover{border-color:var(--linha-forte)}
.grade input:focus,.grade select:focus{
  outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(250,89,22,.15);
}
.grade label{color:var(--texto2)}
.grade small{color:var(--texto3);font-weight:400;font-size:.75rem;line-height:1.35}
.acoes{display:flex;gap:12px;align-items:center}
.secundario{background:var(--superficie2);color:var(--texto);border:1px solid var(--linha);
  border-radius:8px;padding:11px 18px;font-family:Montserrat,sans-serif;font-weight:600;
  font-size:.85rem;cursor:pointer;text-decoration:none;display:inline-block}
.secundario:hover{border-color:var(--laranja);color:var(--laranja)}
.principal.pequeno,.secundario.pequeno{padding:8px 15px;font-size:.8rem;margin-top:12px}
.pequeno{font-size:.82rem}
.forte{font-weight:700;color:var(--texto)}
.marca-caixa{flex-direction:row!important;align-items:center;gap:8px;font-weight:400!important}
.marca-caixa input{width:auto}

/* procedência */
.procedencia{display:flex;gap:22px;flex-wrap:wrap;background:var(--superficie2);
  border:1px solid var(--linha);border-radius:10px;padding:11px 16px;margin:0 0 20px;font-size:.83rem;color:var(--texto2)}
.procedencia b{color:var(--texto3);font-weight:600;text-transform:uppercase;font-size:.68rem;letter-spacing:.08em;margin-right:5px}
.marca-alerta{color:var(--alerta)}

/* tabela editável */
table.editavel input{background:transparent;border:1px solid transparent;border-radius:5px;
  padding:5px 7px;color:var(--texto);font-family:inherit;font-size:.86rem;width:100%;
  font-variant-numeric:tabular-nums}
table.editavel input:hover{border-color:var(--linha)}
table.editavel input:focus{background:var(--superficie2);border-color:var(--laranja);outline:none}
table.editavel tr.nova input{color:var(--texto3)}
table.editavel td{padding:3px 8px}

/* cenários */
.linha-calcular{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin:0 0 18px;
  padding:0 0 18px;border-bottom:1px solid var(--linha-fraca)}
.linha-calcular label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--texto2);font-weight:600}
.linha-calcular input,.linha-calcular select{background:var(--campo);
  border:1px solid var(--campo-borda);border-radius:8px;padding:10px 12px;
  color:var(--texto);font-family:inherit;font-size:.9rem}
.linha-calcular input:focus,.linha-calcular select:focus{outline:none;
  border-color:var(--laranja);box-shadow:0 0 0 3px rgba(250,89,22,.15)}
.escolhas{border:1px solid var(--linha);border-radius:8px;padding:8px 14px 10px;margin:0;
  display:flex;gap:14px;flex-wrap:wrap}
.escolhas legend{font-size:.7rem;color:var(--texto3);text-transform:uppercase;letter-spacing:.08em;padding:0 5px}
.escolhas label{flex-direction:row;align-items:center;gap:6px;font-weight:400;font-size:.82rem}
tr.melhor td{background:var(--tinta-laranja)}
tr.melhor td:first-child{box-shadow:inset 3px 0 0 var(--laranja)}
.alternar{background:none;border:1px solid var(--linha);color:var(--texto3);border-radius:999px;
  padding:4px 11px;font-size:.72rem;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:600;white-space:nowrap}
.alternar.ligado{border-color:var(--laranja);color:var(--laranja)}
.alternar:hover{color:var(--texto)}

.cartao.flag{border-left:3px solid var(--laranja)}
.lacunas{margin:8px 0 0;padding-left:18px}
.lacunas li{margin-bottom:10px}

.link-publico{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1rem;
  background:var(--superficie2);border:1px solid var(--linha);border-radius:8px;
  padding:12px 15px;margin:0 0 10px;word-break:break-all}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.linha-cota{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.linha-cota input[type=text],.linha-cota input:not([type=checkbox]){background:var(--superficie2);
  border:1px solid var(--linha);border-radius:6px;padding:5px 9px;color:var(--texto);
  font-family:inherit;font-size:.85rem;width:72px;font-variant-numeric:tabular-nums}
.linha-cota label{font-size:.8rem;color:var(--texto2)}
tr.inativo td{opacity:.55}

.bloco-ia{background:var(--superficie2);border:1px dashed var(--linha);border-radius:10px;
  padding:14px 16px;margin:0 0 16px}
.linha-ia{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.linha-ia label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;
  color:var(--texto2);font-weight:600}
.linha-ia input[type=file]{font-family:inherit;font-size:.82rem;color:var(--texto2)}
.linha-ia small{color:var(--texto3);font-weight:400;font-size:.75rem}

.cabeca-lista{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:20px}
.cabeca-lista h1{margin-bottom:4px}
.como-botao{text-decoration:none;display:inline-block;padding:11px 20px;margin:0}
.filtros{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 20px}
.filtros .busca{flex:1;min-width:240px}
.filtros input,.filtros select{background:var(--campo);border:1px solid var(--campo-borda);
  border-radius:8px;padding:10px 13px;color:var(--texto);font-family:inherit;
  font-size:.9rem;width:100%}
.filtros input:focus,.filtros select:focus{outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(250,89,22,.15)}
.filtros select{width:auto}
.filtros .secundario.pequeno{margin-top:0}
td.codigo{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem;color:var(--texto2)}
.numero-estudo{margin:-12px 0 18px;color:var(--texto3);font-size:.9rem}
.numero-estudo b{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--laranja)}
.paginas{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:20px;
  font-size:.88rem}

/* marca no topo: logo oficial + divisória + nome do sistema, tudo numa linha */
/* o SVG agora é inline: a metade branca do logo herda esta cor, e o laranja
   da marca fica preso no próprio arquivo. Sem `color`, o logo herdaria a cor
   do link e ficaria laranja inteiro */
.marca-logo{height:30px;width:auto;display:block;color:var(--texto)}
.marca-divisor{width:1px;height:22px;background:var(--linha);display:inline-block}

/* linhas em branco além das três primeiras ficam escondidas até pedirem */
tr.nova.extra{display:none}

/* resumo da nota de energia do mercado livre */
.resumo-energia{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin:0 0 16px}
.resumo-energia>div{background:var(--superficie2);border:1px solid var(--linha);
  border-radius:9px;padding:12px 14px}
.resumo-energia .k{display:block;font-family:Montserrat,sans-serif;font-size:.64rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--texto3);
  margin-bottom:4px}
.resumo-energia .v{display:block;font-size:.95rem;font-variant-numeric:tabular-nums}
.resumo-energia .v.destaque{color:var(--laranja);font-weight:700;
  font-family:Montserrat,sans-serif}
.resumo-energia small{color:var(--texto3);font-weight:400;font-size:.7rem}

/* começar pela fatura: é o caminho principal, e a tela precisa dizer isso */
.destaque-inicio{border-left:3px solid var(--laranja)}
.destaque-inicio h2{color:var(--laranja)}
.destaque-inicio input[type=file]{background:var(--campo);border:1px solid var(--campo-borda);
  border-radius:8px;padding:10px 12px;color:var(--texto2);font-family:inherit;font-size:.85rem}
details.manual{margin:8px 0 0;border:1px solid var(--linha);border-radius:12px;
  background:var(--superficie);padding:0}
details.manual summary{cursor:pointer;padding:18px 24px;font-family:Montserrat,sans-serif;
  font-weight:600;font-size:.95rem;color:var(--texto2);list-style:none}
details.manual summary::-webkit-details-marker{display:none}
details.manual summary::before{content:'▸ ';color:var(--texto3)}
details[open].manual summary::before{content:'▾ '}
details.manual summary:hover{color:var(--laranja)}
details.manual>p,details.manual>form{padding:0 24px}
details.manual>form{padding-bottom:24px}
details.manual .cartao{background:var(--superficie2);margin-bottom:14px}

.espaco-acima{margin-top:16px}
.campo-largo{min-width:200px}
.campo-curto{max-width:110px}

/* o cartão de gráficos respira: o despacho horário fica ilegível espremido */
.cartao.largo{padding:22px 22px 18px}
.cartao.largo>h2{margin-bottom:6px}

/* ---- janela de espera da leitura por IA ---------------------------------
   Cobre a tela inteira de propósito: enquanto a IA lê, nenhum botão pode estar
   ao alcance do clique. Cada clique repetido é uma leitura cobrada. */
.sem-rolagem{overflow:hidden}
.espera-fundo{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px;background:var(--veu);
  backdrop-filter:blur(3px);animation:espera-entra .18s ease-out}
@keyframes espera-entra{from{opacity:0}to{opacity:1}}
.espera-caixa{width:100%;max-width:440px;background:var(--superficie);
  border:1px solid var(--linha);border-radius:16px;padding:28px 28px 24px;
  box-shadow:var(--sombra-menu)}
.espera-marca{display:flex;align-items:center;gap:9px;font-family:Montserrat,sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto3);margin-bottom:20px}
.espera-sinal{width:8px;height:19px;border-radius:2px;
  background:linear-gradient(180deg,var(--laranja) 0 62%,var(--texto3) 62% 100%)}
.espera-titulo{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.14rem;
  margin:0 0 4px;color:var(--texto)}
.espera-arquivo{margin:0 0 18px;font-size:.84rem;color:var(--texto3);
  word-break:break-all;line-height:1.4}
.espera-trilho{height:7px;border-radius:99px;background:var(--campo);
  border:1px solid var(--linha-fraca);overflow:hidden}
.espera-barra{height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--laranja) 78%,#000),var(--laranja));
  transition:width .35s cubic-bezier(.3,.8,.4,1)}
.espera-barra.pronta{background:var(--ok)}
.espera-linha{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;margin-top:11px;font-size:.86rem}
.espera-etapa{color:var(--texto2)}
.espera-pct{color:var(--texto3);font-variant-numeric:tabular-nums;font-size:.8rem}
.espera-nota{margin:16px 0 0;font-size:.78rem;color:var(--texto3);line-height:1.5}
.espera-caixa.falhou .espera-barra{background:var(--erro)}
.espera-caixa.falhou .espera-etapa{color:var(--erro)}
.espera-caixa.falhou button{margin-top:16px}

/* ---- montagem de cenários -----------------------------------------------
   Três perguntas separadas — potência, armazenamento, o que comparar — em vez
   de um campo de texto onde tudo se mistura. Cada resposta é uma ficha: dá para
   ver o que está escolhido sem ler. */
.montar-cenarios{display:grid;gap:20px;margin-bottom:22px}
.escolha-bloco{border:1px solid var(--linha-fraca);border-radius:12px;
  padding:14px 16px 16px;background:var(--superficie2)}
.escolha-topo{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:11px}
.escolha-topo h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:.86rem;
  margin:0;color:var(--texto);letter-spacing:.01em}
.fichas{display:flex;flex-wrap:wrap;gap:8px}
.ficha{position:relative;cursor:pointer}
.ficha input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.ficha>span{display:flex;align-items:baseline;gap:5px;padding:8px 14px;
  border:1px solid var(--campo-borda);border-radius:9px;background:var(--campo);
  color:var(--texto2);font-size:.9rem;font-weight:600;
  font-variant-numeric:tabular-nums;transition:border-color .12s,color .12s}
.ficha>span i{font-style:normal;font-size:.72rem;font-weight:500;color:var(--texto4)}
.ficha:hover>span{border-color:var(--linha-forte)}
.ficha input:checked+span{border-color:var(--laranja);color:var(--laranja);
  background:rgba(250,89,22,.09)}
.ficha input:checked+span i{color:var(--laranja);opacity:.75}
.ficha input:focus-visible+span{outline:2px solid var(--laranja);outline-offset:2px}
.ficha-livre input{width:96px;padding:8px 12px;border:1px dashed var(--campo-borda);
  border-radius:9px;background:transparent;color:var(--texto);font-family:inherit;
  font-size:.88rem}
.linha-fechar{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.rotulo-linha{display:flex;flex-direction:column;gap:5px;font-size:.82rem;
  color:var(--texto2)}
.conta-cenarios{margin:0;flex:1;min-width:180px;align-self:center}

.conta-cenarios.demais{color:var(--alerta)}

/* ---- pedido de estudo personalizado ------------------------------------- */
.cabeca-secao{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:6px}
.cabeca-secao h2{margin:0}
.form-pedido{display:grid;gap:14px;max-width:640px;margin-top:14px}
.form-pedido textarea{background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borda);border-radius:9px;padding:10px 12px;
  font-family:inherit;font-size:.95rem;line-height:1.5;resize:vertical;width:100%}
.form-pedido textarea:focus-visible{outline:2px solid var(--laranja);outline-offset:1px}
.form-pedido>label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;
  color:var(--texto2)}
.form-pedido select{background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borda);border-radius:9px;padding:9px 12px;
  font-family:inherit;font-size:.92rem}
.pedido-aberto{border:1px solid var(--linha);border-left:3px solid var(--alerta);
  border-radius:10px;padding:14px 16px;margin-bottom:14px;background:var(--superficie2)}
.pedido-topo{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:8px}
.pedido-topo h2{margin:0;font-size:1rem}
.pedido-texto{margin:0 0 10px;white-space:pre-wrap;font-size:.92rem;
  color:var(--texto2);line-height:1.55}
.pedido-resposta{margin:0 0 10px;padding:10px 13px;border-radius:9px;
  background:var(--tinta-ok);border:1px solid rgba(45,184,122,.28);
  font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.form-atender{display:grid;gap:12px;margin-top:12px;border-top:1px solid var(--linha-fraca);
  padding-top:14px}
.form-atender textarea{background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borda);border-radius:9px;padding:10px 12px;
  font-family:inherit;font-size:.92rem;resize:vertical;width:100%}
.form-atender>label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;
  color:var(--texto3)}
.form-atender select{background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borda);border-radius:9px;padding:8px 11px;
  font-family:inherit;font-size:.9rem}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.filtro{padding:6px 14px;border:1px solid var(--linha);border-radius:999px;
  font-size:.84rem;text-decoration:none;color:var(--texto2)}
.filtro.ativo{border-color:var(--laranja);color:var(--laranja)}
.etiqueta.e-aberta{background:var(--tinta-alerta);color:var(--texto-alerta)}
.etiqueta.e-em_atendimento{background:var(--tinta-info);color:var(--texto-info)}
.etiqueta.e-respondida{background:var(--tinta-ok);color:var(--texto-ok)}
.etiqueta.e-cancelada{background:var(--superficie2);color:var(--texto3)}
.etiqueta.e-flag{background:var(--tinta-erro);color:var(--texto-etiqueta-erro)}

/* ---- empresas e planos --------------------------------------------------- */
.empresa-cartao{padding:18px 20px 14px}
.empresa-topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.empresa-topo h2{margin:0 0 4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.empresa-ia{display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  min-width:130px}
.empresa-ia b{font-family:Montserrat,sans-serif;font-size:1.15rem;
  font-variant-numeric:tabular-nums}
.dobra{margin-top:10px;border-top:1px solid var(--linha-fraca);padding-top:8px}
.dobra summary{cursor:pointer;color:var(--texto2);font-size:.88rem;padding:4px 0;
  list-style-position:inside}
.dobra summary:hover{color:var(--laranja)}
.dobra[open] summary{color:var(--laranja);margin-bottom:10px}
.dobra form{margin-bottom:6px}
.campo-cpf{max-width:150px;font-variant-numeric:tabular-nums}
.plano-da-casa{margin:-10px 0 18px}
.plano-da-casa b{color:var(--laranja)}

/* zona de risco do cadastro: inativar e excluir, separados do resto de caso
   pensado — não é lugar de clique distraído */
.zona-risco{margin-top:12px;border-top:1px dashed var(--linha);padding-top:12px;
  display:grid;gap:10px}
.zona-risco form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.perigoso-suave{background:none;border:1px solid var(--alerta);color:var(--alerta);
  border-radius:9px;padding:7px 14px;font-size:.85rem;cursor:pointer;font-family:inherit}
.perigoso-suave:hover{background:var(--tinta-alerta)}
.perigoso{background:none;border:1px solid var(--erro);color:var(--erro);
  border-radius:9px;padding:7px 14px;font-size:.85rem;cursor:pointer;font-family:inherit}
.perigoso:hover{background:var(--tinta-erro)}
.linha-excluir input{background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borda);border-radius:9px;padding:7px 11px;
  font-family:inherit;font-size:.85rem;min-width:220px}


/* ---- menu de configurações ---------------------------------------------
   O que é gestão — perfil, equipe, empresas — sai da barra principal. Usa-se
   de vez em quando e ocupava o mesmo peso visual de onde se trabalha todo dia.
   O papel do usuário também sai do lado do nome: quem está logado sabe quem é,
   e o rótulo só rouba espaço. Ele continua dentro do menu, para conferência. */
/* margin-left:auto prende no canto direito mesmo quando a barra quebra
   em duas linhas — sem isso a engrenagem desce colada no menu */
.engrenagem{position:relative;display:flex;align-items:center;margin-left:auto}
.engrenagem-botao{display:flex;align-items:center;gap:9px;background:none;
  border:1px solid transparent;border-radius:999px;padding:6px 12px;
  cursor:pointer;font-family:inherit;color:var(--texto2);font-size:.88rem}
.engrenagem-botao:hover,.engrenagem.aberto .engrenagem-botao{
  border-color:var(--linha);color:var(--texto);background:var(--superficie2)}
.engrenagem-botao:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.engrenagem-icone{flex:none;transition:transform .25s ease}
.engrenagem.aberto .engrenagem-icone{transform:rotate(45deg);color:var(--laranja)}
.engrenagem-botao .quem-nome{font-weight:600;color:inherit}

.config-lista{position:absolute;top:calc(100% + 8px);right:0;z-index:70;
  min-width:250px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:12px;padding:6px;box-shadow:var(--sombra-menu);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
.engrenagem:hover .config-lista,
.engrenagem:focus-within .config-lista,
.engrenagem.aberto .config-lista{opacity:1;visibility:visible;transform:none}
/* a ponte: sem ela, o ponteiro cruza o vão entre botão e lista e o menu fecha
   debaixo do dedo no caminho para o primeiro item */
.config-lista::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}

.config-cabeca{padding:9px 12px 11px;border-bottom:1px solid var(--linha-fraca);
  margin-bottom:5px;display:flex;flex-direction:column;gap:2px}
.config-cabeca b{font-size:.9rem;color:var(--texto)}
.config-cabeca span{font-size:.76rem;color:var(--texto3)}

.config-lista a,.config-sair button{display:flex;flex-direction:column;gap:1px;
  width:100%;text-align:left;padding:9px 12px;border-radius:9px;
  text-decoration:none;color:var(--texto2);font-size:.9rem;font-family:inherit;
  background:none;border:none;cursor:pointer}
.config-lista a small,.config-sair button small{font-size:.74rem;color:var(--texto4)}
.config-lista a:hover,.config-sair button:hover{background:var(--superficie2);
  color:var(--texto)}
.config-lista a.ativo{color:var(--laranja)}
.config-lista a:focus-visible,.config-sair button:focus-visible{
  outline:2px solid var(--laranja);outline-offset:-2px}
.config-sair{border-top:1px solid var(--linha-fraca);margin-top:5px;padding-top:5px}
.config-sair button{color:var(--texto3)}

@media (max-width:640px){
  .config-lista{right:auto;left:0}
}

/* de onde veio o número: sem a marca, valor decidido e valor chutado pelo
   sistema têm exatamente a mesma cara no formulário */
.origem{color:var(--ok);font-size:.72rem}
.origem.fraca{color:var(--texto4)}


/* ---- idioma e tema, no topo ---------------------------------------------
   Preferências de quem está olhando a tela agora — não configuração de
   sistema. Um clique, sem abrir menu. */
.controles-topo{display:flex;align-items:center;gap:10px;margin-left:auto}

.troca-idioma{display:flex;align-items:center;border:1px solid var(--linha);
  border-radius:999px;overflow:hidden}
.troca-idioma a{padding:5px 10px;font-size:.74rem;font-weight:700;
  letter-spacing:.04em;text-decoration:none;color:var(--texto3);
  font-family:Montserrat,sans-serif;line-height:1.4;transition:color .12s,background .12s}
.troca-idioma a+a{border-left:1px solid var(--linha)}
.troca-idioma a:hover{color:var(--texto);background:var(--superficie2)}
.troca-idioma a.ativo{color:var(--laranja);background:var(--tinta-laranja)}
.troca-idioma a:focus-visible{outline:2px solid var(--laranja);outline-offset:-2px}

.troca-tema{display:flex;align-items:center;justify-content:center;width:32px;
  height:32px;border:1px solid var(--linha);border-radius:50%;color:var(--texto3);
  text-decoration:none;transition:color .15s,border-color .15s,transform .3s}
.troca-tema:hover{color:var(--laranja);border-color:var(--laranja);transform:rotate(18deg)}
.troca-tema:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

/* a engrenagem já não precisa se empurrar sozinha: os controles fazem isso */
.engrenagem{margin-left:0}

@media (max-width:640px){
  .controles-topo{margin-left:0;order:3}
  .troca-idioma a{padding:5px 8px}
}

/* filtro no cabeçalho da coluna: quem procura "os estudos da Alfa que o João
   fez e ainda estão em rascunho" faz isso em três cliques, sem decorar sintaxe */
.linha-filtros td{padding:6px 10px 10px;border-bottom:1px solid var(--linha)}
.linha-filtros select{width:100%;min-width:110px;background:var(--campo);
  color:var(--texto2);border:1px solid var(--campo-borda);border-radius:7px;
  padding:5px 8px;font-family:inherit;font-size:.8rem;cursor:pointer}
.linha-filtros select:hover{border-color:var(--linha-forte);color:var(--texto)}
.linha-filtros select:focus-visible{outline:2px solid var(--laranja);outline-offset:1px}

/* as duas fontes de irradiação, lado a lado — a escolha muda 13% da geração */
.fontes-sol{margin-bottom:14px}
.tabela-sol{width:auto;margin:8px 0;font-size:.85rem;border-collapse:collapse}
.tabela-sol td{padding:5px 14px 5px 0;border:none;color:var(--texto2)}
.tabela-sol td.num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--texto)}

/* ===========================================================================
   Higiene de interface — 03/10/2026

   Saiu da comparação com o site do Grupo v26, cujo CSS é menos um arquivo de
   estilo que um registro de QA. Os achados de lá são universais, e estes seis
   faltavam aqui. Nenhum muda o visual; todos mudam quem consegue usar o app.
   =========================================================================== */

/* --- 1. a âncora parava atrás da barra fixa -------------------------------
   Doze rotas redirecionam para #faturas, #medicao, #local, #premissas,
   #cenarios e #documentos — e a barra do topo é sticky. Sem isto, subir uma
   fatura levava a tela para um ponto em que a seção de destino ficava
   escondida atrás do menu, e a pessoa achava que nada tinha acontecido.
   A variável --altura-topo já existia no :root, esperando por isto. */
[id]{scroll-margin-top:calc(var(--altura-topo) + 14px)}

/* --- 2. <button> não herda cor no Chromium -------------------------------
   Sem o reset, um <button> sem classe aparece com o texto preto do agente de
   usuário — no tema escuro isso dá cerca de 1,5:1, que é texto invisível. */
button{font:inherit;color:inherit;background:transparent;border:0;
  -webkit-appearance:none;appearance:none;cursor:pointer}
button[disabled],.principal[disabled],.secundario[disabled]{
  opacity:.55;cursor:not-allowed}

/* --- 3. alvo de toque de 44 px ------------------------------------------
   Medida do iOS e do Android para o que um dedo acerta sem mirar. Vale para
   quem usa o app no celular na obra, que é quando mais se erra o clique.

   As exclusões não são capricho — a primeira versão desta regra pegou demais:
   `button{min-height:44px}` transformou o "?" de ajuda do painel (22 x 22,
   border-radius:50%) numa ELIPSE de 22 x 44, e `input{min-height:44px}` esticou
   toda caixa de marcar para 13 x 44. Controle que já é quadrado por desenho não
   quer piso de altura; quer piso nos DOIS lados, que ele já tem. */
button:not(.ajuda):not(.redondo),
.principal,.secundario,.sair,.menu a,.config-lista a,
input[type=submit],input[type=button],
select,textarea,
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]){
  min-height:44px}
.principal.pequeno,.secundario.pequeno{min-height:36px}  /* ação acessória, lado a lado */

/* --- 4. campo com menos de 16 px faz o iOS dar zoom ----------------------
   Ao focar um campo com fonte menor, o Safari aproxima a tela e não volta — a
   pessoa perde o lugar e tem de recompor a página com o dedo.

   Duas correções sobre a primeira tentativa, que era INERTE:

   1. `input{font-size:16px}` perdia no cascade para as 47 regras de classe que
      definem fonte menor (`.linha-ia input[type=file]{font-size:.82rem}` e
      companhia). A regra existia e não alcançava um único campo do app.
   2. Forçar 16px no desktop engordaria formulários inteiros sem motivo — o
      zoom automático é um comportamento do Safari no celular.

   Por isso: só em tela pequena, e com !important, que aqui é o uso legítimo —
   uma correção de PLATAFORMA que precisa vencer uma escolha de design. */
@media (max-width:860px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{font-size:16px!important}
}

/* --- 5. quem pediu menos movimento recebe menos movimento ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* --- 6. pular para o conteúdo -------------------------------------------
   Quem navega por teclado passava pelo menu inteiro, em toda tela, antes de
   chegar ao que interessa. Fica fora da tela até receber foco. */
.pular{position:absolute;left:12px;top:-80px;z-index:100;
  padding:10px 16px;border-radius:8px;
  background:var(--superficie);color:var(--texto);
  border:1px solid var(--laranja);font-weight:700;
  transition:top .15s}
.pular:focus{top:10px}

/* ------------------------------------------------- escolha entre dois caminhos
   Cartão clicável inteiro, não um link no meio do texto: o alvo é o cartão, e
   alvo de 44px é o mínimo que se acerta no celular sem mirar. */
.cartao-escolha{display:block;background:var(--superficie2);border:1px solid var(--linha);
  border-radius:12px;padding:20px;text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s}
.cartao-escolha:hover,.cartao-escolha:focus-visible{border-color:var(--laranja);
  background:var(--superficie)}
.cartao-escolha:focus-visible{outline:2px solid var(--laranja);outline-offset:2px}
.cartao-escolha p{font-size:.88rem;line-height:1.5}
@media (max-width:860px){.cartao-escolha{padding:16px}}

/* ------------------------------------------------- catálogo de cargas típicas
   Escolher do catálogo é mais rápido e erra menos que digitar, mas a lista é de
   38 itens: ela fica atrás de um <details> para não empurrar a tabela para fora
   da tela de quem já sabe o que vai digitar. */
.catalogo-cargas{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;
  padding:12px;background:var(--superficie2);border:1px solid var(--linha);
  border-radius:10px}
.catalogo-grupo{display:flex;flex-direction:column;gap:4px;min-width:200px}
.catalogo-item{background:none;border:1px solid var(--linha);border-radius:6px;
  padding:6px 9px;text-align:left;font-size:.82rem;color:var(--texto2);
  cursor:pointer;min-height:32px}
.catalogo-item:hover,.catalogo-item:focus-visible{border-color:var(--laranja);
  color:var(--texto)}
.rolagem-lateral{overflow-x:auto}
@media (max-width:860px){.catalogo-grupo{min-width:100%}}