/* ==========================================================================
   GD NEXUS - Gestão Inteligente de Geração Distribuída
   Folha única. Sem framework.

   Convenção de cor herdada da planilha:
     AMARELO  = campo que o responsável técnico digita
     BRANCO   = campo que vem de cadastro (só seleciona)
     CINZA    = campo que será calculado na Fase 2 (não editável)

   Marca GD NEXUS (25/09/2026): azul-escuro #1A365D no nome e nos fundos de
   destaque, ciano #00B4D8 nos detalhes que remetem à energia, cinza-chumbo
   nos textos de apoio. O amarelo dos campos é convenção de planilha, e não
   marca: ele continua.
   ========================================================================== */

:root {
  /* ---------- cor ----------
     As cores da marca GD NEXUS. Estas valem no papel; a tela usa as do bloco
     @media screen, mais abaixo, nos dois temas. */
  --tinta:            #1A365D;
  --tinta-profunda:   #11243F;
  --tinta-media:      #0A6F93;
  --acento:           #00B4D8;
  --acento-profundo:  #0087A3;
  --acento-fundo:     #E0F6FB;
  --papel:            #F4F7FA;
  --papel-fundo:      #E8F2F8;

  --texto:            #1F2D3D;
  --texto-fraco:      #4A5563;
  --texto-apagado:    #7A8594;

  --borda:            #E6ECF1;
  --borda-forte:      #D3DCE5;
  --branco:           #FFFFFF;

  /* A convencao da planilha nao muda: amarelo e campo que ele digita.
     Só o tom ficou mais suave, para conversar com o resto. */
  --campo-fundo:      #FFFBF2;
  --campo-borda:      #E3C58C;
  --campo-foco:       #FFF3D6;

  --cinza-fase2:      #ECEFF4;   /* precisa se ler como campo inerte */

  --vermelho:         #C8493C;
  --vermelho-fundo:   #FCEEEC;
  --ambar:            #C98A2E;
  --ambar-fundo:      #FDF6EA;
  --verde:            #3F8F63;
  --verde-fundo:      #EDF6F1;

  /* Inter e Manrope vem do Google Fonts, no index.html. O resto da pilha e
     socorro: se a rede falhar, cai em fonte de sistema e o desenho segura. */
  --ui: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --titulo: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  --num: "Inter", "Segoe UI", Consolas, monospace;

  /* ---------- geometria ----------
     Trocar a cara do sistema e mexer daqui para baixo. */
  --r:        14px;   /* cartao, painel, bloco */
  --r-campo:   8px;   /* campo, botao, aba */
  --r-mini:    7px;   /* caixinha pequena, aviso */
  --r-pilula: 999px;  /* etiqueta */

  --sombra:      0 1px 2px rgba(26,54,93,.04), 0 8px 24px -12px rgba(26,54,93,.10);
  --sombra-leve: 0 1px 2px rgba(26,54,93,.05);
  --sombra-modal: 0 20px 50px -15px rgba(26,54,93,.25);

  --peso-rotulo: 700;

  /* altura da faixa de aviso mais a do topo. O menu cola embaixo dela e o
     quadro desconta ela da altura da tela. */
  --alt-topo: 48px;
  --alt-faixa: 25px;
}

* { box-sizing: border-box; }

/* O atributo hidden esconde de verdade. Sem isto, qualquer regra de display
   escrita depois (a gaveta e o fundo do modal são flex) vence a folha do
   navegador e o elemento fica visível mesmo escondido. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--papel);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- faixa de protótipo ---------- */

.faixa-prototipo {
  background: var(--tinta-profunda);
  color: #B9C7E0;
  font-size: 11px;
  letter-spacing: .3px;
  padding: 4px 14px;
  text-align: center;
  border-bottom: 1px solid #123;
}

/* ---------- topo ---------- */

/* O topo fica preso no alto da janela: antes ele subia junto com a página e
   ele tinha de voltar lá em cima para usar a busca ou trocar de perfil. */
.topo {
  background: var(--tinta);
  color: #fff;
  display: flex;
  align-items: stretch;
  border-bottom: 3px solid var(--tinta-profunda);
  min-height: 48px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 4px 12px;
  border-right: 1px solid rgba(255,255,255,.16);
  flex: 0 0 auto;
  text-decoration: none;
}
.marca:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.marca img { height: 40px; width: auto; display: block; }
.marca-sub {
  font-size: 9px;
  letter-spacing: 2.2px;
  color: #A9BCD1;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;          /* a quebra é a do <br>, não a da caixa */
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: 10px;
  flex: 0 0 auto;
}

.topo-busca {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 0 14px;
  min-width: 0;
}
.topo-busca input {
  width: 100%;
  max-width: 460px;
  background: #08224F;
  border: 1px solid #2A4B8A;
  color: #fff;
  font-family: var(--ui);
  font-size: 12.5px;
  padding: 5px 9px;
}
.topo-busca input::placeholder { color: #7E95BE; }
.topo-busca input:focus { outline: none; border-color: var(--acento); }

/* ---------- sino do comentário novo ---------- */
.topo-sino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 30px; margin-left: 8px;
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: #C9D8F2; cursor: pointer;
}
.topo-sino:hover { background: #08224F; border-color: #2A4B8A; color: #fff; }
.topo-sino .ic { width: 19px; height: 19px; }
.topo-sino.tem { color: #fff; }
.sino-cont {
  position: absolute; top: 0; right: 0;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--vermelho); color: #fff;
  font-family: var(--num); font-size: 10px; line-height: 15px; text-align: center;
  border-radius: 999px;
}
.cartao-novos {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  background: var(--vermelho); color: #fff;
  font-family: var(--num); font-size: 10.5px; line-height: 15px; border-radius: 999px;
  vertical-align: 1px;
}
.avisos { display: flex; flex-direction: column; gap: 6px; }
.aviso-linha {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 8px 10px; background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--r-mini); cursor: pointer;
  font-family: var(--ui); font-size: 12.5px; color: var(--texto);
}
.aviso-linha:hover { border-color: var(--borda-forte); background: var(--papel); }
.aviso-qtd {
  flex: 0 0 auto; min-width: 20px; padding: 0 6px;
  background: var(--vermelho); color: #fff; border-radius: 999px;
  font-family: var(--num); font-size: 11px; line-height: 18px; text-align: center;
}
.aviso-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-sub { font-size: 11px; color: var(--texto-fraco); }
.aviso-texto { color: var(--texto-fraco); }

.topo-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,.16);
  flex: 0 0 auto;
}
.topo-perfil label {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #A9BCD1;
  text-transform: uppercase;
}
.topo-perfil select {
  background: #08224F;
  color: #fff;
  border: 1px solid #2A4B8A;
  font-family: var(--ui);
  font-size: 12.5px;
  padding: 4px 6px;
  max-width: 210px;
}
.topo-perfil select:focus { outline: none; border-color: var(--acento); }

/* ---------- estrutura ---------- */

.corpo {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 48px - 24px);
}

/* o menu cola logo abaixo do topo e acompanha a rolagem, com rolagem
   própria se um dia a lista passar da altura da tela */
.lateral {
  flex: 0 0 228px;
  background: var(--branco);
  border-right: 1px solid var(--borda);
  padding: 10px 8px 24px;
  position: sticky;
  top: var(--alt-topo);
  align-self: flex-start;
  max-height: calc(100vh - var(--alt-topo));
  overflow-y: auto;
  z-index: 20;
}
.lateral-grupo {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-apagado);
  padding: 14px 10px 5px;
}
/* o item inteiro é a pilha: desenho, nome e contagem. A pílula é o item, e
   não uma barra colada na borda, que destoava do resto da tela. */
.lateral a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 1px;
  color: var(--texto);
  border-radius: 10px;
  font-size: 13px;
}
.lateral a .rot {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lateral a .ic {
  width: 18px; height: 18px; flex: 0 0 18px;
  color: var(--texto-apagado);
}
.lateral a:hover { background: var(--papel); text-decoration: none; }
.lateral a:hover .ic { color: var(--texto-fraco); }
.lateral a.ativo {
  background: var(--papel-fundo);
  color: var(--tinta-media);
  font-weight: 600;
}
.lateral a.ativo .ic { color: var(--tinta-media); }
/* a contagem também é pílula, como no desenho */
.lateral a .contagem {
  flex: 0 0 auto;
  background: var(--papel-fundo);
  color: var(--tinta-media);
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 17px;
  padding: 0 7px;
  border-radius: var(--r-pilula);
}
.lateral a.ativo .contagem { background: var(--branco); }

/* barra de rolagem fina, senão ela come a largura do nome do item */
.lateral::-webkit-scrollbar { width: 8px; }
.lateral::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--r-pilula);
}
.lateral::-webkit-scrollbar-track { background: transparent; }

.conteudo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 18px 40px;
}

/* ---------- cabeçalho de tela ---------- */

.tela-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 7px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tela-titulo {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.3px;
  margin: 0;
}
.tela-sub {
  color: var(--texto-fraco);
  font-size: 12px;
  margin-top: 1px;
}
.tela-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

.migalha {
  font-size: 11.5px;
  color: var(--texto-fraco);
  margin-bottom: 3px;
}
.migalha a { color: var(--texto-fraco); }

/* ---------- botões ---------- */

.bt {
  font-family: var(--ui);
  font-size: 12.5px;
  padding: 5px 11px;
  border: 1px solid var(--borda-forte);
  background: var(--branco);
  color: var(--texto);
  cursor: pointer;
  line-height: 1.3;
}
.bt:hover { background: var(--papel-fundo); }
.bt:active { background: var(--borda); }
.bt-principal {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}
.bt-principal:hover { background: var(--tinta-media); }
.bt-perigo { color: var(--vermelho); border-color: #D3A9A7; }
.bt-perigo:hover { background: var(--vermelho-fundo); }
.bt-mini { font-size: 11.5px; padding: 2px 7px; }
.bt[disabled], .bt[disabled]:hover {
  background: var(--cinza-fase2);
  color: var(--texto-apagado);
  border-color: var(--borda);
  cursor: not-allowed;
}

.grupo-bt { display: inline-flex; }
.grupo-bt .bt { border-right-width: 0; }
.grupo-bt .bt:last-child { border-right-width: 1px; }
.grupo-bt .bt.ativo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

/* ---------- tabelas ---------- */

.tabela-caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  overflow-x: auto;
}
table.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.tabela th {
  background: var(--papel-fundo);
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--tinta);
  padding: 5px 9px;
  border-bottom: 1px solid var(--borda-forte);
  border-right: 1px solid var(--borda);
  white-space: nowrap;
}
table.tabela th:last-child, table.tabela td:last-child { border-right: 0; }
table.tabela td {
  padding: 4px 9px;
  border-bottom: 1px solid var(--papel-fundo);
  border-right: 1px solid var(--papel-fundo);
  vertical-align: top;
}
table.tabela tbody tr:hover td { background: #FAFCFF; }
table.tabela tbody tr.clicavel { cursor: pointer; }
table.tabela .num, table.tabela th.num {
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.tabela .cod {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.tabela tfoot td {
  background: var(--papel-fundo);
  border-top: 1px solid var(--borda-forte);
  font-weight: 500;
}
.tabela-vazia {
  padding: 18px;
  color: var(--texto-fraco);
  font-size: 12.5px;
  background: var(--branco);
  border: 1px solid var(--borda);
}

/* ---------- formulários ---------- */

.form-secao {
  background: var(--branco);
  border: 1px solid var(--borda);
  margin-bottom: 12px;
}
.form-secao > h3 {
  margin: 0;
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel-fundo);
  border-bottom: 1px solid var(--borda);
  padding: 5px 10px;
  font-weight: 500;
}
.form-grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}
.campo {
  grid-column: span 3;
  border-right: 1px solid var(--papel-fundo);
  border-bottom: 1px solid var(--papel-fundo);
  padding: 6px 10px 8px;
  min-width: 0;
}
.campo.c1  { grid-column: span 1; }
.campo.c2  { grid-column: span 2; }
.campo.c3  { grid-column: span 3; }
.campo.c4  { grid-column: span 4; }
.campo.c5  { grid-column: span 5; }
.campo.c6  { grid-column: span 6; }
.campo.c7  { grid-column: span 7; }
.campo.c8  { grid-column: span 8; }
.campo.c9  { grid-column: span 9; }
.campo.c10 { grid-column: span 10; }
.campo.c11 { grid-column: span 11; }
.campo.c12 { grid-column: span 12; }
.campo > label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 3px;
  line-height: 1.25;
  min-height: 2.5em;      /* duas linhas: mantém os campos alinhados na grade */
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 4px;
}
.campo > label .obr { color: var(--vermelho); }

input[type=text], input[type=date], input[type=number], input[type=email],
input[type=search], select, textarea {
  width: 100%;
  font-family: var(--ui);
  font-size: 13px;
  padding: 4px 7px;
  border: 1px solid var(--borda-forte);
  background: var(--branco);
  color: var(--texto);
}
textarea { resize: vertical; min-height: 52px; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--tinta-media);
  outline-offset: -2px;
}

/* AMARELO = digitado pelo responsável técnico */
input.digitado, textarea.digitado {
  background: var(--campo-fundo);
  border-color: var(--campo-borda);
}
input.digitado:focus, textarea.digitado:focus { background: var(--campo-foco); }
select.digitado {
  background: var(--campo-fundo);
  border-color: var(--campo-borda);
}
/* BRANCO = vem de cadastro */
select.decadastro { background: var(--branco); }

.grade-equip {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) { .grade-equip { grid-template-columns: 1fr; } }

input.num, .campo input.num {
  text-align: right;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}

.legenda-cor {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--texto-fraco);
  padding: 6px 10px;
  background: var(--papel);
  border-top: 1px solid var(--borda);
}
.legenda-cor span { display: inline-flex; align-items: center; gap: 5px; }
.amostra {
  width: 12px; height: 12px; display: inline-block; border: 1px solid var(--borda-forte);
}
.amostra.am { background: var(--campo-fundo); border-color: var(--campo-borda); }
.amostra.br { background: var(--branco); }
.amostra.ci { background: var(--cinza-fase2); }

.bloco-fase2 {
  background: var(--cinza-fase2);
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  padding: 9px 10px;
  font-size: 12px;
}
.bloco-fase2 .etiqueta {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--texto-apagado);
}

/* ---------- formulário em etapas ---------- */

.passos {
  display: flex;
  border: 1px solid var(--borda);
  background: var(--branco);
  margin-bottom: 12px;
  overflow-x: auto;
}
.passo {
  flex: 1 1 0;
  min-width: 132px;
  padding: 6px 10px 7px;
  border-right: 1px solid var(--borda);
  border-top: 3px solid transparent;
  background: none;
  font-family: var(--ui);
  text-align: left;
  cursor: pointer;
  color: var(--texto-fraco);
}
.passo:last-child { border-right: 0; }
.passo:hover { background: var(--papel); }
.passo .n {
  display: block;
  font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--texto-apagado);
}
.passo .t { display: block; font-size: 12.5px; line-height: 1.25; }
.passo.ativo .n { color: var(--tinta-media); }
.passo[disabled] { opacity: .55; cursor: not-allowed; }
.passo.ativo {
  border-top-color: var(--acento);
  background: var(--papel-fundo);
  color: var(--tinta);
  font-weight: 500;
}
.passo.pronto .n::after { content: ' ·'; }

.contador-etapa {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--texto-fraco);
  letter-spacing: .4px;
}

.barra-navegacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--borda);
  border-top: 1px solid var(--borda-forte);
  background: var(--branco);
  padding: 8px 10px;
  margin-top: -1px;
  flex-wrap: wrap;
}
.barra-navegacao .lado { display: flex; gap: 6px; align-items: center; }

/* ---------- bloco de cálculo da Fase 2 ---------- */

.fase2-secao {
  border: 1px solid var(--borda);
  background: var(--cinza-fase2);
  margin-bottom: 12px;
}
.fase2-secao > h3 {
  margin: 0;
  font-family: var(--ui);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  background: #E4E9F1;
  border-bottom: 1px solid var(--borda);
  padding: 5px 10px;
  font-weight: 500;
}
.fase2-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.fase2-campo {
  padding: 6px 10px 8px;
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  min-width: 0;
}
.fase2-campo label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texto-apagado);
  margin-bottom: 3px;
  line-height: 1.25;
  min-height: 2.5em;
}
.fase2-campo input {
  width: 100%;
  background: #E3E8F0;
  /* pontilhado com cor propria: a borda forte do tema e clara demais para
     este campo continuar se lendo como vaga de calculo da Fase 2 */
  border: 1px dashed #AFB9C9;
  color: var(--texto-apagado);
  font-family: var(--num);
  font-size: 13px;
  padding: 4px 7px;
  cursor: not-allowed;
}
.fase2-rodape {
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--texto-fraco);
}

/* ---------- datasheet ao lado ---------- */

.datasheet {
  background: var(--branco);
  border: 1px solid var(--borda);
}
.datasheet h4 {
  margin: 0;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel-fundo);
  border-bottom: 1px solid var(--borda);
  padding: 4px 9px;
  font-weight: 500;
}
.datasheet dl { margin: 0; }
.datasheet .par {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 9px;
  border-bottom: 1px solid var(--papel-fundo);
  font-size: 12px;
}
.datasheet .par:last-child { border-bottom: 0; }
.datasheet .par span:first-child { color: var(--texto-fraco); }
.datasheet .par span:last-child {
  font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.datasheet .vazio { padding: 8px 9px; font-size: 12px; color: var(--texto-apagado); }

/* ---------- MPPTs e strings ---------- */

.mppt-bloco { border-bottom: 1px solid var(--borda); }
.mppt-bloco:last-of-type { border-bottom: 0; }
.mppt-cabeca {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 10px 5px;
  background: var(--papel);
  border-bottom: 1px solid var(--papel-fundo);
  flex-wrap: wrap;
}
.mppt-nome {
  font-size: 11.5px; color: var(--tinta); font-weight: 500;
  letter-spacing: .6px;
}
.mppt-acoes { display: flex; gap: 5px; }

.string-linha {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 34px;
  align-items: end;
  border-bottom: 1px solid var(--papel-fundo);
}
.string-linha:last-child { border-bottom: 0; }
.string-linha > div { padding: 5px 10px 7px; border-right: 1px solid var(--papel-fundo); }
.string-linha > div:last-child { border-right: 0; }
.string-nome {
  font-size: 12px; color: var(--texto-fraco);
  display: flex; align-items: center; height: 100%;
}
.string-linha label {
  display: block; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 3px;
}

/* datasheet acompanha a rolagem do formulário */
.coluna-datasheet { position: sticky; top: 8px; }
@media (max-width: 1100px) { .coluna-datasheet { position: static; } }

.dica-campo {
  font-size: 10.5px;
  color: var(--texto-apagado);
  margin-top: 3px;
  line-height: 1.3;
}
input[readonly] {
  background: var(--branco);
  color: var(--texto);
  border: 1px dashed #C6CEDA;
  cursor: default;
}

/* ---------- arquivos ---------- */

.arquivos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.arquivo-caixa {
  border: 1px solid var(--borda);
  background: var(--branco);
  display: flex;
  flex-direction: column;
}
.arquivo-caixa.falta { border-color: var(--borda-forte); background: var(--papel); }
.arquivo-topo {
  padding: 4px 8px 5px;
  border-bottom: 1px solid var(--papel-fundo);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 6px;
}
.arquivo-tipo { font-size: 11.5px; font-weight: 500; line-height: 1.25; }
.arquivo-obs { font-size: 10.5px; color: var(--texto-apagado); }
.miniatura {
  height: 108px;
  background: var(--papel-fundo);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--papel-fundo);
}
.miniatura img { max-width: 100%; max-height: 100%; display: block; }
.miniatura .ext {
  font-family: var(--num);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--texto-apagado);
  border: 1px solid var(--borda-forte);
  background: var(--branco);
  padding: 8px 12px;
}
.miniatura.vazia { background: repeating-linear-gradient(45deg, #EFF3F9, #EFF3F9 6px, #E7ECF5 6px, #E7ECF5 12px); }
.miniatura.vazia span { font-size: 11.5px; color: var(--texto-apagado); }

/* documento que o sistema vai gerar na Fase 2 */
.arquivo-caixa.sistema { background: var(--cinza-fase2); border-color: var(--borda); }
.arquivo-caixa.sistema .arquivo-tipo { color: var(--texto-fraco); }
.arquivo-caixa.sistema .arquivo-pe { color: var(--texto-apagado); }
.miniatura.sistema {
  background: #E4E9F1;
  border: 1px dashed var(--borda-forte);
  margin: 0 8px;
  text-align: center;
}
.miniatura.sistema span {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--texto-apagado); line-height: 1.6;
}
.arquivo-pe { padding: 5px 8px 6px; font-size: 11px; color: var(--texto-fraco); }
.arquivo-pe .nome {
  font-family: var(--num); font-size: 11px; word-break: break-all; color: var(--texto);
}
.arquivo-acoes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.marca-visivel {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 4px 8px; border-top: 1px solid var(--papel-fundo); color: var(--texto-fraco);
}

.tag-abre { cursor: pointer; }
.tag-abre:hover { filter: brightness(.96); text-decoration: underline; }

/* ---------- relatório por etapa ---------- */
.bt-so-icone { padding-left: 9px; padding-right: 9px; }
.bt-so-icone .ic { display: block; width: 18px; height: 18px; }
.bt-engrenagem { margin-right: auto; padding-left: 9px; padding-right: 9px; opacity: .7; }
.bt-engrenagem:hover { opacity: 1; }
.bt-engrenagem .ic { display: block; width: 17px; height: 17px; }
.rel-secoes { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 8px; }
.rel-secao { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.rel-secao .bolinha { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.rel-oculto { display: none; }
.folha-relatorio { padding: 40px 44px; }
.folha-relatorio pre {
  margin: 0;
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #101418;
}

/* ---------- histórico de alterações ---------- */
.hist-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.hist-linha {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 10px; background: var(--branco);
  border: 1px solid var(--borda); border-radius: var(--r-mini);
  font-size: 12.5px;
}
.hist-quando {
  flex: 0 0 auto; font-family: var(--num); font-size: 11.5px;
  color: var(--texto-fraco); white-space: nowrap;
}
.hist-texto { flex: 1 1 auto; min-width: 0; }
.hist-campo { color: var(--texto-fraco); }
.hist-seta { color: var(--texto-fraco); padding: 0 2px; }
.hist-vazio { color: var(--texto-fraco); font-style: italic; }
.hist-quem { display: block; color: var(--texto-fraco); font-size: 11.5px; }
.hist-perfil { color: var(--texto-fraco); }
.modal .hist-lista { max-height: 52vh; overflow: auto; }

/* ---------- arquivo do INMETRO no cadastro ---------- */
.inmetro-caixa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--branco); border: 1px solid var(--borda); padding: 8px 10px;
}
.inmetro-caixa .mono { flex: 1 1 180px; min-width: 0; word-break: break-all; }
.inmetro-acoes { display: flex; gap: 6px; flex: 0 0 auto; }

.faltantes {
  border-left: 3px solid var(--ambar);
  background: var(--ambar-fundo);
  color: var(--ambar);
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.faltantes.completo {
  border-left-color: var(--verde); background: var(--verde-fundo); color: var(--verde);
}
.faltantes b { font-weight: 500; }

.uso-espaco {
  font-size: 11px; color: var(--texto-apagado); margin-top: 8px;
}
.uso-barra {
  height: 6px; background: var(--papel-fundo); border: 1px solid var(--borda);
  margin-top: 3px; max-width: 320px;
}
.uso-barra i { display: block; height: 100%; background: var(--borda-forte); }
.uso-barra i.cheio { background: var(--vermelho); }

/* ---------- resumo do projeto ---------- */

.resumo-bloco { margin-bottom: 12px; }
.resumo-topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 3px; margin-bottom: 7px;
}
.resumo-topo h2 {
  margin: 0; font-family: var(--ui); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--tinta); font-weight: 500;
}
.rodape-fase2 {
  border: 1px solid var(--borda);
  background: var(--branco);
  padding: 10px;
  margin-top: 16px;
}
.rodape-fase2 .titulo {
  font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 7px;
}
.rodape-fase2 .botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.bt-fase2 {
  display: inline-flex; align-items: center; gap: 6px;
}
.bt-fase2::after {
  content: 'Em construção';
  font-size: 9.5px; letter-spacing: .6px; text-transform: none; font-weight: 500;
  border: 1px solid var(--borda-forte);
  background: var(--papel-fundo);
  color: var(--texto-apagado);
  padding: 0 4px;
  line-height: 15px;
}

/* ---------- números do início ---------- */

/* quatro cartões soltos, com respiro entre eles, e não uma tira só com
   divisórias: é o que faz o canto arredondado aparecer quatro vezes em vez
   de duas. */
.painel-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  border: 0;
  background: none;
  margin-bottom: 12px;
}
.numero {
  padding: 11px 14px 12px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r);
}
.numero .rot {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.numero .val {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--tinta);
}
.numero .val .un { font-size: 12px; color: var(--texto-fraco); font-weight: 400; margin-left: 3px; }
.numero .obs { font-size: 11px; color: var(--texto-apagado); }

/* ---------- quadro ---------- */

.barra-filtros {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: var(--branco);
  border: 1px solid var(--borda);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.filtro {
  padding: 5px 10px 6px;
  border-right: 1px solid var(--papel-fundo);
  min-width: 0;
}
.filtro:last-child { border-right: 0; }
.filtro label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 2px;
}
.filtro select, .filtro input { font-size: 12.5px; padding: 3px 6px; min-width: 148px; }
.filtro.crescer { flex: 1 1 auto; }
.filtro.crescer input { width: 100%; min-width: 0; }
.filtro.direita { margin-left: auto; display: flex; align-items: flex-end; gap: 6px; }

.quadro {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* rolagem por toque no celular */
  align-items: stretch;
  border: 1px solid var(--borda);
  background: var(--papel-fundo);
  padding-bottom: 2px;
  cursor: grab;
}
.quadro.arrastando-lado {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.quadro.arrastando-lado .cartao { cursor: grabbing; }
/* A coluna acompanha a altura do quadro e os cartões rolam DENTRO dela, como
   no Trello. Antes a coluna crescia sem fim e ele tinha de rolar a página
   inteira para ver o pé de uma etapa cheia. */
.coluna {
  flex: 0 0 230px;
  border-right: 1px solid var(--borda);
  background: var(--papel);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  min-width: 0;
}

/* ---------- a aba Quadro ocupa a janela ----------
   Com isto a página não rola no quadro: quem rola é a coluna, por dentro.
   A marca entra no body quando a tela desenha o quadro, e sai em qualquer
   outra tela. */
body.quadro-cheio .corpo {
  height: calc(100vh - var(--alt-topo) - var(--alt-faixa));
  min-height: 0;
}
body.quadro-cheio .conteudo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 12px;
}
/* numa coluna flex todo mundo encolhe. Aqui só o quadro pode: o resto tem
   tamanho próprio, senão a barra de filtros é espremida e o botão que quebra
   para a segunda linha é cortado. */
body.quadro-cheio .conteudo > * { flex: 0 0 auto; }
body.quadro-cheio .quadro {
  flex: 1 1 auto;
  min-height: 180px;
}
/* o recado do pé continua visível, e não encolhe */
body.quadro-cheio .conteudo > .nota { flex: 0 0 auto; margin-bottom: 0; }
/* no celular a tela é curta demais para travar a altura: volta a rolar */
@media (max-width: 860px) {
  body.quadro-cheio .corpo { height: auto; }
  body.quadro-cheio .conteudo { display: block; overflow: visible; }
  .coluna { max-height: none; }
}
.coluna:last-child { border-right: 0; }
.coluna.alvo { background: var(--campo-foco); }
.coluna-topo {
  position: sticky;
  top: 0;
  background: var(--papel-fundo);
  border-bottom: 1px solid var(--borda-forte);
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.coluna-nome {
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tinta);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.coluna-nome i {
  width: 8px; height: 8px; flex: 0 0 8px; display: inline-block;
  border: 1px solid rgba(0,0,0,.25);
}
.coluna-cont {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--texto-fraco);
}
.coluna-lista {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 60px;
}
/* barra de rolagem discreta, para não pesar dentro de cada coluna */
.coluna-lista::-webkit-scrollbar { width: 8px; }
.coluna-lista::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--r-pilula);
}
.coluna-lista::-webkit-scrollbar-track { background: transparent; }

/* ---------- as colunas são as etapas: controles no próprio quadro ---------- */

.coluna-topo[draggable="true"] { cursor: grab; }
.coluna-topo[draggable="true"]:active { cursor: grabbing; }
.coluna.coluna-arrastando { opacity: .45; }

.cn-texto { cursor: text; border-bottom: 1px dashed transparent; }
.coluna-topo:hover .cn-texto { border-bottom-color: var(--borda-forte); }

.cn-input {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 1px 4px;
  width: 100%;
  min-width: 0;
}

.marca-etapa {
  display: inline-block;
  width: 13px; height: 13px; line-height: 12px;
  margin-left: 3px;
  border: 1px solid var(--borda-forte);
  background: var(--branco);
  color: var(--texto-fraco);
  font-family: var(--num);
  font-size: 8.5px;
  font-style: normal;
  text-align: center;
  vertical-align: 1px;
}

.col-menu {
  background: none;
  border: 1px solid transparent;
  color: var(--texto-apagado);
  font-size: 13px;
  line-height: 1;
  padding: 1px 4px;
  cursor: pointer;
  font-family: var(--ui);
}
.col-menu:hover { border-color: var(--borda-forte); background: var(--branco); }

.coluna-nova {
  flex: 0 0 168px;
  display: flex;
  align-items: flex-start;
  padding: 5px;
}
.bt-nova-coluna {
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed var(--borda-forte);
  background: var(--papel);
  color: var(--tinta-media);
  font-family: var(--ui);
  font-size: 12.5px;
  cursor: pointer;
}
.bt-nova-coluna:hover { background: var(--branco); border-color: var(--tinta-media); }

input[type=color].cor-etapa {
  width: 100%; height: 27px; padding: 1px 2px;
  border: 1px solid var(--campo-borda); background: var(--campo-fundo);
}

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  padding: 6px 8px 7px;
  cursor: pointer;
  font-size: 12px;
}
.cartao:hover { border-color: var(--borda-forte); background: #FCFDFF; }
/* ligação nova e acréscimo no quadro: o tipo escrito em cima do nome */
.cartao-tipo {
  display: inline-block; margin-bottom: 4px; padding: 1px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: #6A1B9A; background: #F3E8FA; border-radius: 999px;
}
.cartao.arrastando { opacity: .4; }
.cartao-titular {
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.28;
  margin-bottom: 2px;
  word-break: break-word;
}
.cartao-linha {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--texto-fraco);
  font-size: 11.5px;
}
.cartao-linha .n {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  white-space: nowrap;
}
.cartao-rodape {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--papel-fundo);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--texto-apagado);
}
.cartao-empresa { color: var(--tinta-media); }

/* ---------- sinalização ---------- */

.tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .4px;
  padding: 0 5px;
  border: 1px solid;
  line-height: 16px;
  white-space: nowrap;
}
.tag-ok    { color: var(--verde);    border-color: #A9CDB6; background: var(--verde-fundo); }
.tag-alerta{ color: var(--ambar);    border-color: #DCC182; background: var(--ambar-fundo); }
.tag-grave { color: var(--vermelho); border-color: #D9AFAD; background: var(--vermelho-fundo); }
.tag-neutro{ color: var(--texto-fraco); border-color: var(--borda-forte); background: var(--papel); }

tr.linha-grave td { background: var(--vermelho-fundo) !important; }
tr.linha-alerta td { background: var(--ambar-fundo) !important; }
.grave { color: var(--vermelho); font-weight: 500; }
.alerta { color: var(--ambar); }

.ponto {
  width: 8px; height: 8px; display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: 0;
}

/* ---------- gaveta lateral (detalhe) ---------- */

.gaveta-fundo {
  position: fixed; inset: 0; background: rgba(6,18,35,.34); z-index: 40;
}
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 100%;
  background: var(--papel);
  border-left: 3px solid var(--tinta);
  z-index: 41;
  display: flex;
  flex-direction: column;
}
.gaveta-topo {
  background: var(--tinta);
  color: #fff;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.gaveta-topo .rot { font-size: 10px; letter-spacing: 1.6px; color: #A9BCD1; text-transform: uppercase; }
.gaveta-topo .tit { font-size: 15px; font-weight: 500; line-height: 1.25; }
.gaveta-corpo { overflow-y: auto; padding: 12px; flex: 1 1 auto; }
.fechar {
  background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
  font-size: 15px; line-height: 1; padding: 3px 8px; cursor: pointer; font-family: var(--ui);
}
.fechar:hover { background: rgba(255,255,255,.12); }

/* ---------- lista de definições (dados em leitura) ---------- */

.dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--borda);
  background: var(--branco);
}
.dl > div {
  padding: 5px 9px 6px;
  border-right: 1px solid var(--papel-fundo);
  border-bottom: 1px solid var(--papel-fundo);
  min-width: 0;
}
.dl > div.larga { grid-column: span 2; }
.dl dt {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 1px;
}
.dl dd { margin: 0; font-size: 12.5px; word-break: break-word; }
.dl dd.n { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* ---------- modal ---------- */

.modal-fundo {
  position: fixed; inset: 0; background: rgba(6,18,35,.42);
  z-index: 50; display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 12px; overflow-y: auto;
}
.modal {
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-top: 3px solid var(--tinta);
  width: 100%;
  max-width: 880px;
}
.modal.estreito { max-width: 460px; }
.modal-topo {
  background: var(--papel-fundo);
  border-bottom: 1px solid var(--borda);
  padding: 7px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.modal-topo h2 {
  margin: 0; font-family: var(--titulo); font-weight: 600; font-size: 16px; letter-spacing: -.2px;
}
.modal-topo .fechar { border-color: var(--borda-forte); color: var(--texto); }
.modal-topo .fechar:hover { background: var(--borda); }
.modal-corpo { padding: 12px; max-height: calc(100vh - 190px); overflow-y: auto; }
.modal-rodape {
  border-top: 1px solid var(--borda);
  background: var(--branco);
  padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.modal-rodape .obs { font-size: 11.5px; color: var(--texto-fraco); }
.modal-rodape .lado { display: flex; gap: 6px; }

/* ---------- aviso ---------- */

.aviso {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: var(--tinta-profunda); color: #fff;
  border-left: 3px solid var(--acento);
  padding: 7px 14px; font-size: 12.5px; z-index: 60; max-width: 90vw;
}

/* ==========================================================================
   PAINEL, GRÁFICOS, MAPA, FINANCEIRO E LINKS
   ========================================================================== */

/* ---------- grade do painel ---------- */

.grade-painel {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 12px;
  /* stretch, e não start: o cartão do anel acompanha a altura do gráfico de
     barras. Antes ele parava no meio e sobrava um vazio embaixo. */
  align-items: stretch;
  margin-bottom: 4px;
}
.grade-painel > * { min-width: 0; }
@media (max-width: 1100px) { .grade-painel { grid-template-columns: 1fr; } }

.cartao-grafico {
  background: var(--branco);
  border: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
}
.cg-topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 13px 16px 4px;
  border-bottom: 0;
  background: none;
}
.cg-topo h2 {
  margin: 0; font-family: var(--ui); font-size: 10.5px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--tinta); font-weight: 500;
}
.cg-obs { font-size: 11px; color: var(--texto-fraco); }
.cg-divisa {
  font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--texto-fraco);
  border-top: 1px solid var(--papel-fundo);
  padding: 6px 10px 0;
}
.cg-tabela { border-top: 1px solid var(--borda); }
.cg-tabela summary {
  padding: 5px 10px; font-size: 11.5px; color: var(--tinta-media); cursor: pointer;
  list-style: none;
}
.cg-tabela summary::-webkit-details-marker { display: none; }
.cg-tabela summary::before { content: '+ '; font-family: var(--num); }
.cg-tabela[open] summary::before { content: '- '; }
.cg-tabela .tabela-caixa { border-left: 0; border-right: 0; border-bottom: 0; }

/* ---------- gráficos ---------- */

svg.gr { display: block; width: 100%; height: auto; padding: 4px 8px 0; }
.gr-eixo {
  font-family: var(--num); font-size: 9.5px; fill: var(--texto-apagado);
  font-variant-numeric: tabular-nums;
}
.gr-eixo.forte { fill: var(--tinta); font-weight: 700; }
.gr-valor {
  font-family: var(--num); font-size: 9.5px; fill: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
.gr-valor-linha {
  fill: var(--tinta); font-weight: 700; font-size: 10.5px;
  paint-order: stroke; stroke: var(--branco); stroke-width: 3.5px; stroke-linejoin: round;
}
.gr-barra { cursor: default; }
.bt-dias {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
.gr-linha { pointer-events: none; }
.gr-ponto { cursor: default; }
.gr-ponto:hover { r: 5; }
.gr-eixo.eixo-linha { fill: var(--tinta); }
.gr-eixo-rot {
  font-family: var(--ui); font-size: 9px; letter-spacing: 1.1px;
  text-transform: uppercase; fill: var(--texto-apagado);
}
.gr-eixo-rot.eixo-linha { fill: var(--tinta-media); }
.gr-legenda i.marca-linha {
  height: 3px; border: 0; border-radius: 2px; align-self: center;
}
.gr-barra:hover { fill-opacity: .82; }
.gr-fatia { cursor: default; }
.gr-fatia:hover { stroke-opacity: .82; }
.gr-centro {
  font-family: var(--ui); font-size: 30px; font-weight: 500; fill: var(--tinta);
}
.gr-centro-rot {
  font-family: var(--ui); font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; fill: var(--texto-apagado);
}

.gr-legenda {
  list-style: none; margin: 0; padding: 6px 16px 2px;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 11.5px;
}
/* nowrap de propósito: a legenda comum quebra em várias linhas, mas em
   coluna o wrap fazia cada linha ficar da largura do maior nome, e o item
   esticava para além da lista. O valor em dinheiro ia parar fora do cartão. */
.gr-legenda.coluna { flex-direction: column; flex-wrap: nowrap;
  gap: 1px; padding: 4px 10px; flex: 1 1 auto; }
.gr-legenda li { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* bolinha, e não quadradinho, que pesava demais ao lado do texto */
.gr-legenda i {
  width: 9px; height: 9px; flex: 0 0 9px; display: inline-block;
  border-radius: 50%;
  border: 0;
}
.gr-legenda .rot { color: var(--texto-fraco); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gr-legenda.coluna .rot { flex: 1 1 auto; }
.gr-legenda .val {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--texto); white-space: nowrap;
}

.anel-com-legenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 4px 12px;
  flex-wrap: wrap;
  /* ocupa a altura que sobra do cartão, com o conteúdo centrado */
  flex: 1 1 auto;
}
/* O anel cresce com a largura do cartão, mas não a ponto de expulsar a legenda
   para baixo: os dois têm de caber lado a lado. A altura que sobra some no
   centramento, não em espaço branco no pé do cartão. */
.anel-com-legenda svg.gr {
  flex: 0 1 190px;
  width: auto;
  min-width: 140px;
  max-width: 240px;
  align-self: center;
  padding: 0;
}
.anel-com-legenda .gr-legenda.coluna {
  flex: 1 1 165px;
  min-width: 150px;
  /* em tela larga a legenda para de esticar: nome e número ficam perto.
     A folga maior é por causa do financeiro, onde o valor é dinheiro e não
     contagem: "R$ 1.970,00" não cabia no espaço pensado para "3". */
  max-width: 420px;
  align-self: center;
  gap: 3px;
}
/* o nome cede primeiro; o valor nunca é cortado */
.anel-com-legenda .gr-legenda.coluna .rot { flex: 1 1 auto; min-width: 0; }
.anel-com-legenda .gr-legenda.coluna .val { flex: 0 0 auto; }
/* tela estreita: o cartão vira uma coluna só, anel em cima e legenda embaixo */
@media (max-width: 1100px) {
  .anel-com-legenda svg.gr { flex: 0 1 240px; max-width: 240px; }
}

.gr-dica {
  position: fixed; z-index: 70;
  background: var(--tinta-profunda); color: #fff;
  border-left: 3px solid var(--acento);
  padding: 4px 9px; font-size: 12px; pointer-events: none;
  max-width: 280px;
}

/* ---------- faixa de meses ---------- */

/* Esta barra estava alta demais e com um risco vertical entre cada mês.
   Agora é uma tira só, mais baixa, e cada mês é um botão que só ganha fundo
   quando está escolhido ou sob o mouse. O mês escolhido é pílula escura. */
.faixa-meses {
  display: flex; overflow-x: auto; gap: 2px;
  border: 1px solid var(--borda); background: var(--branco);
  padding: 5px;
  margin-bottom: 12px;
}
.faixa-meses .mes {
  flex: 1 1 0; min-width: 54px;
  background: none; border: 0;
  border-radius: var(--r-campo);
  padding: 4px 4px 5px; cursor: pointer; font-family: var(--ui);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  transition: background-color .13s;
}
.faixa-meses .mes:hover { background: var(--papel); }
.faixa-meses .mes .m {
  font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--texto-apagado);
}
.faixa-meses .mes .q {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 14px; line-height: 1.25; color: var(--tinta);
}
.faixa-meses .mes.vazio .q { color: var(--texto-apagado); }
.faixa-meses .mes.ativo { background: var(--tinta); }
.faixa-meses .mes.ativo .m { color: rgba(255,255,255,.72); font-weight: 600; }
.faixa-meses .mes.ativo .q { color: #fff; font-weight: 600; }
.faixa-meses .mes.ativo:hover { background: var(--tinta); }

.rot-filtro {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--texto-fraco); align-self: center;
}
.subiu { color: var(--verde); }
.caiu { color: var(--vermelho); }

.secao-titulo.pequena {
  font-size: 10px; letter-spacing: 1.2px; color: var(--texto-fraco);
  border-bottom-color: var(--papel-fundo); margin-top: 12px;
}

/* ---------- mapa ---------- */

.mapa-caixa {
  border: 1px solid var(--borda);
  background: var(--branco);
  margin-bottom: 10px;
}
.mapa { height: 520px; background: var(--papel-fundo); }
.mapa-sem {
  padding: 20px; font-size: 12.5px; color: var(--texto-fraco); text-align: center;
}

@media (max-width: 860px) { .mapa { height: 380px; } }

/* tela cheia por CSS - usada quando o navegador não expande o elemento,
   que é o caso do Safari no iPhone. O invalidateSize vale para os dois modos. */
.mapa.mapa-cheia {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 80;
  border: 0;
}
body.com-mapa-cheio { overflow: hidden; }
/* na tela cheia nativa o elemento vira a raiz: precisa ocupar tudo */
.mapa:fullscreen { width: 100vw; height: 100vh; }

/* pin em gota: o contorno branco é o que o separa do terreno do satélite */
.pin-projeto svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }

/* controles do canto superior direito: base, ver todos e tela cheia */
.controles-mapa { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.troca-base {
  display: flex;
  border: 1px solid var(--tinta);
  background: var(--branco);
  box-shadow: 0 1px 4px rgba(6,18,35,.3);
}
.troca-base button {
  font-family: var(--ui); font-size: 11.5px;
  letter-spacing: .4px;
  padding: 5px 11px;
  border: 0; border-right: 1px solid var(--borda);
  background: var(--branco); color: var(--texto);
  cursor: pointer;
}
.troca-base button:last-child { border-right: 0; }
.troca-base button:hover { background: var(--papel-fundo); }
.troca-base button.ativo { background: var(--tinta); color: #fff; font-weight: 500; }

/* legenda dentro do mapa, canto inferior esquerdo */
.legenda-mapa {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--borda-forte);
  box-shadow: 0 1px 4px rgba(6,18,35,.3);
  padding: 6px 8px 5px;
  max-width: 232px;
}
.legenda-mapa .lm-titulo {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 3px;
}
.legenda-mapa .lm-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 1px 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--ui); font-size: 11.5px; text-align: left;
  color: var(--texto);
}
.legenda-mapa .lm-item:hover { background: var(--papel-fundo); }
.legenda-mapa .lm-pin { flex: 0 0 13px; height: 18px; display: block; }
.legenda-mapa .lm-rot {
  flex: 1 1 auto; color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legenda-mapa .lm-val {
  font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--texto);
}
.legenda-mapa .lm-item.apagada { opacity: .38; text-decoration: line-through; }
.legenda-mapa .lm-item.apagada .lm-pin { filter: grayscale(1); }
.legenda-mapa .lm-pe {
  font-size: 9.5px; color: var(--texto-apagado);
  border-top: 1px solid var(--papel-fundo);
  margin-top: 4px; padding-top: 3px; line-height: 1.3;
}

/* círculo do agrupamento, no lugar dos pins empilhados */
.grupo-pins { background: none; border: 0; }
.grupo-pins .gp-corpo {
  display: block; text-align: center;
  border-radius: 50%;
  background: var(--tinta);
  border: 2px solid #fff;
  color: #fff;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.marker-cluster { background: none; }
.marker-cluster div { background: none; }

/* balão do Leaflet, no visual da ferramenta */
.balao-projeto .leaflet-popup-content-wrapper {
  border-radius: 0; border: 1px solid var(--tinta); border-top: 3px solid var(--tinta);
  box-shadow: none; background: var(--branco);
}
.balao-projeto .leaflet-popup-content { margin: 8px 10px; font-family: var(--ui); }
.balao-projeto .leaflet-popup-tip { box-shadow: none; border: 1px solid var(--tinta); }
.balao .b-titular { font-weight: 500; font-size: 12.5px; line-height: 1.3; margin-bottom: 4px; }
.balao .b-linha {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--texto-fraco); padding: 1px 0;
}
.balao .b-linha .n { font-family: var(--num); color: var(--texto); }
.balao .b-etapa {
  font-size: 11.5px; padding: 4px 0 6px; border-top: 1px solid var(--papel-fundo);
  margin-top: 4px;
}
.balao .b-obs { font-family: var(--num); font-size: 11px; color: var(--texto-apagado); }
.leaflet-container { font-family: var(--ui); }

/* ---------- financeiro ---------- */

.numero .val.dinheiro { font-size: 20px; letter-spacing: -.3px; }

.sugestao {
  border-left: 3px solid var(--acento);
  background: var(--campo-fundo);
  border-top: 1px solid var(--campo-borda);
  border-right: 1px solid var(--campo-borda);
  border-bottom: 1px solid var(--campo-borda);
  padding: 7px 10px;
  margin-bottom: 12px;
  font-size: 12px;
}
.sugestao .sug-texto { color: #6B4E00; }
.sugestao .sug-acoes { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- links ---------- */

.links-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.link-caixa {
  border: 1px solid var(--borda);
  background: var(--branco);
  display: flex; flex-direction: column;
}
.link-caixa.favorito { border-left: 3px solid var(--acento); }
.link-corpo {
  display: flex; gap: 9px; padding: 8px 10px 7px; align-items: flex-start;
  color: var(--texto); text-decoration: none; flex: 1 1 auto; min-width: 0;
}
.link-corpo:hover { background: var(--papel); text-decoration: none; }
.link-sigla {
  flex: 0 0 32px; width: 32px; height: 32px;
  background: var(--tinta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--num); font-size: 12px; letter-spacing: .5px;
}
.link-caixa.favorito .link-sigla { background: var(--tinta); border-bottom: 3px solid var(--acento); }
.link-texto { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.link-nome { font-size: 12.5px; font-weight: 500; line-height: 1.25; }
.link-desc { font-size: 11px; color: var(--texto-fraco); line-height: 1.3; }
.link-url {
  font-family: var(--num); font-size: 10.5px; color: var(--tinta-media);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-acoes {
  display: flex; gap: 4px; padding: 0 10px 8px; flex-wrap: wrap;
}

/* ---------- quadro clicável do financeiro ---------- */

.numero.com-detalhe { cursor: pointer; position: relative; }
.numero.com-detalhe:hover { background: #FAFCFF; }
.numero.com-detalhe:focus { outline: 2px solid var(--tinta-media); outline-offset: -2px; }
.numero .ver-soma {
  font-size: 10px; letter-spacing: .5px; color: var(--tinta-media);
  margin-top: 2px; opacity: 0;
}
.numero.com-detalhe:hover .ver-soma,
.numero.com-detalhe:focus .ver-soma { opacity: 1; }

/* ---------- filtro rápido de mês, no financeiro ---------- */

.faixa-mes-fin {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--borda); background: var(--branco);
  margin-bottom: 12px; flex-wrap: wrap;
}
.faixa-mes-fin .faixa-meses {
  flex: 1 1 auto; border: 0; margin: 0; min-width: 0;
}
.fmf-ano, .fmf-acoes {
  display: flex; align-items: center; gap: 4px; padding: 4px 8px;
}
.fmf-ano { border-right: 1px solid var(--borda); }
.fmf-acoes { border-left: 1px solid var(--borda); }
.fmf-ano select {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 13px; padding: 3px 4px; min-width: 74px;
}

/* ---------- valor do projeto, na Etapa 1 ---------- */

.valor-situacao {
  padding: 5px 0 0;
  font-size: 12px;
  color: var(--texto-fraco);
  line-height: 1.5;
}

/* ---------- empresa clicável no financeiro ---------- */

.lig-empresa {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--tinta-media);
  cursor: pointer;
  text-align: left;
}
.lig-empresa:hover { text-decoration: underline; }

/* ---------- barra de ordem e agrupamento dos lançamentos ---------- */

.barra-lista {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid var(--borda);
  border-bottom: 0;
  background: var(--branco);
  padding: 5px 10px;
}
.bl-rotulo {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.barra-lista select { font-size: 12.5px; padding: 3px 6px; min-width: 210px; }
.bl-obs { font-size: 11px; color: var(--texto-apagado); margin-left: auto; }

/* ---------- lançamentos juntados por item ---------- */

.grupos-lancamento {
  border: 1px solid var(--borda);
  background: var(--branco);
}
.grupo-lanc { border-bottom: 1px solid var(--papel-fundo); }
.grupo-lanc:last-child { border-bottom: 0; }

.gl-cabeca {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.4fr) minmax(0, 1fr) 42px 150px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: var(--ui);
  text-align: left;
  color: var(--texto);
}
.gl-cabeca:hover { background: var(--papel); }
.grupo-lanc.aberto > .gl-cabeca {
  background: var(--papel-fundo);
  border-left-color: var(--acento);
}
.gl-seta { color: var(--tinta-media); font-size: 11px; line-height: 1; }
.gl-nome { font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-cat { font-size: 11.5px; color: var(--texto-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-qtd {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--texto-apagado); text-align: right;
}
.gl-valor {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 12.5px; text-align: right; white-space: nowrap;
}
.gl-corpo { padding: 0 10px 8px; background: var(--papel); }
.gl-corpo .tabela-caixa { border-top: 0; }

@media (max-width: 860px) {
  .gl-cabeca { grid-template-columns: 14px minmax(0, 1fr) 34px 110px; }
  .gl-cat { display: none; }
}

/* ---------- categorias em blocos que abrem ---------- */

.blocos-categoria {
  border: 1px solid var(--borda);
  background: var(--branco);
}
.secao-bloco { border-bottom: 1px solid var(--borda); }
.secao-bloco:last-child { border-bottom: 0; }

.sb-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: var(--ui);
  text-align: left;
  color: var(--texto);
}
.sb-cabeca:hover { background: var(--papel); }
.secao-bloco.aberta > .sb-cabeca {
  background: var(--papel-fundo);
  border-left-color: var(--acento);
}
.sb-seta {
  flex: 0 0 12px;
  color: var(--tinta-media);
  font-size: 11px;
  line-height: 1;
}
.sb-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-nome {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tinta);
  font-weight: 500;
}
.sb-previa {
  font-size: 11.5px;
  color: var(--texto-apagado);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secao-bloco.aberta .sb-previa { color: var(--texto-fraco); }
.sb-cont {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--texto-fraco);
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
}
.sb-corpo {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--papel-fundo);
  background: var(--papel);
}
.sb-corpo .links-grade { margin-bottom: 0; }

/* ---------- barras por cidade ---------- */

.barras-cidade {
  border: 1px solid var(--borda); background: var(--branco);
  padding: 6px 10px 8px;
}
.bc-linha {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr) 34px 76px;
  align-items: center; gap: 8px;
  padding: 2px 0;
}
.bc-cidade {
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-trilho { background: var(--papel-fundo); height: 14px; display: block; }
.bc-barra {
  display: block; height: 100%;
  background: var(--tinta-media);
  border-radius: 0 2px 2px 0;
}
.bc-num {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 12.5px; text-align: right; font-weight: 500;
}
.bc-kwp {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--texto-apagado); text-align: right;
}
@media (max-width: 860px) {
  .bc-linha { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 30px; }
  .bc-kwp { display: none; }
}

.lista-projetos-mapa { margin-top: 12px; }
.lista-projetos-mapa summary {
  padding: 5px 0; font-size: 11.5px; color: var(--tinta-media); cursor: pointer;
  list-style: none;
}
.lista-projetos-mapa summary::-webkit-details-marker { display: none; }
.lista-projetos-mapa summary::before { content: '+ '; font-family: var(--num); }
.lista-projetos-mapa[open] summary::before { content: '‘2 '; }

/* ---------- diversos ---------- */

.nota {
  font-size: 11.5px;
  color: var(--texto-fraco);
  border-left: 3px solid var(--borda-forte);
  background: var(--branco);
  padding: 5px 10px;
  margin-bottom: 10px;
}
.secao-titulo {
  font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--tinta); font-weight: 500;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 3px; margin: 16px 0 7px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.secao-titulo .cont { font-family: var(--num); color: var(--texto-apagado); font-size: 11px; letter-spacing: 0; }
/* minmax(0,…) para a coluna poder encolher: sem isso uma tabela larga
   empurra a página inteira e aparece rolagem horizontal no corpo */
.duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.duas-colunas > * { min-width: 0; }
.linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.somente-leitura { color: var(--texto-fraco); font-style: normal; }
.mono { font-family: var(--num); font-variant-numeric: tabular-nums; }
.direita { text-align: right; }
.link-empresa {
  font-family: var(--num); font-size: 12px; background: var(--branco);
  border: 1px solid var(--borda); padding: 5px 8px; word-break: break-all;
}
.chip {
  display: inline-block; font-size: 11.5px; border: 1px solid var(--borda-forte);
  background: var(--branco); padding: 1px 6px; margin: 0 4px 4px 0;
}
.aviso-permissao {
  border-left: 3px solid var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho);
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}

/* ---------- painel do integrador ---------- */

body.modo-integrador .lateral { display: none; }
/* controle do protótipo, não faz parte do painel que a empresa enxerga */
.topo-perfil-prototipo {
  background: var(--tinta-profunda);
  border-left: 1px solid rgba(255,255,255,.16);
}
.topo-perfil-prototipo select { max-width: 170px; }
.topo-empresa {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 5px 14px; border-left: 1px solid rgba(255,255,255,.16);
}
.topo-empresa .rot { font-size: 9.5px; letter-spacing: 1.6px; color: #A9BCD1; text-transform: uppercase; }
.topo-empresa .nom { font-size: 13.5px; font-weight: 500; }

/* ---------- celular ---------- */

@media (max-width: 860px) {
  .corpo { display: block; }
  .lateral {
    display: flex; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--borda); padding: 6px 8px;
    gap: 4px;
  }
  .lateral-grupo { display: none; }
  .lateral a {
    white-space: nowrap; padding: 6px 12px; margin-bottom: 0;
    border-radius: var(--r-pilula);
  }
  .lateral a .rot { overflow: visible; }
  .lateral a .contagem { display: none; }
  .conteudo { padding: 12px 10px 40px; }
  .topo { flex-wrap: wrap; }
  .topo-busca { order: 3; flex: 1 1 100%; border-top: 1px solid rgba(255,255,255,.16); padding: 6px 10px; }
  .topo-busca input { max-width: none; }
  .topo-perfil { margin-left: auto; }
  .marca { padding-right: 10px; }
  .marca img { height: 32px; }
  .marca-sub { display: none; }
  .campo, .campo.c1, .campo.c2, .campo.c3, .campo.c4, .campo.c5, .campo.c6,
  .campo.c7, .campo.c8, .campo.c9, .campo.c10, .campo.c11 { grid-column: span 12; }
  .dl { grid-template-columns: 1fr; }
  .dl > div.larga { grid-column: span 1; }
  .duas-colunas { grid-template-columns: 1fr; }
  .coluna { flex: 0 0 82vw; }
  .filtro { flex: 1 1 46%; }
  .filtro select, .filtro input { min-width: 0; width: 100%; }
  .filtro.direita { flex: 1 1 100%; margin-left: 0; }
  .numero .val { font-size: 22px; }
}

/* ==========================================================================
   O que a Classe responde, tabela de disjuntor, busca em lista
   ========================================================================== */

/* bloco branco ao lado da Classe: leitura, não é campo */
.vem-da-classe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tinta-media);
  padding: 5px 8px;
  min-height: 27px;
}
.vem-da-classe b { font-weight: 500; }
.vem-da-classe.vazio { color: var(--texto-apagado); border-left-color: var(--borda-forte); }

/* qual anexo da Enel o tipo de projeto usa */
.nota-formulario { border-left-color: var(--tinta-media); margin: 8px 0 0; }
.nota-formulario .mono { font-size: 11px; color: var(--texto-apagado); }
.anexos-exigidos { margin-top: 4px; }
.anexos-exigidos > summary {
  cursor: pointer;
  color: var(--tinta-media);
  font-size: 11px;
  letter-spacing: .3px;
}
.anexos-exigidos ol {
  margin: 5px 0 2px;
  padding-left: 20px;
  line-height: 1.45;
}
.anexos-exigidos li { margin-bottom: 2px; }

/* linha que atravessa a grade do formulário para dar recado */
.linha-aviso { grid-column: 1 / -1; }
.linha-aviso:empty { display: none; }

/* conferência: avisa e deixa seguir. Nunca impede - quem responde é o RT */
.conferencia {
  font-size: 11.5px;
  line-height: 1.4;
  padding: 6px 10px;
  border-left: 3px solid var(--borda-forte);
  background: var(--branco);
  margin: 6px 10px 8px;
}
.conferencia b { font-weight: 500; }
.conferencia.atencao {
  border-left-color: var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho);
}
.conferencia.ok {
  border-left-color: var(--verde);
  background: var(--verde-fundo);
  color: var(--verde);
}

/* tabela da norma, recolhida por padrão */
.tabela-norma {
  background: var(--branco);
  border: 1px solid var(--borda);
  padding: 6px 10px;
  margin-bottom: 10px;
}
.tabela-norma > summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .3px;
  color: var(--tinta-media);
}
.tabela-norma[open] > summary { margin-bottom: 8px; }
.tabela-norma .nota { margin: 8px 0 0; }
.tabela-norma tr.troca-ligacao > td { border-top: 1px solid var(--borda-forte); }
.rolagem-lateral { overflow-x: auto; }

/* campo com caixa de busca em cima da lista */
.campo.com-busca .filtra-lista {
  margin-bottom: 3px;
  font-size: 12px;
  padding: 3px 7px;
}
.campo.com-busca select { width: 100%; }

/* recado do CEP que achou a cidade */
.somente-leitura.achou { color: var(--verde); }

/* ==========================================================================
   Contagem regressiva por etapa e motivo da pendência no cartão
   ========================================================================== */

/* o selo de prazo troca o "há N dias" nas etapas que têm prazo */
.prazo {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid;
  white-space: nowrap;
}
.prazo-vencido {
  color: var(--vermelho);
  background: var(--vermelho-fundo);
  border-color: var(--vermelho);
  font-weight: 500;
}
.prazo-hoje {
  color: var(--vermelho);
  background: var(--branco);
  border-color: var(--vermelho);
  font-weight: 500;
}
.prazo-proximo {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border-color: var(--ambar);
}
.prazo-noPrazo {
  color: var(--verde);
  background: var(--verde-fundo);
  border-color: var(--verde);
}
.prazo-suspenso {
  color: var(--texto-fraco);
  background: var(--papel);
  border-color: var(--borda-forte);
}
/* a janela rápida do cartão (rodada de correções de 25/09) */
.espiar-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; }
.espiar-acoes { margin-top: 14px; gap: 8px; }

/* a marca de suspensão fica dentro do campo do prazo, mas lê como as marcas
   de pendência, e não como rótulo */
.campo > label.prazo-marca {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto);
  cursor: pointer;
}

/* item 9: o cartão parado diz por que parou, sem precisar de clique */
.cartao-pendencia {
  margin-top: 5px;
  border-left: 3px solid var(--vermelho);
  background: var(--vermelho-fundo);
  padding: 4px 6px;
}
.cartao-pendencia.sem-motivo {
  border-left-color: var(--ambar);
  background: var(--ambar-fundo);
  color: var(--ambar);
  font-size: 10.5px;
  line-height: 1.35;
}
.cartao-pendencia.sem-motivo b { font-weight: 500; }
.cp-motivos { display: flex; flex-wrap: wrap; gap: 3px; }
.cp-chip {
  font-size: 10px;
  letter-spacing: .2px;
  color: var(--vermelho);
  background: var(--branco);
  border: 1px solid var(--vermelho);
  padding: 0 4px;
  white-space: nowrap;
}
/* o detalhe escrito à mão só abre com o mouse em cima do cartão */
.cp-detalhe {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--vermelho);
  margin-top: 3px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .12s ease-out;
}
.cartao:hover .cp-detalhe,
.cartao:focus-within .cp-detalhe { max-height: 120px; }

/* no resumo do projeto o detalhe fica sempre aberto */
.dl .cp-chip { margin-right: 3px; }

/* marcar o motivo da pendência no acompanhamento */
.motivos-pendencia {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--papel-fundo);
}
.motivos-pendencia .motivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
}
.motivos-pendencia input { accent-color: var(--vermelho); }

/* ---------- a conta embaixo de campo digitado ----------
   O campo continua dele. A conta aparece embaixo, e o botao copia o valor.
   Chama-se conta-campo e nao sugestao porque .sugestao ja e a caixa de
   cobrancas pendentes do Financeiro, e as duas se atropelavam. */
.conta-campo {
  font-size: 10.5px;
  line-height: 1.35;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.conta-campo.vazia { color: var(--texto-apagado); }
.conta-campo.confere { color: var(--verde); }
.conta-campo.difere { color: var(--ambar); }
.conta-campo.difere b { font-weight: 500; }
.conta-campo .bt-mini { padding: 1px 7px; font-size: 10.5px; }

.conferencia-mppt { padding: 0 0 2px; }
.conferencia-mppt .conferencia { margin: 6px 10px; }

/* ==========================================================================
   Comentários, resumo enxuto, duas bases e painel do integrador
   ========================================================================== */

/* ---------- comentários, no desenho do Trello ---------- */

.comentarios { margin-top: 14px; }

.com-avatar {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.com-novo {
  display: flex;
  gap: 8px;
  background: var(--branco);
  border: 1px solid var(--borda);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.com-novo-corpo { flex: 1 1 auto; min-width: 0; }
.com-novo-corpo textarea { width: 100%; resize: vertical; }
.com-novo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
  font-size: 11px;
}
.com-novo-acoes b { font-weight: 500; color: var(--texto); }

.com-lista { display: flex; flex-direction: column; }
.com-item {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-top: 0;
}
.com-item:first-child { border-top: 1px solid var(--borda); }
.com-corpo { flex: 1 1 auto; min-width: 0; }
.com-cabeca {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.com-cabeca b { font-size: 12.5px; font-weight: 500; color: var(--tinta); }
.com-perfil {
  font-size: 9.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  padding: 0 4px;
}
.com-quando { font-size: 11px; color: var(--texto-apagado); font-family: var(--num); }
.com-quando i { font-style: normal; }
.com-texto {
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.com-acoes { margin-top: 4px; font-size: 11px; color: var(--texto-apagado); }
.com-acoes button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--tinta-media);
  cursor: pointer;
  text-decoration: underline;
}
.com-acoes button:hover { color: var(--vermelho); }
.com-acoes-edicao { display: flex; gap: 6px; margin-top: 5px; }
.com-vazio {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--texto-fraco);
  background: var(--branco);
  border: 1px dashed var(--borda-forte);
  padding: 8px 10px;
}
/* marca de conversa no cartão do quadro */
.com-marca { color: var(--tinta-media); }

/* ---------- resumo do projeto recolhido em blocos ---------- */

.resumo-bloco > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.resumo-bloco > summary::-webkit-details-marker { display: none; }
.resumo-bloco > summary::before {
  content: '▸';
  color: var(--texto-apagado);
  font-size: 10px;
  margin-right: 2px;
}
.resumo-bloco[open] > summary::before { content: '▾'; }
.resumo-bloco > summary h2 { flex: 1 1 auto; text-align: left; }
.resumo-bloco > summary::before { font-size: 12px; }
.resumo-bloco > summary:hover h2 { color: var(--tinta-media); }
.resumo-bloco > summary .bt-mini { cursor: pointer; }

/* ---------- anexos prontos para baixar ---------- */

.anexos-lista { border: 1px solid var(--borda); background: var(--branco); }
.anexo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--papel-fundo);
}
.anexo-linha:last-child { border-bottom: 0; }
.anexo-tipo {
  flex: 0 0 42px;
  font-family: var(--num);
  font-size: 10px;
  letter-spacing: .5px;
  text-align: center;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  padding: 2px 0;
}
.anexo-nome {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.anexo-nome b { font-size: 12px; font-weight: 500; }
.anexo-nome .mono { font-size: 11px; color: var(--texto-apagado); word-break: break-all; }
.anexo-meta { font-size: 11px; color: var(--texto-fraco); white-space: nowrap; }
@media (max-width: 860px) {
  .anexo-linha { flex-wrap: wrap; }
  .anexo-meta { flex: 1 1 100%; white-space: normal; }
}

/* ---------- duas bases ---------- */

.tag-oficial {
  color: var(--tinta);
  background: var(--papel-fundo);
  border-color: var(--borda-forte);
}
.tag-cliente {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border-color: var(--ambar);
}
.nota-duas-bases { border-left-color: var(--tinta-media); }

/* ---------- quadro com o cabeçalho fixo ----------
   A coluna rola por dentro; o nome da etapa fica parado em cima. */

.quadro-rolagem { max-height: 62vh; overflow-y: auto; }
.quadro-rolagem .coluna-lista { padding-bottom: 10px; }
@media (max-width: 860px) { .quadro-rolagem { max-height: none; } }

.vermelho { color: var(--vermelho); }

/* ---------- cadastro em abas ----------
   O mesmo formulário, dividido pelo caminho da energia. Trocar de aba não
   perde nada: os campos das outras continuam no formulário, fora da vista. */
.abas-cadastro {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--borda-forte);
  background: var(--papel-fundo);
  overflow-x: auto;
}
.abas-cadastro .aba {
  flex: 0 0 auto;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 7px 14px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  cursor: pointer;
  white-space: nowrap;
}
.abas-cadastro .aba:hover { color: var(--tinta-media); }
.abas-cadastro .aba.ativa {
  color: var(--tinta);
  font-weight: 500;
  background: var(--branco);
  border-bottom-color: var(--acento);
}
.painel-aba { display: none; }
.painel-aba.ativo { display: block; }

/* campos raros do datasheet, recolhidos */
details.avancados {
  border-top: 1px solid var(--papel-fundo);
  background: var(--papel);
}
details.avancados > summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  font-size: 10.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
details.avancados > summary::-webkit-details-marker { display: none; }
details.avancados > summary::before { content: '+ '; font-weight: 500; }
details.avancados[open] > summary::before { content: '- '; }
details.avancados > summary:hover { color: var(--tinta-media); }
details.avancados > summary .cont {
  font-family: var(--num); letter-spacing: 0; text-transform: none;
  color: var(--texto-apagado);
}

/* ---------- tabela de cargas ----------
   De onde sai a carga instalada. Cada linha e um aparelho, e as duas colunas
   de soma sao leitura: nao se digita nelas. */
/* a tabela de beneficiárias do rateio segue a mesma medida da de cargas:
   é o mesmo gesto, digitar linha a linha dentro de um formulário */
.tabela-beneficiarias { min-width: 660px; }
.tabela-beneficiarias th { white-space: nowrap; }
table.tabela-beneficiarias td { padding: 4px 6px; vertical-align: middle; }
.tabela-beneficiarias input { width: 100%; padding: 5px 7px; font-size: 12.5px; }
.tabela-beneficiarias input[type=number] {
  text-align: right; font-family: var(--num);
}
.tabela-beneficiarias input[type=number]::-webkit-inner-spin-button { opacity: .35; }
table.tabela-beneficiarias td.num { width: 108px; }
/* o CPF/CNPJ com máscara tem até 18 caracteres: a coluna cabe o número inteiro */
.tabela-beneficiarias input[name$=".cpfCnpj"] { min-width: 158px; }
table.tabela-beneficiarias td.acao { width: 62px; text-align: right; }
table.tabela-beneficiarias tr.vazia td {
  color: var(--texto-fraco); font-style: italic; padding: 10px;
}
table.tabela-beneficiarias tfoot td {
  background: var(--fundo-suave); font-weight: 500; border-top: 1px solid var(--borda-forte);
}
table.tabela-beneficiarias tfoot td.num { font-family: var(--num); color: var(--texto); }
table.tabela-beneficiarias tbody tr:hover td { background: transparent; }

/* seção que existe mas ainda não vale, por causa de uma resposta anterior.
   Fica visível para ele saber que existe, e apagada para não pedir atenção. */
.secao-apagada { opacity: .72; }

/* botao que mora ao lado de um campo de busca: a busca e o select ficam um em
   cima do outro, e o botao alinha com o select, que e onde a falta aparece */
.campo.campo-botao .bt { margin-top: 30px; white-space: nowrap; }
.secao-apagada h3 { color: var(--texto-fraco); }

.tabela-cargas { min-width: 720px; }
.tabela-cargas th { white-space: nowrap; }
table.tabela-cargas td { padding: 4px 6px; vertical-align: middle; }
.tabela-cargas input { width: 100%; padding: 5px 7px; font-size: 12.5px; }
.tabela-cargas input[type=number]::-webkit-inner-spin-button { opacity: .35; }
.tabela-cargas input[type=number] { text-align: right; font-family: var(--num); }
table.tabela-cargas td.num { width: 108px; }
table.tabela-cargas td.acao { width: 62px; text-align: right; }
table.tabela-cargas td.soma {
  font-family: var(--num);
  color: var(--texto-fraco);
  text-align: right;
  white-space: nowrap;
}
table.tabela-cargas tr.vazia td {
  color: var(--texto-apagado);
  font-size: 12.5px;
  padding: 14px 11px;
  text-align: center;
}
table.tabela-cargas tfoot td {
  background: #FAFBFC;
  border-top: 1px solid var(--borda-forte);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
}
table.tabela-cargas tfoot td.num { font-family: var(--num); color: var(--texto); }
table.tabela-cargas tbody tr:hover td { background: transparent; }

/* o resto da linha da tabela, embaixo da conferencia do disjuntor */
.resto-da-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 16px;
  margin-top: 5px;
  font-size: 11.5px;
}
.resto-da-linha i {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 9.5px;
  color: var(--texto-apagado);
  margin-right: 3px;
}

/* ==========================================================================
   TEMA
   Aplica os tokens de geometria do :root nas pecas do sistema. Esta secao e o
   lugar de mexer na aparencia: raio, sombra, respiro e peso de rotulo.
   O que NAO se mexe aqui: a convencao de cor dos campos, as cores das etapas
   e a densidade das tabelas.
   ========================================================================== */

body { -webkit-font-smoothing: antialiased; }

/* ---------- superficies grandes ---------- */

.cartao-grafico,
.anexos-lista,
.quadro,
.mapa-caixa,
.form-secao,
.barra-filtros,
.faixa-meses,
.secao-bloco,
.tabela-caixa,
.resumo-bloco,
.grupos-lancamento {
  border-radius: var(--r);
  border-color: var(--borda);
  box-shadow: var(--sombra);
}

/* Recortar no canto arredondado so onde NAO ha rolagem.
   O quadro, a faixa de meses, a tabela larga e as abas rolam de lado: nelas o
   overflow ja e delas, e cortar aqui mataria a rolagem. Elas arredondam do
   mesmo jeito, porque quem rola tambem recorta. */
.cartao-grafico,
.anexos-lista,
.mapa-caixa,
.form-secao,
.barra-filtros,
.secao-bloco,
.resumo-bloco,
.grupos-lancamento {
  overflow: hidden;
}

/* O painel de numeros nao e mais um cartao: e a grade que segura quatro.
   Quem tem raio e sombra agora e cada numero. */
.numero {
  border-radius: var(--r);
  border-color: var(--borda);
  box-shadow: var(--sombra);
}

/* ---------- superficies pequenas ---------- */

.cartao,
.arquivo-caixa,
.link-caixa,
.com-item,
.com-novo,
.com-vazio,
.anexo-linha,
.dl,
.tabela-norma,
.nota,
.conferencia,
.cartao-pendencia,
.fase2-secao,
.bloco-fase2,
.faltantes,
.aviso-permissao,
.vem-da-classe {
  border-radius: var(--r-mini);
}

.cartao {
  border-color: var(--borda);
  box-shadow: var(--sombra-leve);
  padding: 11px 12px;
  transition: box-shadow .15s, border-color .15s;
}
.cartao:hover {
  box-shadow: var(--sombra);
  border-color: #D8DEE8;
}

/* ---------- quadro ---------- */

.coluna { background: transparent; border-right-color: var(--borda); }
.coluna-topo { background: #FAFBFC; border-bottom-color: var(--borda); }
.coluna-lista { padding: 8px; gap: 8px; }
.quadro { background: #FAFBFC; }
.coluna-nome i {
  border-radius: 50%;
  width: 7px; height: 7px; flex-basis: 7px;
  border-color: rgba(0,0,0,.12);
}

/* ---------- rotulos com mais peso ---------- */

.campo > label,
.secao-titulo,
.cg-topo h2,
.coluna-nome,
.form-secao h3,
.dl dt,
.tabela th {
  font-weight: var(--peso-rotulo);
  letter-spacing: .04em;
}
.tela-titulo { font-weight: 800; letter-spacing: -.01em; }

/* ---------- campos ---------- */

input[type=text], input[type=date], input[type=number], input[type=email],
input[type=search], input[type=tel], select, textarea {
  border-radius: var(--r-campo);
  border-color: var(--borda-forte);
  padding: 8px 11px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--tinta-media);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, .18);
}
.campo { padding: 10px 14px 12px; border-color: var(--borda); }

/* ---------- botoes ---------- */

.bt, .bt-mini, .bt-principal, .bt-perigo, .bt-nova-coluna, .col-menu, .bt-fase2 {
  border-radius: var(--r-campo);
  font-weight: 600;
}
.bt {
  padding: 8px 16px;
  border-color: var(--borda-forte);
  transition: background-color .14s, border-color .14s, box-shadow .14s;
}
.bt-principal { font-weight: 700; }
.bt-mini { padding: 4px 10px; }

/* ---------- abas do cadastro tecnico ---------- */

.abas-cadastro {
  background: var(--branco);
  padding: 10px 16px 0;
  gap: 4px;
  border-bottom-color: var(--borda);
}
.abas-cadastro .aba {
  border-radius: 9px 9px 0 0;
  font-weight: var(--peso-rotulo);
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
  padding: 9px 14px;
}
.abas-cadastro .aba.ativa {
  background: var(--papel-fundo);
  color: var(--tinta);
  border-bottom-color: var(--tinta-media);
}

/* ---------- tabelas: mais respiro, mesma densidade de informacao ---------- */

.tabela th {
  background: #FAFBFC;
  color: var(--texto-apagado);
  font-weight: 800;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--borda);
  padding: 9px 11px;
}
.tabela td { padding: 9px 11px; border-bottom-color: var(--borda); }
.tabela tbody tr:hover td { background: #FAFBFC; }

/* ---------- etiquetas ---------- */

.tag, .chip, .prazo, .cp-chip, .com-perfil, .amostra, .tag-lancamento {
  border-radius: var(--r-pilula);
  padding-left: 9px;
  padding-right: 9px;
  font-weight: 600;
}
.marca-etapa { border-radius: 5px; }
.com-avatar { border-radius: 50%; }

/* ---------- modal e gaveta ---------- */

.modal {
  border-radius: var(--r);
  box-shadow: var(--sombra-modal);
  overflow: hidden;
  border: 0;
}
.modal-topo {
  background: var(--branco);
  border-bottom-color: var(--borda);
  padding: 16px 22px;
}
.modal-topo h2 { font-weight: 800; }
.modal-rodape {
  background: var(--branco);
  border-top-color: var(--borda);
  padding: 13px 22px;
}
.gaveta { box-shadow: -14px 0 46px -18px rgba(26, 54, 93, .3); }

/* ---------- topo e lateral ---------- */

.topo { border-bottom-width: 0; box-shadow: 0 1px 3px rgba(26,54,93,.18); }
.topo-busca input {
  border-radius: var(--r-campo);
  background: #23375B;
  border-color: #33507F;
}
.lateral { background: var(--branco); border-right-color: var(--borda); }

/* ---------- os dois campos que nao sao dele ----------
   Vaga de calculo da Fase 2 e campo de leitura. Estas regras vem depois das
   regras de campo do tema de proposito: la em cima o tema arredonda e clareia
   a borda de todo input, e sem isto os dois voltariam a parecer campo que ele
   pode digitar. Aqui eles voltam a se ler como o que sao. */
input[readonly], input[readonly]:focus {
  background: #FBFCFD;
  border: 1px dashed #C0C9D6;
  box-shadow: none;
}
/* a vaga da Fase 2 tambem e readonly, entao vem depois, senao a regra de cima
   apaga o cinza que separa calculo de campo de leitura */
.fase2-campo input {
  background: #E4E9F1;
  border: 1px dashed #A9B4C6;
  color: var(--texto-apagado);
}

/* ==========================================================================
   MENU RECOLHIDO E CARTAO EM MOVIMENTO
   ========================================================================== */

/* ---------- o botao de recolher e expandir ----------
   No alto do menu, como no Homologa Plus. Sem animacao: clicou, o menu troca
   de largura na hora e a pagina acompanha. */

.lateral { display: flex; flex-direction: column; }
.lateral-cabeca {
  display: flex;
  justify-content: flex-end;
  padding: 0 2px 2px;
}
.bt-recolher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--borda);
  background: var(--papel-fundo);
  border-radius: 8px;
  color: var(--tinta-media);
  cursor: pointer;
}
.bt-recolher:hover { background: var(--papel); border-color: var(--borda-forte); }
.bt-recolher .ic { width: 16px; height: 16px; flex: 0 0 16px; }

/* ---------- recolhido ----------
   Sobra a fileira de desenhos, e o nome aparece ao lado quando o mouse para
   em cima do desenho. */
body.menu-recolhido .lateral { flex-basis: 60px; padding-left: 8px; padding-right: 8px; }
body.menu-recolhido .lateral-cabeca { justify-content: center; padding: 0 0 2px; }
body.menu-recolhido .bt-recolher .ic { transform: rotate(180deg); }
body.menu-recolhido .lateral-grupo {
  height: 9px;
  padding: 4px 0 0;
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}
body.menu-recolhido .lateral a { justify-content: center; padding: 6px 0; position: relative; }
body.menu-recolhido .lateral a .rot,
body.menu-recolhido .lateral a .contagem { display: none; }
body.menu-recolhido .lateral a::after {
  content: attr(data-nome);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--tinta-profunda);
  color: #fff;
  font-size: 12.5px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: var(--r-campo);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 40;
}
body.menu-recolhido .lateral a:hover::after,
body.menu-recolhido .lateral a:focus-visible::after { opacity: 1; }

/* ---------- compacto ----------
   Todos os itens cabem na altura de um notebook comum sem rolar o menu. */
.lateral { padding-top: 8px; padding-bottom: 10px; flex-basis: 244px; }
.lateral-grupo { padding: 9px 10px 3px; }
.lateral a { padding: 5px 10px; margin-bottom: 0; font-size: 13.5px; }
/* desenho maior: le melhor aberto e, principalmente, recolhido */
.lateral a .ic { width: 21px; height: 21px; flex: 0 0 21px; }
.bt-recolher { width: 30px; height: 30px; }
.bt-recolher .ic { width: 18px; height: 18px; flex: 0 0 18px; }
body.menu-recolhido .lateral { flex-basis: 66px; }
body.menu-recolhido .lateral a { padding: 7px 0; }

@media (max-width: 860px) {
  /* no celular o menu ja e uma fileira deitada: recolher nao faz sentido */
  body.menu-recolhido .lateral { flex-basis: auto; }
  body.menu-recolhido .lateral a .rot { opacity: 1; width: auto; }
  body.menu-recolhido .lateral a::after { display: none; }
  .bt-recolher { display: none; }
}

/* ---------- o cartao em movimento ----------
   Arrastar era seco: o cartao sumia e reaparecia. Agora ele afunda um pouco
   sob o dedo, os vizinhos abrem espaco andando, e a coluna alvo se acende. */

.cartao {
  transition: box-shadow .16s ease,
              border-color .16s ease,
              transform .16s cubic-bezier(.2, 0, 0, 1);
  will-change: transform;
}
.cartao:hover { transform: translateY(-1px); }
.cartao:active { transform: translateY(0) scale(.995); }

/* a vaga: onde o cartão vai cair, na cor do sistema, e sem o texto por cima */
.cartao.arrastando {
  opacity: 1;
  transform: none;
  background: #DCE7FA;
  border: 2px dashed #6E93D6;
  border-left: 2px dashed #6E93D6;
  box-shadow: none;
  cursor: grabbing;
}
.cartao.arrastando > * { visibility: hidden; }

/* a copia menor que vai na mao enquanto arrasta (so existe um instante, para
   o navegador tirar a foto) */
.cartao-na-mao {
  position: fixed;
  top: -2000px;
  left: 0;
  zoom: .82;
  background: var(--branco);
  box-shadow: var(--sombra-modal);
  transform: rotate(-2deg);
  pointer-events: none;
  z-index: 9999;
}

/* os vizinhos andam para abrir a vaga, em vez de saltar */
.coluna-lista .cartao:not(.arrastando) {
  transition: transform .18s cubic-bezier(.2, 0, 0, 1),
              box-shadow .16s ease, border-color .16s ease;
}

.coluna.alvo {
  background: var(--campo-foco);
  transition: background-color .15s ease;
}
.coluna.alvo .coluna-topo { background: var(--campo-foco); }

/* a coluna sendo reordenada pelo cabecalho */
.coluna.coluna-arrastando { transition: opacity .15s ease; }

@media (prefers-reduced-motion: reduce) {
  .cartao, .coluna-lista .cartao:not(.arrastando), .coluna.alvo {
    transition-duration: .01ms;
  }
  .cartao:hover, .cartao:active { transform: none; }
  .cartao.arrastando { transform: none; }
}

/* ---------- documento gerado ----------
   A folha imita o papel: largura de A4, margem generosa e texto justificado.
   E a unica superficie do sistema que abre mao da densidade, porque nao e
   tela, e a previsao de como o documento sai impresso. */

.doc-caixa {
  display: flex;
  justify-content: center;
  padding: 4px 0 18px;
}
.folha {
  width: 100%;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--borda);
  box-shadow: 0 1px 3px rgba(20, 30, 50, .07);
  padding: 54px 62px 46px;
  color: #101418;
  font-size: 13px;
  line-height: 1.75;
}
.doc-titulo {
  font-size: 17px;
  letter-spacing: .16em;
  font-weight: 600;
  text-align: center;
  margin: 0 0 30px;
  color: #101418;
}
.doc-p {
  margin: 0 0 18px;
  text-align: justify;
}
.doc-p b { font-weight: 600; }
.doc-praca {
  margin: 32px 0 0;
  text-align: center;
  letter-spacing: .02em;
}
.doc-assinatura {
  margin: 54px auto 0;
  max-width: 420px;
  text-align: center;
}
/* a linha da assinatura: quem assina escreve em cima dela, no papel */
.doc-linha {
  border-top: 1px solid #101418;
  margin: 0 0 7px;
}
.doc-nome { font-weight: 600; letter-spacing: .02em; }
.doc-cpf { font-family: var(--num); font-size: 12px; margin-top: 2px; }
.doc-cargo { font-size: 11.5px; color: #4A5260; margin-top: 3px; }

/* o dado que falta sai marcado, e nao em branco. Em branco ele imprime,
   leva na Enel e so descobre la. */
.lacuna {
  background: #FFF0C2;
  border-bottom: 1px dashed #B8912F;
  color: #7A5C10;
  padding: 0 3px;
  font-style: italic;
  font-size: 12px;
}
.doc-faltas {
  background: var(--ambar-fundo);
  border-left: 3px solid var(--ambar);
  padding: 9px 13px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto);
}
.doc-faltas b { font-weight: 600; }

/* falta e o que ele resolve preenchendo um campo. Ressalva e decisao que
   depende dele, e por isso vem em azul e nao em ambar: nao ha o que digitar. */
.doc-ressalva {
  background: var(--papel-fundo);
  border-left: 3px solid var(--tinta);
  padding: 9px 13px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--texto);
}
.doc-ressalva b { font-weight: 600; }
.doc-faltas ul { margin: 5px 0 7px; padding-left: 18px; }
.doc-faltas li { margin: 1px 0; }
.doc-faltas i { color: var(--texto-fraco); font-style: normal; }

/* ---------- ligado ao banco ----------
   A faixa de protótipo fala de dado que fica só no navegador: ligado ao banco
   ela não vale mais. O topo troca o seletor de perfil por quem entrou. */
body.modo-nuvem .faixa-prototipo { display: none; }

.topo-quem { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topo-quem .quem { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.topo-quem .nom { font-size: 12.5px; font-weight: 600; color: #FFFFFF; }
.topo-quem .pap {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}
.topo-quem .bt-mini {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28);
  color: #FFFFFF;
}
.topo-quem .bt-mini:hover { background: rgba(255, 255, 255, .22); }

/* enquanto o banco recebe: a página segue usável, só avisa que está gravando */
body.gravando-nuvem .topo::after {
  content: "gravando…";
  position: absolute; right: 12px; bottom: -18px;
  font-size: 10.5px; color: var(--texto-fraco);
}

/* ---------- a porta de entrada ----------
   Duas metades, como a referência: à esquerda a cena em 3D com as frases, à
   direita o formulário limpo. Os tempos seguem a regra de sempre: entra com
   ease-out, sai mais rápido do que entra, e só se anima transform e
   opacidade. Quem pediu menos movimento no sistema recebe tudo parado. */
body.modo-entrada .faixa-prototipo,
body.modo-entrada .topo,
body.modo-entrada .lateral { display: none; }
body.modo-entrada .corpo { display: block; min-height: 0; }
body.modo-entrada .conteudo { margin: 0; padding: 0; max-width: none; }

.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  min-height: 100vh;
  background: #F7F8FA;
}

/* ----- a metade da cena ----- */
.entrada-vitrine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #FFFFFF;
  background:
    radial-gradient(110% 80% at 0% 0%, #1A365D 0%, #0F2340 36%, #081628 68%, #040B16 100%);
}
.entrada-cena {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.23, 1, .32, 1);
}
.entrada-cena.pronta { opacity: 1; }

/* o véu escurece só atrás do texto, para ele ler sem brigar com a cena */
.entrada-veu {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(98deg, rgba(4, 7, 14, .78) 0%, rgba(4, 7, 14, .42) 38%, rgba(4, 7, 14, 0) 66%),
    linear-gradient(180deg, rgba(4, 7, 14, 0) 62%, rgba(4, 7, 14, .6) 100%);
}

.entrada-frases {
  position: absolute; z-index: 2;
  left: clamp(36px, 10%, 150px); top: 22%;
  width: min(560px, 76%);
}
.entrada-frase {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .18s ease-in, transform .18s ease-in;
}
.entrada-frase.ativa {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  /* entra so depois de a anterior sair: as duas nunca ficam juntas */
  transition: opacity .45s cubic-bezier(.23, 1, .32, 1) .2s,
              transform .45s cubic-bezier(.23, 1, .32, 1) .2s;
}
.entrada-frase h2 {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(30px, 3.2vw, 50px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  color: #FFFFFF;
}
.entrada-frase p {
  margin: 0;
  max-width: 470px;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  color: #A9C1D9;
}

.entrada-pontos { display: flex; align-items: center; gap: 10px; margin-top: 52px; }
.entrada-ponto {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  transition: width .32s cubic-bezier(.23, 1, .32, 1), background-color .2s ease;
}
.entrada-ponto:hover { background: rgba(255, 255, 255, .5); }
.entrada-ponto.ativo { width: 38px; background: var(--acento); }

.entrada-seta {
  position: absolute; z-index: 3; top: 50%;
  width: 40px; height: 40px; margin-top: -20px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(8, 16, 32, .35);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease-out;
}
.entrada-seta svg { width: 18px; height: 18px; }
.entrada-seta.anterior { left: 18px; }
.entrada-seta.anterior svg { transform: rotate(180deg); }
.entrada-seta.proxima { right: 18px; }
.entrada-seta:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .32); }
.entrada-seta:active { transform: scale(.94); }

.entrada-assinatura {
  position: absolute; z-index: 2;
  left: clamp(36px, 4%, 72px); bottom: 26px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #7E9CC0;
}
.entrada-assinatura::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 6px; height: 6px; margin-right: 10px; border-radius: 50%;
  background: var(--acento);
}

/* ----- a metade do formulário ----- */
.entrada-painel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px;
  background: #F7F8FA;
}
.entrada-cartao {
  width: 100%; max-width: 400px;
  animation: entrada-sobe .5s cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes entrada-sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.entrada-marca { display: block; width: 236px; max-width: 72%; height: auto; margin: 0 auto 34px; }

.entrada-form { display: flex; flex-direction: column; }
.entrada-form label:not(.entrada-lembrar) {
  margin: 18px 0 8px;
  font-size: 13px; font-weight: 600; color: var(--texto);
}
.entrada-linha-rot { display: flex; align-items: baseline; justify-content: space-between; }
.entrada-form input[type="email"],
.entrada-form input[type="password"],
.entrada-form input[type="text"] {
  width: 100%; height: 44px; box-sizing: border-box;
  padding: 0 14px;
  font: inherit; font-size: 14px;
  color: var(--texto);
  background: #FFFFFF;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entrada-form input::placeholder { color: var(--texto-apagado); }
.entrada-form input:focus {
  outline: none;
  border-color: var(--tinta-media);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, .18);
}
.entrada-senha { position: relative; }
.entrada-form .entrada-senha input { padding-right: 46px; }
.entrada-olho {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: none;
  color: var(--texto-apagado); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.entrada-olho svg { width: 18px; height: 18px; }
.entrada-olho:hover { color: var(--texto-fraco); background: var(--papel); }

.entrada-link {
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--tinta-media); cursor: pointer;
}
.entrada-link:hover { text-decoration: underline; }

.entrada-lembrar {
  display: flex; align-items: center; gap: 9px;
  margin: 18px 0 2px;
  font-size: 13.5px; color: var(--texto-fraco);
  cursor: pointer; user-select: none;
}
.entrada-lembrar input { width: 16px; height: 16px; margin: 0; accent-color: var(--tinta); }

.entrada-entrar {
  position: relative;
  margin-top: 24px; height: 46px;
  border: 0; border-radius: 8px;
  background: var(--tinta);
  color: #FFFFFF;
  font-family: var(--ui); font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(26, 54, 93, .18);
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease-out;
}
.entrada-entrar:hover { background: #25497A; box-shadow: 0 8px 22px rgba(26, 54, 93, .24); }
.entrada-entrar:active { transform: scale(.985); }
.entrada-entrar:disabled { opacity: .75; cursor: default; }
.entrada-entrar.carregando { color: transparent; }
.entrada-entrar.carregando::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF;
  animation: entrada-gira .7s linear infinite;
}
@keyframes entrada-gira { to { transform: rotate(360deg); } }

.entrada-recado { min-height: 18px; margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--texto-fraco); }
.entrada-recado.erro { color: var(--vermelho); }
.entrada-recado.ok { color: var(--verde); }
.entrada-rodape {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--borda-forte);
  text-align: center; font-size: 12.5px; line-height: 1.55;
  color: var(--texto-apagado);
}
.entrada-titulo { font-family: var(--titulo); font-size: 21px; font-weight: 800; color: var(--texto); }
.entrada-nota { margin: 6px 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--texto-fraco); }
.entrada-voltar { align-self: center; margin-top: 20px; }
.entrada-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.entrada-dupla > div { display: flex; flex-direction: column; }
.entrada-rodape .entrada-link { font-size: 12.5px; }

@media (max-width: 960px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-vitrine { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entrada-cena, .entrada-frase, .entrada-frase.ativa, .entrada-ponto,
  .entrada-seta, .entrada-entrar { transition: none; }
  .entrada-cartao { animation: none; }
}

/* ---------- dimensionamento: conta feita, e não mais vaga ----------
   Cinza continua querendo dizer "saiu de conta", que é a convenção da planilha.
   Mas agora o número está ali: borda cheia e texto escuro, e a conta escrita
   embaixo, pequena, para nenhum número aparecer sem dizer de onde veio. */
.calc-secao { margin: 10px; }
.calc-secao h3 {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-fraco); margin: 0 0 6px; font-weight: 600;
}
.calc-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border-top: 1px solid var(--borda); border-left: 1px solid var(--borda);
  margin-bottom: 6px;
}
.calc-campo {
  padding: 6px 10px 8px; min-width: 0;
  border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  background: #EEF1F6;
}
.calc-campo label {
  display: block; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--texto-fraco); margin-bottom: 2px; line-height: 1.25;
}
.calc-valor { font-family: var(--num); font-size: 15px; font-weight: 600; color: var(--texto); }
.calc-conta { font-size: 10.5px; color: var(--texto-fraco); line-height: 1.35; margin-top: 2px; }
.calc-campo.calc-atencao { background: var(--vermelho-fundo); }
.calc-campo.calc-atencao .calc-valor { color: var(--vermelho); }
.calc-secao .conferencia { margin: 4px 0 0; }

/* ---------- formulário da Enel dentro da folha ----------
   A procuração é texto corrido; formulário é grade de campos. Mesma folha, letra
   menor e campos com rótulo e valor, como nas planilhas da Enel. */
.folha.formulario { font-size: 11px; line-height: 1.35; padding: 34px 38px 30px; }
.fm-cab { text-align: center; margin: 0 0 12px; }
.fm-titulo { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.fm-sub { font-size: 10.5px; margin-top: 2px; }
.fm-tipo {
  display: flex; gap: 40px; padding: 5px 8px; margin: 0 0 8px;
  background: #EDEFF2; border: 1px solid #C9CED6; font-size: 11px;
}
.fm-marca { font-family: var(--num); white-space: pre; }
.fm-secao {
  font-weight: 700; margin: 12px 0 5px; padding: 3px 6px;
  background: #EDEFF2; border-left: 3px solid #101418;
}
.fm-secao i { font-weight: 400; font-style: italic; }
.fm-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 1px solid #C9CED6; border-left: 1px solid #C9CED6;
}
.fm-c {
  /* wrap: quando rótulo e valor não cabem na mesma linha, o valor desce
     inteiro. Sem isso a latitude saía uma letra por linha e o CPF partia. */
  display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; min-width: 0;
  padding: 4px 6px; border-right: 1px solid #C9CED6; border-bottom: 1px solid #C9CED6;
}
.fm-c.s3 { grid-column: span 3; } .fm-c.s4 { grid-column: span 4; }
.fm-c.s6 { grid-column: span 6; } .fm-c.s8 { grid-column: span 8; }
.fm-c.s12 { grid-column: span 12; }
.fm-r { color: #3A4350; }
.fm-v { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
/* ---------- memorial descritivo ----------
   A folha imita o modelo em Word da Enel: capa, seções numeradas e as duas
   figuras. */
.memorial { font-size: 12.5px; line-height: 1.5; }
.mem-capa { text-align: center; margin: 0 0 26px; }
.mem-titulo { font-size: 22px; font-weight: 700; }
.mem-sub { font-size: 15px; margin-top: 4px; }
.mem-capa-dados { margin-top: 26px; text-align: left; }
.mem-capa-dados p { margin: 3px 0; }
.mem-secao {
  font-size: 14px; font-weight: 700; margin: 20px 0 8px;
  border-bottom: 1px solid #C9CED6; padding-bottom: 3px;
}
.mem-texto { margin: 0 0 8px; text-align: justify; }
.mem-item { margin: 0 0 5px; }
.mem-lista { margin: 0 0 10px; padding-left: 18px; }
.mem-lista li { margin-bottom: 3px; }
.mem-figura {
  position: relative; width: 480px; height: 300px; overflow: hidden;
  border: 1px solid #000; margin: 10px auto 4px; background: #EDEFF2;
}
.mem-figura.vazia { display: flex; align-items: center; justify-content: center; height: 120px; }
.mem-figura.placa { width: 300px; height: auto; border: 0; }
.mem-figura.placa img { width: 100%; display: block; }
.mem-mapa { position: absolute; width: 768px; height: 768px; }
.mem-mapa img { position: absolute; width: 256px; height: 256px; }
.mem-pino {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #D32F2F; border: 2px solid #fff;
}
.mem-legenda { text-align: center; font-size: 11px; margin: 0 0 14px; }
.mem-assina { margin-top: 34px; text-align: center; }
.mem-assina .doc-linha { width: 300px; margin: 0 auto 4px; }
.mem-local { font-size: 11.5px; color: #3D4A5C; margin-top: 4px; }

.fm-tabela { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 10.5px; }

/* ---------- formulário de ligação nova e acréscimo de carga ----------
   O desenho é o do arquivo da Enel: faixa no topo, rótulo fora da caixa,
   cabeçalho colorido por coluna e a grade com as linhas em branco. */
.fm-faixa {
  background: #F05A22; color: #fff; font-size: 17px; font-weight: 700;
  padding: 7px 14px; margin: 0 0 12px;
  border-radius: 0 40px 40px 0; width: 86%;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.formulario-carga .fm-bloco { margin: 0 0 12px; }
.formulario-carga .fm-par { display: flex; gap: 14px; margin-bottom: 5px; }
.formulario-carga .fm-campo { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.formulario-carga .fm-campo.largo { flex: 1 1 100%; }
.formulario-carga .fm-rot { flex: 0 0 108px; }
.formulario-carga .fm-val {
  flex: 1 1 auto; min-width: 0; border: 1px solid #000; padding: 2px 5px;
  min-height: 16px; font-weight: 600;
}
.fm-carga th.c-selecao { background: #0B5FD9; color: #fff; }
.fm-carga th.c-qtd, .fm-carga th.c-acr { background: #FFE300; color: #000; }
.fm-carga th.c-inst { background: #C77DE8; color: #000; }
.fm-carga thead th {
  text-align: center; font-size: 9.5px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.fm-carga th:not(.c-selecao):not(.c-qtd):not(.c-inst):not(.c-acr) { background: #fff; color: #000; }
.fm-carga tr.vazia td { height: 15px; }
.formulario-carga .fm-potencias { display: block; margin: 14px 0 0; width: 56%; }
.formulario-carga .fm-potencias > div {
  display: flex; border: 1px solid #000; margin-bottom: 7px;
}
.formulario-carga .fm-potencias span {
  flex: 0 0 46%; padding: 7px 8px; font-weight: 700; border-right: 1px solid #000;
}
.formulario-carga .fm-potencias b {
  flex: 1 1 auto; padding: 7px 8px; text-align: center; font-weight: 400;
}
.fm-tabela th, .fm-tabela td { border: 1px solid #C9CED6; padding: 3px 6px; text-align: left; }
.fm-tabela th { background: #EDEFF2; font-weight: 700; }
.fm-tabela .num { text-align: right; font-family: var(--num); }
.fm-tabela tfoot td { background: #F6F7F9; }
.fm-potencias { display: grid; gap: 6px; margin: 12px 0 0; max-width: 320px; }
.fm-potencias div {
  display: flex; justify-content: space-between; padding: 6px 10px;
  border: 1px solid #101418;
}
.fm-potencias b { font-family: var(--num); }
.fm-pe {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin: 26px 0 0; break-inside: avoid; page-break-inside: avoid;
}
.fm-assina { width: 46%; text-align: center; }
.fm-nota { margin: 5px 0 0; font-style: italic; }
.fm-texto { margin: 0 0 4px; text-align: justify; }

/* a caixa do documento que ja sai, ao lado das que ainda sao vaga */
.arquivo-caixa.sistema.pronto { border-style: solid; }
.miniatura.sistema.emitido {
  background: var(--verde-fundo);
  border-color: #A9CDB6;
  color: var(--verde);
}
.arquivo-caixa.sistema.pronto .arquivo-acoes { justify-content: flex-start; }

@media (max-width: 700px) {
  .folha { padding: 30px 22px 26px; }
  /* a tabela de cargas tem seis colunas e nao cabe no celular: ela rola de
     lado dentro da folha, e a pagina continua parada */
  .folha.formulario { overflow-x: auto; }
}

@media print {
  /* papel não tem clique: o que está recolhido na tela sai aberto no papel */
  .resumo-bloco > summary::before { display: none; }
  details.resumo-bloco > *:not(summary) { display: revert !important; }
  .com-novo, .com-acoes { display: none !important; }
  .quadro-rolagem { max-height: none; overflow: visible; }

  .faixa-prototipo, .topo, .lateral, .tela-acoes, .barra-filtros, .linha-acoes,
  .passos, .barra-navegacao, .rodape-fase2, .migalha, .nota,
  .arquivo-acoes, .marca-visivel, .gaveta, .gaveta-fundo, .modal-fundo { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .conteudo { padding: 0; }
  .corpo { display: block; }
  .dl, .tabela-caixa, .form-secao, .fase2-secao, .arquivo-caixa {
    break-inside: avoid; page-break-inside: avoid;
  }
  .resumo-topo h2 { color: #000; }
  a { color: #000; text-decoration: none; }
  /* o tema recorta e sombreia as superficies para a tela. No papel, sombra nao
     imprime e recorte corta o bloco que cai na virada da pagina. */
  .cartao-grafico, .painel-numeros, .anexos-lista, .mapa-caixa, .form-secao,
  .secao-bloco, .resumo-bloco, .grupos-lancamento, .cartao, .modal {
    overflow: visible !important;
    box-shadow: none !important;
  }
  .cabecalho-impressao { display: block !important; }

  /* o documento vai sozinho para o papel: some tudo que e da tela, e a
     folha perde moldura, sombra e margem, porque a margem agora e do papel */
  /* o título da tela saía impresso em cima do documento que vai para a Enel */
  .doc-topo, .doc-faltas, .doc-ressalva, .doc-caixa + .nota { display: none !important; }
  .doc-caixa { display: block; padding: 0; }
  .folha {
    max-width: none; border: 0; box-shadow: none; padding: 0;
    font-size: 12px;
    /* preto de verdade: documento que vai para a concessionaria nao sai
       no cinza-azulado da interface */
    color: #000;
  }
  .folha .doc-titulo, .folha .doc-cargo { color: #000; }
  .folha .lacuna { background: none; color: #000; }
  /* formulário no papel: a margem já é a do papel, e a margem interna da tela
     empurrava a assinatura do orçamento sozinha para a segunda folha */
  .folha.formulario { padding: 0; font-size: 10.5px; }
  .fm-secao { margin-top: 9px; }
  .fm-pe { margin-top: 16px; }
  .doc-assinatura { break-inside: avoid; page-break-inside: avoid; }
}
.cabecalho-impressao { display: none; }
.cabecalho-impressao .linha {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid var(--tinta); padding-bottom: 6px; margin-bottom: 10px;
}
.cabecalho-impressao img { height: 34px; }
.cabecalho-impressao .quem { font-size: 10px; text-align: right; color: #444; }

/* ---------- preencher pela potência ----------
   Fica ao lado do botão de acrescentar, e não acima: é uma alternativa a ele,
   não um passo antes. */
.pela-potencia {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 7px;
  margin-left: 4px;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.pela-potencia .pp-rot { margin-right: 4px; white-space: nowrap; }
.pela-potencia label { white-space: nowrap; }
.pela-potencia input {
  width: 96px;
  font-size: 12.5px;
  padding: 4px 7px;
  text-align: right;
  font-family: var(--num);
}
@media (max-width: 700px) {
  .pela-potencia { margin-left: 0; width: 100%; }
}

/* Os grupos se distinguem pelo espaço e pela superfície, sem uma grade em
   volta de cada informação. As cores abaixo valem só na tela: documentos
   impressos conservam o papel branco e o desenho exigido pela Enel. */
@media screen {
  :root {
    color-scheme: light;
    --tinta: #1A365D;
    --tinta-profunda: #11243F;
    --tinta-media: #0A6F93;
    --acento: #00B4D8;
    --acento-profundo: #0087A3;
    --acento-fundo: #E0F6FB;
    --papel: #F4F7FA;
    --papel-fundo: #E8F2F8;
    --branco: #FFFFFF;
    --texto: #1F2D3D;
    --texto-fraco: #4A5563;
    --texto-apagado: #5B6676;
    --borda: #E4EBF1;
    --borda-forte: #CBD5DF;
    --campo-fundo: #FFF9E9;
    --campo-borda: #A48A50;
    --campo-foco: #FFF3CF;
    --cinza-fase2: #EDF1F6;
    --vermelho: #A73536;
    --vermelho-fundo: #FCEEF0;
    --ambar: #845A12;
    --ambar-fundo: #FCF3DC;
    --verde: #236A4B;
    --verde-fundo: #EAF5EE;
    --nav-fundo: #1A365D;
    --nav-texto: #E6EEF6;
    --nav-fraco: #A9BCD1;
    --nav-ativo: #25497A;
    --superficie-coluna: #E8EEF3;
    --superficie-hover: #F2F7FA;
    --controle-borda: #748596;
    --botao-fundo: #1A365D;
    --botao-texto: #FFFFFF;
    --botao-hover: #25497A;
    --foco: #00B4D8;
    --roxo: #713AA0;
    --roxo-fundo: #F2EAF9;
    --grafico-eixo: #A9B7C9;
    --grafico-grade: #E7EDF3;
    --grafico-destaque: #E0F6FB;
    --grafico-kwp: #00A3C4;
    --grafico-kw: #967015;
    --grafico-projetos: #1A365D;
    --sombra: 0 3px 16px -8px rgba(26, 54, 93, .14);
    --sombra-leve: 0 2px 5px rgba(26, 54, 93, .055);
    --sombra-modal: 0 24px 80px -20px rgba(17, 36, 63, .35);
    --r: 14px;
    --r-mini: 10px;
    --r-campo: 8px;
  }

  :root[data-tema="escuro"] {
    color-scheme: dark;
    --tinta: #E3EEF8;
    --tinta-profunda: #0A1626;
    --tinta-media: #62D2EA;
    --acento: #22C3E3;
    --acento-profundo: #62D2EA;
    --acento-fundo: #0F3441;
    --papel: #0F1A28;
    --papel-fundo: #1E3450;
    --branco: #172637;
    --texto: #E6EEF6;
    --texto-fraco: #B3C2D3;
    --texto-apagado: #A0B1C5;
    --borda: #273A50;
    --borda-forte: #3B5169;
    --campo-fundo: #393321;
    --campo-borda: #AC9256;
    --campo-foco: #463D25;
    --cinza-fase2: #243247;
    --vermelho: #FFB1AC;
    --vermelho-fundo: #422B34;
    --ambar: #F3CF80;
    --ambar-fundo: #393223;
    --verde: #8FDCB3;
    --verde-fundo: #203D34;
    --nav-fundo: #0E2340;
    --nav-texto: #E6EEF6;
    --nav-fraco: #A9BCD1;
    --nav-ativo: #1E3D63;
    --superficie-coluna: #142131;
    --superficie-hover: #22364D;
    --controle-borda: #6F859E;
    --botao-fundo: #22C3E3;
    --botao-texto: #06202A;
    --botao-hover: #62D2EA;
    --foco: #62D2EA;
    --roxo: #D3B2F3;
    --roxo-fundo: #352C49;
    --grafico-eixo: #71849D;
    --grafico-grade: #344357;
    --grafico-destaque: #0F3441;
    --grafico-kwp: #22C3E3;
    --grafico-kw: #E8C375;
    --grafico-projetos: #D7E6F5;
    --sombra: 0 4px 20px -6px rgba(0, 0, 0, .23);
    --sombra-leve: 0 2px 6px rgba(0, 0, 0, .16);
    --sombra-modal: 0 24px 80px -16px rgba(0, 0, 0, .6);
  }

  /* Texto secundário continua legível. Tamanho e peso indicam a hierarquia;
     cinza muito claro e letras miúdas não são usados para criar discrição. */
  body { font-size: 14px; line-height: 1.5; }
  .conteudo { padding: 24px 26px 40px; }
  .tela-topo { border: 0; padding-bottom: 0; margin-bottom: 22px; gap: 16px; }
  .tela-titulo { font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
  .tela-sub { font-size: 13px; margin-top: 6px; }
  .migalha { font-size: 12px; margin-bottom: 12px; }
  .secao-titulo { border: 0; font-size: 13px; letter-spacing: .02em; margin: 24px 0 12px; }
  .secao-titulo .cont { font-size: 12px; }
  .nota, .faltantes, .conferencia, .aviso-permissao { font-size: 13px; padding: 12px 15px; }

  /* A faixa escura dá uma referência constante à navegação nos dois temas.
     A opção atual usa fundo e peso, além da cor, para continuar reconhecível. */
  .topo { background: var(--nav-fundo); min-height: 64px; box-shadow: none; align-items: center; gap: 6px; padding-right: 12px; }
  .marca { border: 0; min-height: 64px; padding: 10px 20px; }
  .marca img { height: 39px; }
  .marca-sub { border: 0; padding-left: 4px; color: var(--nav-fraco); font-size: 10px; letter-spacing: .1em; }
  /* GD NEXUS: o ícone um pouco maior que o nome, como na logo */
  .marca { gap: 9px; }
  .marca .marca-icone { height: 36px; }
  .marca .marca-nome { height: 19px; }
  .marca-sub { margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .18); }
  .topo-busca { padding: 0 12px; }
  .topo-busca input, .topo-perfil select {
    background: rgba(255,255,255,.07); border: 1px solid #8398B4;
    color: #F2F6FC; min-height: 38px; font-size: 13px;
  }
  .topo-perfil select { color-scheme: dark; }
  .topo-perfil select option, .topo-perfil select optgroup { background: var(--nav-fundo); color: var(--nav-texto); }
  .topo-busca input { max-width: 520px; }
  .topo-busca input::placeholder { color: #BBCBE0; }
  .topo-perfil, .topo-empresa, .topo-quem { border: 0; padding: 8px 10px; }
  .topo-perfil label, .topo-empresa .rot, .topo-quem .pap { color: var(--nav-fraco); font-size: 11px; letter-spacing: .03em; }
  .topo-quem .nom { font-size: 13px; }
  .topo-sino { min-width: 40px; height: 40px; margin: 0; }
  .topo-sino:hover { background: var(--nav-ativo); border-color: transparent; }
  .sino-cont, .cartao-novos, .aviso-qtd { color: #FFFFFF; background: #AA353C; }
  .lateral {
    flex-basis: 272px; background: var(--nav-fundo); border: 0;
    min-height: calc(100vh - var(--alt-topo) - var(--alt-faixa));
    padding: 14px 12px 24px; gap: 2px;
    scrollbar-color: #4B6280 transparent;
  }
  .lateral-grupo { color: var(--nav-fraco); font-size: 11px; letter-spacing: .08em; padding: 19px 12px 8px; }
  .lateral a { color: var(--nav-texto); font-size: 15px; line-height: 1.3; min-height: 42px; padding: 10px 12px; gap: 10px; }
  .lateral a .rot { white-space: normal; overflow: visible; text-overflow: clip; }
  .lateral a .ic { color: var(--nav-fraco); width: 20px; height: 20px; flex-basis: 20px; }
  .lateral a:hover { background: rgba(255,255,255,.07); color: #FFFFFF; }
  .lateral a:hover .ic, .lateral a.ativo .ic { color: #DFEBFF; }
  .lateral a.ativo { color: #FFFFFF; background: var(--nav-ativo); font-weight: 600; }
  .lateral a .contagem { color: #D9E7F9; background: rgba(255,255,255,.09); font-size: 11px; }
  .lateral a.ativo .contagem { background: #E0EBFB; color: #203B60; }
  .lateral::-webkit-scrollbar-thumb { background: #4B6280; }
  .bt-recolher { width: 34px; height: 34px; border: 0; background: rgba(255,255,255,.07); color: var(--nav-texto); }
  .bt-recolher:hover { background: var(--nav-ativo); }
  body.menu-recolhido .lateral { flex-basis: 72px; }
  body.menu-recolhido .lateral a { min-height: 42px; }

  /* Cada coluna é um grupo, separado por respiro. O traço da etapa fica só
     no cartão; filtros, cabeçalhos e rodapés deixam de repetir a mesma linha. */
  .barra-filtros { border: 0; padding: 14px; gap: 12px 16px; margin-bottom: 20px; overflow: visible; }
  .filtro { border: 0; padding: 0; flex: 1 1 135px; }
  .filtro label { font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
  .filtro select, .filtro input { min-width: 0; min-height: 38px; font-size: 13px; padding: 7px 10px; }
  .filtro.crescer { flex: 2 1 250px; }
  .filtro.direita { flex: 0 0 auto; }
  .quadro { background: transparent; border: 0; box-shadow: none; border-radius: 0; gap: 16px; padding: 0 0 12px; }
  .quadro > .coluna { flex-basis: 256px; background: var(--superficie-coluna); border: 0; border-radius: 14px; }
  .quadro > .coluna.alvo { background: var(--campo-foco); }
  .quadro > .coluna.alvo .coluna-topo { background: var(--campo-foco); }
  .coluna-topo { background: var(--superficie-coluna); border: 0; padding: 15px 12px 12px; border-radius: 14px 14px 0 0; min-height: 55px; }
  .coluna-nome { font-size: 11.5px; letter-spacing: .025em; line-height: 1.35; gap: 7px; }
  .coluna-nome i { width: 8px; height: 8px; flex-basis: 8px; border: 0; }
  .coluna-cont { background: var(--branco); color: var(--texto-fraco); padding: 2px 7px; border-radius: 7px; font-size: 12px; }
  .coluna-lista { padding: 0 9px 10px; gap: 10px; }
  .col-menu { min-width: 28px; min-height: 28px; color: var(--texto-fraco); }
  .cartao { border-width: 0 0 0 3px; padding: 14px 13px 12px; border-radius: 10px; box-shadow: var(--sombra-leve); }
  .cartao:hover { background: var(--branco); box-shadow: var(--sombra); }
  .cartao-titular { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 7px; }
  .cartao-linha { font-size: 12px; line-height: 1.6; gap: 6px; }
  .cartao-rodape { border: 0; margin-top: 9px; padding-top: 0; font-size: 11.5px; align-items: center; }
  .cartao-tipo { color: var(--roxo); background: var(--roxo-fundo); font-size: 10.5px; letter-spacing: .025em; padding: 3px 8px; margin-bottom: 8px; }
  .cartao-pendencia { border: 0; padding: 8px; margin-top: 9px; }
  .cp-chip { border: 0; background: transparent; padding: 1px 0; font-size: 11px; }
  .cp-motivos { column-gap: 8px; }
  .cp-detalhe, .cartao-pendencia.sem-motivo { font-size: 11.5px; }
  .prazo, .tag { border: 0; padding: 3px 8px; line-height: 1.4; font-size: 11px; letter-spacing: 0; }
  .prazo-hoje { background: var(--vermelho-fundo); font-weight: 700; }
  .cartao.arrastando { background: var(--papel-fundo); border: 2px dashed var(--tinta-media); }
  .bt-nova-coluna { min-height: 40px; border-color: var(--controle-borda); }
  .quadro-ajuda { margin-top: 8px; color: var(--texto-fraco); font-size: 12px; }
  .quadro-ajuda > summary { cursor: pointer; padding: 8px 2px; min-height: 34px; }
  .quadro-ajuda .nota { margin: 4px 0 0; font-size: 12px; border: 0; }

  /* As linhas que identificam um campo continuam visíveis. As divisórias
     entre campos são dispensáveis: rótulo, alinhamento e espaço os agrupam. */
  input[type=text], input[type=date], input[type=number], input[type=email],
  input[type=search], input[type=tel], select, textarea {
    min-height: 40px; font-size: 14px; border-color: var(--controle-borda); line-height: 1.4;
  }
  input::placeholder, textarea::placeholder { color: var(--texto-apagado); opacity: 1; }
  input.digitado, textarea.digitado, select.digitado { background: var(--campo-fundo); border-color: var(--campo-borda); }
  input.digitado:focus, textarea.digitado:focus, select.digitado:focus { background: var(--campo-foco); }
  input[readonly], input[readonly]:focus { background: var(--cinza-fase2); border-color: var(--controle-borda); color: var(--texto-fraco); }
  .form-secao { border: 0; margin-bottom: 20px; }
  .form-secao > h3, .fase2-secao > h3 { border: 0; background: transparent; padding: 20px 20px 8px; font-size: 13px; letter-spacing: .025em; }
  .form-grade { padding: 0 6px 8px; }
  .campo { border: 0; padding: 10px 14px 14px; }
  .campo > label { font-size: 11.5px; line-height: 1.4; letter-spacing: .025em; margin-bottom: 6px; }
  .legenda-cor { border: 0; padding: 12px 20px; font-size: 12px; }
  .passos { border: 0; padding: 6px; gap: 6px; border-radius: 12px; margin-bottom: 20px; }
  .passo { border: 0; border-radius: 8px; padding: 12px 14px; }
  .passo .n { font-size: 11px; letter-spacing: .025em; }
  .passo .t { font-size: 14px; margin-top: 4px; }
  .passo.ativo { background: var(--papel-fundo); box-shadow: inset 0 -3px var(--tinta-media); }
  .barra-navegacao { border: 0; border-radius: 12px; padding: 14px 18px; margin-top: 16px; }
  .fase2-campo, .calc-campo { border: 0; border-radius: 8px; }
  .fase2-campo input { background: var(--cinza-fase2); border-color: var(--controle-borda); }
  .calc-grade { border: 0; gap: 8px; }
  .calc-campo { background: var(--cinza-fase2); padding: 12px; }
  .calc-conta, .conta-campo { font-size: 12px; }
  .calc-campo label { font-size: 11.5px; margin-bottom: 7px; }
  .calc-valor { font-size: 17px; }
  .dl { border: 0; gap: 4px 12px; padding: 6px; }
  .dl > div { border: 0; padding: 10px 12px; }
  .dl dt { font-size: 11px; letter-spacing: .035em; margin-bottom: 4px; }
  .dl dd { font-size: 14px; }

  /* Tabelas mantêm alinhamento e números tabulares, com apenas uma separação
     horizontal discreta. O destaque de atenção continua escrito e colorido. */
  .tabela-caixa { border: 0; }
  table.tabela { font-size: 13.5px; }
  table.tabela th { border: 0; background: var(--superficie-hover); color: var(--texto-fraco); padding: 13px 14px; font-size: 11px; letter-spacing: .045em; font-weight: 600; }
  table.tabela td { border-right: 0; border-bottom: 1px solid var(--borda); padding: 12px 14px; line-height: 1.5; }
  table.tabela tbody tr:last-child td { border-bottom: 0; }
  table.tabela tbody tr:hover td { background: var(--superficie-hover); }
  table.tabela tfoot td { border: 0; background: var(--papel-fundo); padding-top: 14px; padding-bottom: 14px; }
  table.tabela input, table.tabela select { min-height: 36px; }
  .gl-cabeca, .sb-cabeca { padding: 14px; }
  .gl-nome, .gl-valor, .sb-nome { font-size: 14px; }
  .gl-cat, .gl-qtd, .sb-previa, .sb-cont { font-size: 12px; }
  .sb-corpo, .gl-corpo { border: 0; padding: 12px; }
  .sb-nome { letter-spacing: .02em; }
  .grupo-lanc { border-color: var(--borda); }
  .sugestao .sug-texto { color: var(--ambar); }
  .numero { border: 0; padding: 20px; }
  .numero .rot { font-size: 12px; }
  .numero .val { font-size: 30px; font-weight: 600; letter-spacing: -.04em; }
  .numero.com-detalhe:hover { background: var(--superficie-hover); }
  .cartao-grafico { border: 0; }
  .grade-painel, .duas-colunas { gap: 20px; }
  .cg-topo { padding: 20px 20px 6px; }
  .cg-topo h2 { font-size: 12px; letter-spacing: .03em; }
  .cg-obs, .gr-legenda { font-size: 12px; }
  .cg-tabela summary, .lista-projetos-mapa summary { min-height: 36px; font-size: 12px; padding: 10px 16px; }
  .faixa-meses { border: 0; padding: 5px; }
  .faixa-meses .mes { border: 0; }
  .faixa-meses .mes.ativo { background: var(--botao-fundo); color: var(--botao-texto); }
  .faixa-meses .mes.ativo:hover { background: var(--botao-hover); }
  .faixa-meses .mes.ativo .m, .faixa-meses .mes.ativo .q { color: var(--botao-texto); }
  .gr-eixo, .gr-valor { font-size: 10px; }
  .gr-eixo-rot { font-size: 10px; letter-spacing: .03em; }
  .gr-legenda.coluna { min-height: 0; border: 0; background: transparent; }

  /* Botões e foco são fáceis de encontrar mesmo com os contornos reduzidos.
     O tema muda a aparência sem mudar a posição ou a função das ações. */
  .bt { min-height: 40px; padding: 9px 15px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .bt-mini { min-height: 30px; font-size: 12px; padding: 5px 10px; }
  .bt-principal, .grupo-bt .bt.ativo, .entrada-entrar, .troca-base button.ativo { background: var(--botao-fundo); border-color: transparent; color: var(--botao-texto); }
  .bt-principal:hover, .entrada-entrar:hover { background: var(--botao-hover); color: var(--botao-texto); }
  .bt-perigo { border-color: var(--borda-forte); }
  .grupo-bt { gap: 4px; }
  .grupo-bt .bt { border-width: 1px; }
  .fechar { min-width: 34px; min-height: 34px; border-radius: 8px; }
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--foco); outline-offset: 3px;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--foco); box-shadow: 0 0 0 3px var(--papel-fundo); }
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  .entrada-form input:focus-visible, .topo-busca input:focus-visible, .topo-perfil select:focus-visible {
    outline: 2px solid var(--foco); outline-offset: 3px;
  }
  .topo :focus-visible, .lateral :focus-visible,
  .topo-busca input:focus-visible, .topo-perfil select:focus-visible { outline-color: #E8C774; }
  .bt-tema { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--borda-forte); border-radius: 9px; background: var(--branco); color: var(--texto); font: 600 12px var(--ui); cursor: pointer; white-space: nowrap; }
  .bt-tema svg { width: 19px; height: 19px; flex: 0 0 19px; }
  .bt-tema:hover { background: var(--superficie-hover); }
  .topo .bt-tema { color: var(--nav-texto); background: rgba(255,255,255,.06); border-color: transparent; margin-left: 4px; }
  .topo .bt-tema:hover { background: var(--nav-ativo); }
  .modal { background: var(--branco); }
  .modal-corpo { padding: 20px; }
  .modal-topo { border: 0; padding: 20px 22px 10px; }
  .modal-topo h2 { font-size: 20px; font-weight: 700; }
  .modal-rodape { border: 0; padding: 16px 22px 20px; }
  .modal-fundo, .gaveta-fundo { background: rgba(8,18,32,.6); }
  .gaveta-topo { background: var(--nav-fundo); }
  .aviso { border: 0; border-radius: 12px; padding: 14px 20px; box-shadow: var(--sombra-modal); }
  .resumo-bloco { border: 0; }
  .resumo-bloco > summary { padding: 16px; background: var(--branco); }
  .resumo-bloco > summary h2 { font-size: 13px; letter-spacing: .025em; }
  .anexos-lista, .arquivo-caixa, .com-novo, .com-item { border: 0; }
  .anexo-linha { padding: 14px 16px; border-color: var(--borda); }
  .anexo-nome b { font-size: 13px; }
  .com-lista { gap: 8px; }
  .com-novo, .com-item { padding: 16px; }
  .com-item:first-child { border: 0; }
  .com-texto, .com-cabeca b { font-size: 14px; }
  .com-perfil, .com-quando, .com-acoes { font-size: 11.5px; }
  .com-acoes button { min-height: 28px; padding: 3px 4px; }
  .miniatura.vazia, .arquivo-caixa.sistema, .arquivo-caixa.sistema .miniatura { background: var(--cinza-fase2); }
  .arquivo-caixa.sistema.pronto, .arquivo-caixa.sistema .miniatura.sistema.emitido { background: var(--verde-fundo); }
  .link-sigla, .link-caixa.favorito .link-sigla, .grupo-pins .gp-corpo { background: var(--botao-fundo); color: var(--botao-texto); }

  /* O mapa mantém as cores geográficas. Só os controles e os balões seguem
     o tema para a leitura não saltar entre fundos claros e escuros. */
  .legenda-mapa, .leaflet-popup-content-wrapper, .leaflet-popup-tip,
  .balao-projeto .leaflet-popup-content-wrapper, .balao-projeto .leaflet-popup-tip { background: var(--branco); color: var(--texto); }
  .leaflet-bar a, .leaflet-control-layers { background: var(--branco); color: var(--texto); border-color: var(--borda); }
  .leaflet-bar a:hover { background: var(--papel-fundo); color: var(--texto); }
  .leaflet-container .leaflet-control-attribution { background: var(--branco); color: var(--texto-fraco); }
  .leaflet-container .leaflet-control-attribution a, .leaflet-container a.leaflet-popup-close-button { color: var(--tinta-media); }

  .entrada, .entrada-painel { background: var(--papel); }
  .entrada-painel { position: relative; padding: 90px 36px 48px; }
  .entrada-painel > .bt-tema { position: absolute; top: 24px; right: 28px; }
  .entrada-cartao { max-width: 420px; }
  .entrada-form input[type=email], .entrada-form input[type=password], .entrada-form input[type=text] { background: var(--branco); border-color: var(--controle-borda); height: 48px; font-size: 15px; }
  .entrada-form label:not(.entrada-lembrar) { font-size: 14px; }
  .entrada-entrar { min-height: 48px; }
  .entrada-link, .entrada-rodape, .entrada-rodape .entrada-link { font-size: 13px; }
  .entrada-rodape { border: 0; }
  .entrada-assinatura { color: #7291C2; }
  .entrada-olho { width: 40px; height: 40px; }
  .entrada-lembrar input { accent-color: var(--botao-fundo); }
  .entrada-ponto { min-width: 24px; min-height: 24px; border: 8px solid transparent; background-clip: padding-box; }

  /* O papel permanece claro inclusive dentro do tema escuro. A paleta fica
     restrita à folha para assinaturas, tabelas e ressalvas não perderem cor. */
  .folha {
    color-scheme: light;
    --texto: #1D2433; --texto-fraco: #5B6472; --texto-apagado: #657185;
    --tinta: #1A365D; --tinta-profunda: #11243F; --tinta-media: #0A6F93;
    --papel: #F4F7FA; --papel-fundo: #E8F2F8; --branco: #FFFFFF;
    --borda: #E6ECF1; --borda-forte: #D3DCE5;
    --vermelho: #A73536; --vermelho-fundo: #FCEEEC;
    --ambar: #845A12; --ambar-fundo: #FDF6EA;
    --verde: #236A4B; --verde-fundo: #EDF6F1;
  }
}

/* Em telas menores o menu vira uma faixa horizontal. O conteúdo conserva
   sua largura e cada grupo mantém a própria rolagem, sem apertar os textos. */
@media screen and (max-width: 1200px) {
  .topo .bt-tema-texto { display: none; }
  .topo .bt-tema { min-width: 40px; padding: 9px; }
  .marca-sub { display: none; }
  .topo-perfil { gap: 6px; padding: 6px; }
  .topo-perfil select { max-width: 175px; }
  .topo-quem { padding: 6px; }
  .topo-quem .nom { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conteudo { padding: 20px; }
}
@media screen and (max-width: 860px) {
  .topo { gap: 4px; padding: 4px 10px; min-height: 58px; }
  .marca { min-height: 50px; padding: 7px 4px; }
  .marca img { height: 34px; }
  .marca .marca-icone { height: 31px; }
  .marca .marca-nome { height: 16px; }
  .topo-busca { padding: 4px 0; border: 0; }
  .topo-perfil { margin-left: auto; }
  .topo-perfil label { display: none; }
  .topo-quem { margin-left: auto; }
  .topo-quem .nom { max-width: 130px; font-size: 12px; }
  .lateral, body.menu-recolhido .lateral { flex-direction: row; min-height: 0; max-height: none; padding: 8px 10px; gap: 6px; overflow-x: auto; position: relative; top: auto; }
  .lateral-cabeca, .lateral-grupo, .bt-recolher { display: none; }
  .lateral a, body.menu-recolhido .lateral a { flex: 0 0 auto; min-height: 40px; padding: 9px 12px; font-size: 14px; }
  .lateral a .rot { white-space: nowrap; }
  body.menu-recolhido .lateral a .rot { display: block; }
  .conteudo { padding: 20px 14px 32px; }
  .tela-titulo { font-size: 23px; }
  .barra-filtros { gap: 12px; padding: 12px; }
  .filtro { flex-basis: calc(50% - 12px); }
  .filtro.crescer, .filtro.direita { flex-basis: 100%; }
  .quadro > .coluna { flex-basis: min(300px, 84vw); }
  .quadro { gap: 12px; }
  .campo { padding-left: 12px; padding-right: 12px; }
  .numero { padding: 16px; }
  .numero .val { font-size: 26px; }
  .form-secao > h3 { padding-left: 18px; }
}
@media screen and (max-width: 520px) {
  .topo-perfil select { max-width: 140px; }
  .topo-quem .quem { max-width: 100px; }
  .topo-quem .nom { max-width: 100px; }
  .marca img { height: 29px; }
  .marca .marca-icone { height: 27px; }
  .marca .marca-nome { height: 14px; }
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea,
  .entrada-form input[type=email], .entrada-form input[type=password], .entrada-form input[type=text],
  .topo-busca input, .topo-perfil select, .filtro input, .filtro select { font-size: 16px; }
  .entrada-painel { padding: 84px 24px 32px; }
  .entrada-painel > .bt-tema { top: 20px; right: 20px; }
  .tela-acoes { gap: 8px; }
  .modal-corpo { padding: 14px; }
}
@media print {
  .bt-tema { display: none !important; }
}

/* ==========================================================================
   Resumo do projeto no desenho do projeto-prj12.html (rodada de 25/09)
   Cores só pelas variáveis do tema, para o escuro sair certo sozinho.
   ========================================================================== */
.pj-cabeca { align-items: flex-end; }
.pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.pj-codigo { color: var(--texto); font-weight: 700; }
.pj-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 9px; border-radius: var(--r-pilula);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--papel-fundo); color: var(--tinta);
}
.pj-selo.pendencia { background: var(--ambar-fundo); color: var(--ambar); }
.pj-selo.ok { background: var(--verde-fundo); color: var(--verde); }

.pj-numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0;
  background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--r);
}
.pj-numeros > div { padding: 16px 22px; border-left: 1px solid var(--borda-forte); }
.pj-numeros > div:first-child { border-left: 0; }
.pj-numeros dt { font-size: 12.5px; color: var(--texto-fraco); }
.pj-numeros dd { margin: 4px 0 0; font-family: var(--titulo); font-size: 19px; font-weight: 700; color: var(--texto); }
.pj-numeros small { display: block; margin-top: 2px; font-family: var(--ui); font-size: 12.5px; font-weight: 500; color: var(--texto-fraco); }

.pj-painel { background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--r); }
.pj-painel h2 { margin: 0; font-family: var(--titulo); font-size: 17px; font-weight: 700; color: var(--texto); }
.pj-painel-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pj-painel-topo p { margin: 0; color: var(--texto-fraco); font-size: 13.5px; }

/* andamento: uma bolinha por coluna do quadro, ligadas por um traço */
.pj-andamento { padding: 22px 26px 26px; }
.pj-passos { display: grid; grid-template-columns: repeat(var(--passos, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pj-passo { position: relative; padding-right: 10px; }
.pj-passo::before {
  content: ""; position: absolute; top: 13px; left: 34px; right: 6px; height: 3px;
  border-radius: 2px; background: var(--borda-forte);
}
.pj-passo:last-child::before { display: none; }
.pj-no {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--branco);
  border: 2px solid var(--borda-forte); color: var(--branco);
}
.pj-no svg { width: 16px; height: 16px; }
.pj-passo.feito .pj-no { background: var(--tinta); border-color: var(--tinta); }
.pj-passo.feito::before { background: var(--tinta); }
.pj-passo.atual .pj-no { border-color: var(--acento); background: var(--acento-fundo); box-shadow: 0 0 0 4px var(--acento-fundo); }
.pj-passo.atual::before { background: repeating-linear-gradient(90deg, var(--borda-forte) 0 6px, transparent 6px 12px); }
.pj-passo-nome { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--texto); overflow-wrap: anywhere; }
.pj-passo.depois .pj-passo-nome { color: var(--texto-fraco); font-weight: 500; }
.pj-passo-nota { margin: 2px 0 0; font-size: 12px; color: var(--texto-fraco); }

/* abas à esquerda, o que fazer agora e os prazos à direita */
.pj-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin: 18px 0 30px; }
.pj-lado { display: grid; gap: 14px; position: sticky; top: 12px; }
.pj-abas { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--borda-forte); overflow-x: auto; }
.pj-aba {
  display: flex; align-items: center; gap: 7px; padding: 15px 12px 12px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-weight: 600; color: var(--texto-fraco); cursor: pointer; white-space: nowrap;
}
.pj-aba:hover { color: var(--texto); }
.pj-aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.pj-conta { padding: 1px 8px; border-radius: var(--r-pilula); background: var(--papel-fundo); color: var(--tinta); font-size: 11.5px; font-weight: 700; }
.pj-aba-painel { padding: 4px 24px 24px; }
.pj-aba-painel[hidden] { display: none; }
.pj-aba-painel > .comentarios, .pj-aba-painel > .secao-titulo:first-child { margin-top: 16px; }

/* aba Dados */
.pj-grupo { padding: 20px 0; border-top: 1px solid var(--borda-forte); }
.pj-grupo:first-child { border-top: 0; }
.pj-grupo-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.pj-grupo h3 { margin: 0; font-family: var(--titulo); font-size: 15px; font-weight: 700; color: var(--texto); }
.pj-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 0; }
.pj-kv > div.larga { grid-column: 1 / -1; }
.pj-kv dt { font-size: 12.5px; color: var(--texto-fraco); }
.pj-kv dd { margin: 2px 0 0; font-weight: 500; color: var(--texto); overflow-wrap: anywhere; }
.pj-kv dd.n { font-family: var(--num); font-variant-numeric: tabular-nums; }
.pj-sub { margin-top: 14px; }

/* aba Documentos */
.pj-docs-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 0 14px; }
.pj-docs-topo p { margin: 0; font-weight: 600; color: var(--texto); }
.pj-docs-topo p span { color: var(--texto-fraco); font-weight: 500; }
.pj-barra { flex: 1 1 180px; max-width: 280px; height: 8px; border-radius: 99px; background: var(--papel-fundo); overflow: hidden; }
.pj-barra i { display: block; height: 100%; background: var(--tinta); border-radius: 99px; }
.pj-docs { margin: 0; padding: 0; list-style: none; border: 1px solid var(--borda-forte); border-radius: var(--r-campo); overflow: hidden; }
.pj-doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid var(--borda-forte); }
.pj-doc:first-child { border-top: 0; }
/* a linha de anexo guarda a classe antiga, mas não o desenho dela */
.pj-docs.anexos-lista { box-shadow: none; }
.pj-docs .pj-doc.anexo-linha { border-radius: 0; border-bottom: 0; }
.pj-doc.falta { background: var(--ambar-fundo); box-shadow: inset 4px 0 0 var(--acento); }
.pj-doc-tipo {
  width: 40px; height: 40px; border-radius: var(--r-campo); display: grid; place-items: center;
  background: var(--papel-fundo); color: var(--tinta); font-family: var(--num); font-size: 11px; font-weight: 700;
}
.pj-doc-nome { margin: 0; font-weight: 600; color: var(--texto); }
.pj-doc-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-fraco); overflow-wrap: anywhere; }
.pj-aba-painel .rodape-fase2 { margin-top: 18px; }

/* aba Histórico: linha do tempo das colunas */
.pj-tempo { margin: 0; padding: 20px 4px 4px; list-style: none; }
.pj-tempo li { position: relative; padding: 0 0 20px 30px; }
.pj-tempo li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta); }
.pj-tempo li::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: -1px; width: 2px; background: var(--borda-forte); }
.pj-tempo li:last-child::after { display: none; }
.pj-tempo li:first-child::before { background: var(--acento); box-shadow: 0 0 0 4px var(--acento-fundo); }
.pj-tempo time { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.pj-tempo p { margin: 0; font-weight: 500; color: var(--texto); }
.pj-tempo .pj-tempo-nota { font-size: 12.5px; font-weight: 400; color: var(--texto-fraco); }

/* lateral */
.pj-proxima { padding: 20px; border-radius: var(--r); background: var(--tinta-profunda); color: #fff; }
.pj-proxima h2 { margin: 0; font-family: var(--titulo); font-size: 16px; color: #fff; }
.pj-proxima p { margin: 10px 0 0; color: #D3DCF0; font-size: 14px; }
.pj-proxima p strong { color: #fff; }
.pj-proxima .cp-chip { color: #fff; }
.pj-proxima .bt { width: 100%; margin-top: 16px; justify-content: center; }
.pj-bt-acento { background: var(--acento); border-color: var(--acento); color: #06202A; font-weight: 700; }
.pj-prazos { padding: 18px 20px; }
.pj-prazos h2 { font-size: 15px; margin-bottom: 12px; }
.pj-prazos ul { display: grid; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--texto); }
.pj-prazos li > span { display: block; font-size: 12.5px; color: var(--texto-fraco); }
.pj-prazos strong { font-weight: 600; }
.pj-prazos em { font-style: normal; font-weight: 500; color: var(--texto-fraco); }
.pj-prazos small { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-fraco); }

@media (max-width: 960px) {
  .pj-corpo { grid-template-columns: minmax(0, 1fr); }
  .pj-lado { position: static; order: -1; }
}
@media (max-width: 720px) {
  .pj-numeros { grid-template-columns: repeat(2, 1fr); }
  .pj-numeros > div:nth-child(odd) { border-left: 0; }
  .pj-numeros > div:nth-child(n+3) { border-top: 1px solid var(--borda-forte); }
  .pj-andamento { padding: 18px 16px 20px; }
  .pj-passos { grid-template-columns: 1fr; }
  .pj-passo { padding: 0 0 18px 42px; min-height: 46px; }
  .pj-passo:last-child { padding-bottom: 0; }
  .pj-no { position: absolute; left: 0; top: 0; }
  .pj-passo::before { left: 13px; right: auto; top: 30px; bottom: 2px; width: 3px; height: auto; }
  .pj-passo.atual::before { background: repeating-linear-gradient(180deg, var(--borda-forte) 0 6px, transparent 6px 12px); }
  .pj-passo-nome { margin-top: 4px; }
  .pj-aba { padding: 14px 9px 11px; }
  .pj-aba-painel { padding: 4px 14px 18px; }
  .pj-kv { grid-template-columns: 1fr; }
  .pj-doc { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 12px; }
  .pj-doc > div { grid-column: 2 / -1; }
  .pj-doc > .tag { grid-column: 2; justify-self: start; }
}
@media print {
  /* papel não tem clique: as quatro abas saem uma embaixo da outra */
  .pj-abas, .pj-lado .bt, .pj-grupo-topo .bt, .pj-doc .bt { display: none !important; }
  .pj-aba-painel[hidden] { display: block !important; }
  .pj-corpo { display: block; }
  .pj-lado { position: static; margin-top: 12px; }
  .pj-proxima { background: #fff; color: #000; border: 1px solid #999; }
  .pj-proxima h2, .pj-proxima p, .pj-proxima p strong { color: #000; }
  .pj-painel, .pj-numeros { break-inside: avoid; page-break-inside: avoid; }
}

/* ==========================================================================
   Formulários da Enel no desenho dela (rodada de correções de 25/09)
   A grade, as bordas e as fontes vêm do arquivo da Enel (enel-modelos.js).
   Aqui só o que o Excel faz sozinho: fonte Calibri, texto que passa por cima
   da célula vizinha vazia, e a grade encolhida inteira para caber na folha.
   ========================================================================== */
.enel-folha { max-width: 760px; padding: 38px; line-height: normal; overflow-x: auto; }
.enel-folha.enel-deitada { max-width: 1100px; }
.enel-grade {
  border-collapse: collapse; table-layout: fixed; zoom: var(--enel-tela);
  color: #000; background: #fff;
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; font-size: 11pt;
}
.enel-grade td {
  padding: 0 2px; overflow: visible; white-space: nowrap; vertical-align: bottom;
  line-height: 1.2;
}
@media print {
  .folha.enel-folha { padding: 0; overflow: visible; }
  .enel-grade { zoom: var(--enel-papel); }
  .enel-deitada { page: enel-deitada; }
}
@page enel-deitada { size: A4 landscape; }