/* Hertz Energia — painel operacional.
   Paleta da marca; identificadores sempre em monoespaçada, como leitura de
   medidor. Cores só carregam significado de prazo — o verde vivo da marca é
   justamente o "dentro do prazo", então identidade e semáforo não brigam.

   A Funnel Sans é servida daqui mesmo, não do Google: funciona offline e não
   depende de terceiro. É variável, um arquivo cobre os pesos 300 a 800. */

@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/funnel-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/funnel-sans-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --tinta: #353535;
  --papel: #f4f6f1;
  --cartao: #ffffff;
  --linha: #e1e6dc;
  --fraco: #6b7268;
  --petroleo: #1b4441;
  --petroleo-claro: #f1fbe6;
  --atraso: #9e2b1c;
  --atraso-fundo: #fbecea;
  --alerta: #8a5300;
  --alerta-fundo: #fdf3e2;
  /* Verde vivo da marca. Só como preenchimento: em texto não passa em
     contraste sobre fundo claro. */
  --prazo: #7dce15;
  --prazo-claro: #c7f78f;
  --neutro: #8b9199;
  /* Texto secundário sobre o menu escuro, onde --fraco não teria contraste. */
  --rail-fraco: #9db9ad;
  --sans: "Funnel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  --raio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--petroleo); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fraco); }

.dado { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

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

.app { display: flex; min-height: 100vh; }

.rail {
  width: 190px;
  flex: 0 0 190px;
  background: var(--petroleo);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail a {
  color: #c3d6ce;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--raio);
  font-size: 14.5px;
}
.rail a:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
/* Clareado em vez de colorido: usar o verde da marca aqui faria a navegação
   competir com o significado de prazo. */
.rail a.on { background: rgba(255, 255, 255, 0.16); color: #fff; }
.rail-fim { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.rail-fim form { margin: 0; }
.sair {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--rail-fraco);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--raio);
}
.sair:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }

.marca { padding: 0 10px 20px; }
.marca-nome { display: block; color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.marca-sub { display: block; color: var(--rail-fraco); font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; }

.conteudo { flex: 1; padding: 28px 32px 60px; max-width: 1180px; }

.cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.cabeca .legenda { margin: 0 0 3px; }
.legenda { color: var(--fraco); font-size: 13px; margin: 4px 0 0; }
.acoes { display: flex; gap: 8px; }

/* -------------------------------------------------------------------- filas */

.filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fila { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 16px 16px 12px; }
.fila > header { margin-bottom: 10px; }
.fila h2 { display: flex; align-items: center; gap: 8px; }
.contagem {
  background: var(--papel);
  color: var(--tinta);
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 12px;
}
.t-late h2, .t-late .contagem { color: var(--atraso); }
.t-late .contagem { background: var(--atraso-fundo); }
.t-soon h2, .t-soon .contagem { color: var(--alerta); }
.t-soon .contagem { background: var(--alerta-fundo); }
.t-chase h2, .t-chase .contagem { color: var(--petroleo); }
.t-chase .contagem { background: var(--petroleo-claro); }

/* ------------------------------------------------------------------- linhas */

.lista { display: flex; flex-direction: column; }
.lista.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 4px 0; }

.linha {
  display: block;
  padding: 9px 12px 11px;
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.lista .linha:last-child { border-bottom: 0; }
a.linha:hover { background: var(--papel); }
.linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.linha-titulo { font-weight: 500; }
.linha-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 2px; color: var(--fraco); font-size: 13px; }
.linha-nota { display: block; margin-top: 4px; color: var(--fraco); font-size: 13px; }
.quem { color: var(--tinta); }
.apelido { font-size: 12.5px; }
.destaque { color: var(--atraso); }
.pendente { color: var(--alerta); }
.linha-prazo { white-space: nowrap; color: var(--fraco); }
.p-atrasada .linha-prazo { color: var(--atraso); font-weight: 500; }
.p-vencendo .linha-prazo { color: var(--alerta); }
.p-encerrada .linha-prazo { color: var(--neutro); }

/* assinatura: quanto do prazo regulatório já queimou */
.gauge { display: block; height: 2px; background: var(--linha); margin-top: 8px; border-radius: 2px; }
.gauge-fill { display: block; height: 100%; background: var(--prazo); border-radius: 2px; }
.p-vencendo .gauge-fill { background: var(--alerta); }
.p-atrasada .gauge-fill { background: var(--atraso); }
.p-encerrada .gauge-fill { background: var(--neutro); }

.mais { display: inline-block; margin-top: 10px; font-size: 13px; }
.vazio { color: var(--fraco); font-size: 13.5px; padding: 10px 12px; margin: 0; }

/* ------------------------------------------------------------- cartões/form */

.duas { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.duas > div { display: flex; flex-direction: column; gap: 16px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 16px; }
.cartao h2 { margin-bottom: 12px; }
.cartao.estreito { max-width: 560px; }

.form { display: flex; flex-direction: column; gap: 12px; }
.form-contrato {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.form-contrato .campo-observacoes { grid-column: 1 / -1; }
.form-contrato .acoes { grid-column: 1 / -1; }
.campo-linha { display: flex; flex-direction: column; gap: 4px; }
.campo-linha label { font-size: 12.5px; color: var(--fraco); }
.campo-linha small { font-size: 12px; color: var(--fraco); }
.campo-linha.erro .campo { border-color: var(--atraso); }
.msg-erro { color: var(--atraso); font-size: 12.5px; }

/* Formulário longo: o que não se preenche no lançamento fica recolhido. Os
   campos continuam no formulário e continuam sendo enviados — só não ocupam a
   tela na hora da pressa. */
.mais-campos { display: flex; flex-direction: column; gap: 12px; }
.mais-campos > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--petroleo);
  padding: 8px 0 2px;
  border-top: 1px solid var(--linha);
}
.mais-campos > summary:hover { color: var(--tinta); }
.mais-campos > summary:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }

.campo {
  font: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--tinta);
  width: 100%;
}
.campo:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 1px; border-color: var(--petroleo); }
textarea.campo { resize: vertical; }

.botao {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--petroleo);
  border-radius: var(--raio);
  background: var(--petroleo);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
}
.botao:hover { background: #0c3f4c; }
.botao.secundario { background: var(--cartao); color: var(--petroleo); }
.botao.secundario:hover { background: var(--petroleo-claro); }
.botao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* ------------------------------------------------------------------ filtros */

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filtros .campo { width: auto; }
.filtros .campo.largo { flex: 1; min-width: 260px; }
.periodo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fraco); }
.limpar { font-size: 13px; color: var(--fraco); }
.resumo { color: var(--fraco); font-size: 13px; margin: 0 0 10px; }

.paginas { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 16px; font-size: 14px; }

/* ------------------------------------------------------------- selo e tempo */

.selo { padding: 5px 11px; border-radius: 20px; font-size: 13px; font-weight: 500; background: var(--papel); color: var(--fraco); white-space: nowrap; }
.selo.p-atrasada { background: var(--atraso-fundo); color: var(--atraso); }
.selo.p-vencendo { background: var(--alerta-fundo); color: var(--alerta); }
/* Texto no petróleo da marca: o verde vivo serve de fundo, não de letra. */
.selo.p-no_prazo { background: var(--prazo-claro); color: var(--petroleo); }

.tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--linha); }
.tempo li { padding: 0 0 14px 12px; position: relative; font-size: 14px; }
.tempo li::before { content: ""; position: absolute; left: -19px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--petroleo); }
.tempo li.vazio::before { display: none; }
.tempo .data { display: block; color: var(--fraco); }
.tempo p { margin: 3px 0 0; color: var(--fraco); font-size: 13.5px; }
/* Discreto, mas sempre visível: escondê-lo até o hover o tornaria inalcançável
   em tela de toque. */
.editar-andamento { margin-left: 8px; font-size: 12.5px; color: var(--fraco); text-decoration: none; }
.editar-andamento:hover, .editar-andamento:focus-visible { color: var(--petroleo); text-decoration: underline; }

/* ------------------------------------------------------------------- avisos */

.aviso { padding: 10px 14px; border-radius: var(--raio); margin-bottom: 14px; font-size: 14px; background: var(--petroleo-claro); border: 1px solid #d8ecc0; }
.aviso.success { background: #e8f3ec; border-color: #cbe3d5; }
.aviso.error, .aviso.atencao { background: var(--alerta-fundo); border-color: #f0dcbb; }

/* ------------------------------------------------------------------ entrada */

.tela-entrada { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--petroleo); }
.entrada { background: var(--cartao); padding: 30px; border-radius: 12px; width: 320px; }
.entrada .marca { padding: 0 0 20px; }
.entrada .marca-nome { color: var(--tinta); }
/* No cartão claro o tom do menu escuro não teria contraste. */
.entrada .marca-sub { color: var(--fraco); }
.entrada .botao { width: 100%; text-align: center; align-self: stretch; }

/* -------------------------------------------------------------- responsivo */

@media (max-width: 980px) {
  .filas, .duas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .rail { width: auto; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; }
  .marca { padding: 0 12px 0 4px; }
  .rail-fim { margin-top: 0; margin-left: auto; flex-direction: row; }
  .conteudo { padding: 18px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* bloco recolhido para formulários secundários */
.adicionar { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 10px; }
.adicionar summary { cursor: pointer; font-size: 13.5px; color: var(--petroleo); }
.adicionar summary:hover { text-decoration: underline; }
.adicionar .form { margin-top: 12px; }
/* ------------------------------------------------------- navegacao da UC */

.abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin: -4px 0 16px;
  padding: 0 0 1px;
  border-bottom: 1px solid var(--linha);
}
.abas a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 11px;
  border-bottom: 2px solid transparent;
  color: var(--fraco);
  text-decoration: none;
  white-space: nowrap;
}
.abas a:hover { color: var(--tinta); }
.abas a.on {
  border-bottom-color: var(--petroleo);
  color: var(--tinta);
  font-weight: 500;
}

/* --------------------------------------------------------- cargas e tabelas */

.instrucao-carga { margin: 10px 0 14px; }
.secao-seguinte { margin-top: 16px; }
.grade-carga {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.grade-carga .campo-data_verificacao { grid-column: span 2; }
.grade-carga .campo-descricao { grid-column: span 4; }
.grade-carga .campo-quantidade { grid-column: span 2; }
.grade-carga .campo-potencia_unitaria { grid-column: span 2; }
.grade-carga .campo-unidade_potencia { grid-column: span 2; }
.grade-carga .campo-observacoes { grid-column: 1 / span 10; }
.grade-carga .botao {
  grid-column: 11 / span 2;
  width: 100%;
  align-self: end;
  margin-bottom: 1px;
}
.tabela-cartao { margin-top: 16px; padding: 0; overflow: hidden; }
.tabela-cartao > header { padding: 16px 16px 4px; }
.tabela-wrap { overflow-x: auto; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.tabela th,
.tabela td {
  padding: 10px 12px;
  border-top: 1px solid var(--linha);
  text-align: left;
  vertical-align: middle;
}
.tabela th {
  color: var(--fraco);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tabela td small {
  display: block;
  margin-top: 2px;
  color: var(--fraco);
  font-size: 12px;
}
/* ---------------------------------------------------------------- financeiro */
/* Entradas, saídas e balanço lado a lado. A cor aqui distingue dinheiro que
   entra de dinheiro que sai — é o único lugar fora do prazo onde ela carrega
   significado, e por isso usa a marca em vez do vermelho de atraso. */
.fin-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.fin-cartao {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fin-cartao.entra { border-left-color: var(--prazo); }
.fin-cartao.sai { border-left-color: var(--petroleo); }
.fin-cartao.positivo { border-left-color: var(--prazo); background: var(--petroleo-claro); }
.fin-cartao.negativo { border-left-color: var(--atraso); background: var(--atraso-fundo); }
.fin-cartao b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.fin-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fraco);
}
.fin-detalhe { font-size: 12px; color: var(--fraco); }

/* Os dois recortes lado a lado: o mês fechado e a janela de caixa de 10 a 10.
   O ativo ganha a borda da marca para não restar dúvida de qual está valendo. */
.fin-modos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.fin-modo {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.fin-modo.ativo { border-color: var(--petroleo); background: var(--petroleo-claro); }

/* Editar e desativar na mesma célula, sem um empurrar o outro para baixo. */
.fin-acoes { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.fin-acoes .form-inline { display: inline; }

.fin-fixo {
  display: inline-block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--petroleo);
  border: 1px solid var(--petroleo);
  border-radius: 3px;
  padding: 0 5px;
}

.fin-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.fin-lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
.fin-lista li:last-child { border-bottom: none; }

/* Os três números que resumem a usina: kWp, kW de inversores e o over. */
.numeros-usina { display: flex; flex-wrap: wrap; gap: 28px; margin: 4px 0 2px; }
.numero-usina { display: flex; flex-direction: column; gap: 1px; }
.numero-usina b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.numero-usina span { font-size: 12px; color: var(--fraco); }

.registro-inativo { background: var(--papel); color: var(--fraco); }
.status-registro {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--linha);
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
}
.form-inline { margin: 0; }
.acao-texto {
  border: 0;
  background: none;
  color: var(--petroleo);
  padding: 2px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.acao-texto:hover { text-decoration: underline; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .grade-carga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-carga .campo-data_verificacao,
  .grade-carga .campo-descricao,
  .grade-carga .campo-quantidade,
  .grade-carga .campo-potencia_unitaria,
  .grade-carga .campo-unidade_potencia { grid-column: auto; }
  .grade-carga .campo-observacoes { grid-column: 1 / -1; }
  .grade-carga .botao { grid-column: 2; }
}
@media (max-width: 620px) {
  .grade-carga { grid-template-columns: minmax(0, 1fr); }
  .grade-carga .campo-observacoes,
  .grade-carga .botao { grid-column: auto; }
}

/* ---------------------------------------------------------- hub operacional */

.abas-painel { margin-bottom: 20px; }
.abas-painel .dado {
  background: var(--papel);
  border-radius: 20px;
  padding: 0 6px;
}
.cabeca-secao { align-items: center; margin: 0 0 14px; }
.cabeca-secao h2 { color: var(--tinta); }

.painel-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.numero-painel {
  min-height: 128px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.numero-painel > span {
  color: var(--fraco);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.numero-painel b {
  margin-top: auto;
  font-size: 24px;
  font-weight: 600;
}
.numero-painel small { color: var(--fraco); font-size: 12px; }

.seletor-periodo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.seletor-periodo a {
  padding: 5px 9px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--fraco);
  font-size: 13px;
}
.seletor-periodo a.on {
  background: var(--petroleo);
  color: #fff;
}

.agenda-lista { padding: 4px 0; }
.agenda-lista .linha {
  display: flex;
  gap: 14px;
  align-items: center;
  border-left: 3px solid transparent;
}
.agenda-lista .agenda-late { border-left-color: var(--atraso); }
.agenda-lista .agenda-soon { border-left-color: var(--alerta); }
.agenda-data {
  width: 52px;
  flex: 0 0 52px;
  color: var(--tinta);
  font-size: 14px;
  text-align: center;
}
.agenda-data small {
  display: block;
  color: var(--fraco);
  font-size: 10px;
}
.agenda-corpo { flex: 1; min-width: 0; }
.painel-comercial { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr); }
.tabela-compacta { min-width: 480px; }
.resumo-refaturamentos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}
.resumo-refaturamentos .numero-painel { min-height: 118px; }
.resumo-refaturamentos .numero-painel b {
  white-space: nowrap;
  font-size: clamp(20px, 2vw, 24px);
}
.indicadores-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
.acao-linha { margin-top: 10px; }
.acao-linha .botao { padding: 5px 9px; font-size: 12px; }
.calculo-layout { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
.resultado-calculo .painel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resultado-calculo .numero-painel { min-height: 105px; }

@media (max-width: 980px) {
  .painel-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-contrato { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo-refaturamentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores-listas, .calculo-layout { grid-template-columns: minmax(0, 1fr); }
  .painel-comercial { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .painel-numeros { grid-template-columns: minmax(0, 1fr); }
  .form-contrato { grid-template-columns: minmax(0, 1fr); }
  .cabeca-secao { align-items: flex-start; }
  .seletor-periodo { align-self: stretch; justify-content: center; }
}
.fila-destaque { margin-bottom: 12px; }
.fila-destaque .fila { min-height: 0; }

.resumo-refaturamentos .numero-painel {
  min-width: 0;
  padding: 14px 16px;
}
.resumo-refaturamentos .numero-painel b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.035em;
  font-size: clamp(18px, 1.8vw, 24px);
}

.agenda-calendario { margin: 16px 0; }
.agenda-calendario-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.agenda-calendario-cabeca h2 { margin-bottom: 2px; }
.agenda-meses {
  display: grid;
  grid-template-columns: 30px minmax(150px, 1fr) 30px;
  align-items: center;
  text-align: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.agenda-meses a {
  padding: 6px;
  color: var(--petroleo);
  text-decoration: none;
}
.agenda-meses a:hover { background: var(--petroleo-claro); }
.agenda-meses strong { font-size: 13px; }
.agenda-grade-wrap { overflow-x: auto; }
.agenda-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  min-width: 840px;
  border-top: 1px solid var(--linha);
  border-left: 1px solid var(--linha);
}
.agenda-dia-semana {
  padding: 6px 8px;
  color: var(--fraco);
  background: var(--papel);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.agenda-celula {
  min-height: 116px;
  padding: 7px;
  background: var(--cartao);
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.agenda-celula.fora { background: var(--papel); opacity: 0.6; }
.agenda-celula.hoje { box-shadow: inset 0 0 0 2px var(--petroleo); }
.agenda-numero { display: block; margin-bottom: 5px; font-size: 12px; }
.agenda-eventos { display: flex; flex-direction: column; gap: 3px; }
.agenda-evento {
  display: block;
  overflow: hidden;
  padding: 3px 5px;
  color: var(--tinta);
  background: var(--papel);
  border-left: 3px solid var(--linha);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}
.agenda-evento small { color: var(--fraco); margin-right: 4px; }
.agenda-evento.agenda-late { border-left-color: var(--atraso); }
.agenda-evento.agenda-soon { border-left-color: var(--alerta); }
.agenda-evento:hover { background: var(--petroleo-claro); }
.agenda-mais { color: var(--fraco); font-size: 10px; }
.agenda-calendario > .mais { display: inline-block; margin-top: 10px; }

@media (max-width: 620px) {
  .agenda-calendario-cabeca { flex-direction: column; }
  .agenda-meses { width: 100%; }
}
.calculo-pagina {
  display: grid;
  grid-template-columns: minmax(0, 700px);
  gap: 16px;
}
.calculo-pagina > div { display: flex; flex-direction: column; gap: 16px; }
.agenda-controles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.agenda-controles .acoes { justify-content: flex-end; }

@media (max-width: 720px) {
  .agenda-controles { width: 100%; align-items: stretch; }
  .agenda-controles .acoes { justify-content: stretch; }
  .agenda-controles .botao { flex: 1; text-align: center; }
}

/* -------------------------------------------------------------- tarifação */

.tarifacao-consulta { margin-bottom: 16px; }
.tarifacao-consulta > header { margin-bottom: 14px; }
.tarifacao-consulta > header h2 { margin-bottom: 3px; }
.grade-tarifacao {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.grade-tarifacao .campo-distribuidora_cnpj,
.grade-tarifacao .campo-metodo_projecao { grid-column: span 2; }
.campo-form { min-width: 0; }
.campo-form label {
  display: block;
  margin-bottom: 5px;
  color: var(--fraco);
  font-size: 12.5px;
}
.campo-form small {
  display: block;
  margin-top: 4px;
  color: var(--fraco);
  font-size: 11.5px;
  line-height: 1.35;
}
.campo-form .errorlist { margin: 5px 0 0; padding-left: 18px; }
.acoes-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tarifacao-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--linha);
}
.tarifacao-meta > div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--cartao);
}
.tarifacao-meta span { display: block; color: var(--fraco); font-size: 11.5px; }
.tarifacao-meta strong { display: block; overflow-wrap: anywhere; }
.tarifacao-avisos { margin: 12px 0 16px; }
.tarifacao-avisos summary { cursor: pointer; color: var(--petroleo); }
.tarifacao-avisos ul { margin-bottom: 0; }
.abas-tarifacao { margin-top: 18px; }
.tarifacao-secao { margin-top: 16px; scroll-margin-top: 12px; }
.tarifacao-secao > header { padding-bottom: 12px; }
.tarifacao-secao > header h2 { margin-bottom: 3px; }
.tabela-tarifas { min-width: 1900px; }
.tabela th small { display: block; margin-top: 2px; text-transform: none; }
.fonte-tarifacao { margin: 10px 16px 14px; color: var(--fraco); font-size: 12px; }
.fontes-tarifacao {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 18px;
  color: var(--fraco);
  font-size: 12px;
}

@media (max-width: 980px) {
  .grade-tarifacao,
  .tarifacao-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .grade-tarifacao,
  .tarifacao-meta { grid-template-columns: minmax(0, 1fr); }
  .grade-tarifacao .campo-distribuidora_cnpj,
  .grade-tarifacao .campo-metodo_projecao { grid-column: auto; }
  .acoes-form .botao { flex: 1; text-align: center; }

}

/* ------------------------------------------------------- tarifação v2 */

.tarifa-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.tarifa-topo > div { min-width: 0; flex: 1; }
.tarifa-topo > .botao { flex: none; }
.tarifa-sobretitulo {
  display: block;
  margin-bottom: 5px;
  color: var(--fraco);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.tarifa-consulta-recolhida { margin-bottom: 18px; padding: 0; }
.tarifa-consulta-recolhida > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  cursor: pointer;
  color: var(--petroleo);
  list-style-position: inside;
}
.tarifa-consulta-recolhida > summary span { display: inline-flex; flex-direction: column; gap: 2px; }
.tarifa-consulta-recolhida > summary small { color: var(--fraco); font-weight: 400; }
.tarifa-formulario { padding: 4px 18px 18px; border-top: 1px solid var(--linha); }

.tarifa-contexto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--linha);
}
.tarifa-contexto > div { min-width: 0; padding: 13px 15px; background: var(--cartao); }
.tarifa-contexto span, .tarifa-contexto small { display: block; color: var(--fraco); font-size: 11px; }
.tarifa-contexto strong { display: block; margin: 2px 0; overflow-wrap: anywhere; }
.tarifa-alertas { margin: 10px 0 16px; padding: 11px 14px; border-left: 3px solid var(--alerta); background: var(--alerta-fundo); }
.tarifa-alertas summary { cursor: pointer; color: var(--alerta); font-weight: 600; }
.tarifa-alertas ul { margin-bottom: 2px; }

.tarifa-abas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 18px 0;
  padding: 5px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #e9ede6;
}
.tarifa-abas a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--fraco);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.tarifa-abas a span { font-family: var(--mono); font-size: 10px; opacity: .65; }
.tarifa-abas a b {
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--linha);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
}
.tarifa-abas a:hover { color: var(--petroleo); }
.tarifa-abas a.ativo {
  border-color: var(--linha);
  background: var(--cartao);
  color: var(--petroleo);
  box-shadow: 0 1px 3px rgb(27 68 65 / 8%);
}

.tarifa-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr);
  gap: 24px;
  padding: 24px;
  border-radius: var(--raio);
  background: var(--petroleo);
  color: #fff;
}
.tarifa-hero .tarifa-sobretitulo { color: var(--rail-fraco); }
.tarifa-hero h2 { max-width: 850px; margin: 0 0 9px; font-size: clamp(20px, 2.4vw, 31px); line-height: 1.15; }
.tarifa-hero p { margin: 0; color: #dce9e3; }
.tarifa-selos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tarifa-selos span {
  padding: 4px 8px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
  font-size: 11px;
}
.tarifa-troca-resolucao {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 5px;
  background: rgb(255 255 255 / 7%);
}
.tarifa-troca-resolucao label { color: #dce9e3; font-size: 11px; }
.tarifa-troca-resolucao .campo { background: #fff; }
.tarifa-troca-resolucao .botao { border-color: #fff; color: #fff; }

.tarifa-explicacao {
  margin-top: 12px;
  padding: 12px 15px;
  border: 1px solid #cfdac9;
  border-left: 4px solid var(--petroleo);
  border-radius: var(--raio);
  background: var(--petroleo-claro);
  color: #405047;
}
.tarifa-explicacao strong { color: var(--petroleo); }
.tarifa-explicacao.atencao { border-color: #ead5ad; border-left-color: var(--alerta); background: var(--alerta-fundo); }
.tarifa-explicacao.atencao strong { color: var(--alerta); }
.tarifa-explicacao.informativa { border-left-color: var(--neutro); background: #f3f5f2; }

.tarifa-bloco { margin-top: 14px; }
.tarifa-bloco-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
}
.tarifa-bloco-cabecalho h2, .tarifa-cabecalho-aba h2 { margin: 0 0 3px; }
.tarifa-bloco-cabecalho p { margin: 0; }
.tarifa-tabela-valores { min-width: 980px; }
.tarifa-tabela-valores td:nth-child(4), .tarifa-tabela-valores td:nth-child(5) { font-weight: 650; }
.tarifa-cabecalho-aba {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin: 8px 0 15px;
  padding: 9px 2px 14px;
  border-bottom: 1px solid var(--linha);
}
.tarifa-cabecalho-aba p { max-width: 620px; margin: 0; color: var(--fraco); }
.tarifa-status { display: inline-block; padding: 3px 7px; border-radius: 3px; background: #edf0ec; color: var(--fraco); font-size: 11px; }
.tarifa-status.ok { background: var(--petroleo-claro); color: var(--petroleo); }
.tarifa-status.alerta { background: var(--alerta-fundo); color: var(--alerta); }

.tarifa-filtros-componentes {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(230px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}
.tarifa-filtros-componentes .botao { margin-bottom: 1px; }

.tarifa-formula {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--linha);
}
.tarifa-formula > div { display: flex; flex-direction: column; gap: 5px; padding: 21px; background: var(--cartao); }
.tarifa-formula span { color: var(--fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.tarifa-formula strong { color: var(--petroleo); font-family: var(--mono); font-size: clamp(17px, 2vw, 23px); }
.tarifa-formula small { color: var(--fraco); }
.tarifa-exemplo-2028 { background: var(--petroleo-claro) !important; }
.forte { font-weight: 750; color: var(--petroleo); }

@media (max-width: 980px) {
  .tarifa-contexto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarifa-hero { grid-template-columns: minmax(0, 1fr); }
  .tarifa-filtros-componentes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tarifa-filtros-componentes .botao { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .tarifa-topo, .tarifa-cabecalho-aba, .tarifa-bloco-cabecalho { align-items: stretch; flex-direction: column; }
  .tarifa-topo .botao { text-align: center; }
  .tarifa-contexto, .tarifa-formula, .tarifa-filtros-componentes { grid-template-columns: minmax(0, 1fr); }
  .tarifa-hero { padding: 18px; }
  .tarifa-abas { margin-right: -12px; border-right: 0; border-radius: var(--raio) 0 0 var(--raio); }
}

/* ----------------------------------------- tarifacao analitica */
.tarifa-controles {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}
.tarifa-controle { min-width: 0; }
.tarifa-controle-cabecalho { margin-bottom: 14px; }
.tarifa-controle-cabecalho h2 { margin: 0 0 4px; }
.tarifa-controle-cabecalho p {
  margin: 0;
  color: var(--fraco);
  font-size: 12.5px;
}
.tarifa-seletor-distribuidora {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.tarifa-seletor-distribuidora .campo-form { margin: 0; }
.tarifa-controles .campo,
.tarifa-controles .botao { min-height: 38px; }
.tarifa-origem-local {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.tarifa-origem-local strong { overflow-wrap: anywhere; }
.tarifa-origem-local small,
.tarifa-sincronizar small { color: var(--fraco); }
.tarifa-status-separador { color: var(--fraco); }
.tarifa-sincronizar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.tarifa-sincronizar .campo-form { margin: 0; }
.tarifa-sincronizar .botao { align-self: flex-start; white-space: nowrap; }
.tarifa-sincronizar .botao:disabled { cursor: not-allowed; opacity: .45; }
.tarifa-abas-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tarifa-resolucao-hero { grid-template-columns: minmax(0, 1fr); }
.tarifa-perfil { margin-top: 14px; }
.tarifa-form-perfil {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.5fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}
.tarifa-form-perfil .campo-form { margin: 0; }
.tarifa-filtros-avancados {
  grid-column: 1 / -1;
  border-top: 1px solid var(--linha);
  padding-top: 11px;
}
.tarifa-filtros-avancados > summary {
  cursor: pointer;
  color: var(--petroleo);
  font-weight: 650;
}
.tarifa-grade-avancada {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.tarifa-celula-detalhe {
  display: block;
  margin-top: 2px;
  color: var(--fraco);
  font-size: 11px;
}
.tarifa-tabela-ultima { min-width: 780px; }
.tarifa-tabela-componentes { min-width: 940px; }
.tarifa-linha-fio-b { background: var(--petroleo-claro); }
.tarifa-linha-fio-b .tarifa-status { margin-left: 7px; }
.tarifa-explorador-filtros {
  display: grid;
  grid-template-columns: minmax(230px, 2fr) repeat(5, minmax(120px, 1fr)) minmax(145px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
}
.tarifa-explorador-filtros .campo-form { margin: 0; }
.tarifa-referencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.tarifa-referencias .cartao { padding: 15px; }
.tarifa-referencias h3 { margin: 3px 0 6px; font-size: 15px; }
.tarifa-referencias p { margin: 0 0 8px; color: var(--fraco); font-size: 12px; }
.tarifa-referencia-indisponivel { border-left: 3px solid var(--alerta); }
.tarifa-detalhe-serie { margin: 14px 0; }
.tarifa-metricas-serie {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--linha);
}
.tarifa-metricas-serie > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  background: var(--cartao);
}
.tarifa-metricas-serie span {
  color: var(--fraco);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tarifa-metricas-serie strong {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 18px;
}
.tarifa-grafico-wrap {
  overflow-x: auto;
  margin: 8px 0 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
}
.tarifa-grafico { display: block; width: 100%; min-width: 620px; }
.tarifa-grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.tarifa-grafico .linha-oficial {
  fill: none;
  stroke: var(--petroleo);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.tarifa-grafico .linha-projetada {
  fill: none;
  stroke: var(--alerta);
  stroke-dasharray: 7 6;
  stroke-width: 2.5;
}
.tarifa-grafico .ponto-oficial {
  fill: #fff;
  stroke: var(--petroleo);
  stroke-width: 3;
}
.tarifa-grafico .ponto-projetado {
  fill: #fff;
  stroke: var(--alerta);
  stroke-width: 3;
}
.tarifa-legenda-grafico {
  display: flex;
  gap: 18px;
  padding: 0 14px 12px;
  color: var(--fraco);
  font-size: 11px;
}
.tarifa-legenda-grafico i {
  display: inline-block;
  width: 22px;
  margin-right: 5px;
  border-top: 2px solid var(--petroleo);
  vertical-align: middle;
}
.tarifa-legenda-grafico i.projetado {
  border-color: var(--alerta);
  border-top-style: dashed;
}
.tarifa-projecao-inline {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(250px, 1fr);
  gap: 1px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--linha);
}
.tarifa-projecao-inline > form,
.tarifa-projecao-inline > div {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 15px;
  background: var(--cartao);
}
.tarifa-projecao-inline > form .campo-form { flex: 1; margin: 0; }
.tarifa-projecao-inline > div {
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
.tarifa-projecao-inline > div > strong {
  color: var(--petroleo);
  font-family: var(--mono);
  font-size: 23px;
}
.tarifa-projecao-inline p { margin: 0; color: var(--fraco); }
.tarifa-ponto-projetado { background: var(--alerta-fundo); }
.tarifa-tabela-explorador { min-width: 1160px; }
.tarifa-tabela-explorador tr.selecionada { background: var(--petroleo-claro); }
.tarifa-vazio-inicial { margin-top: 18px; }

@media (max-width: 1180px) {
  .tarifa-explorador-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tarifa-explorador-filtros .campo-form:first-of-type { grid-column: span 2; }
}

@media (max-width: 900px) {
  .tarifa-controles { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .tarifa-form-perfil,
  .tarifa-grade-avancada,
  .tarifa-explorador-filtros,
  .tarifa-projecao-inline { grid-template-columns: minmax(0, 1fr); }
  .tarifa-explorador-filtros .campo-form:first-of-type { grid-column: auto; }
  .tarifa-abas-duas { grid-template-columns: minmax(0, 1fr); }
  .tarifa-metricas-serie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarifa-projecao-inline > form { align-items: stretch; flex-direction: column; }
  .tarifa-grafico { min-width: 540px; }
}

@media (max-width: 620px) {
  .tarifa-seletor-distribuidora { grid-template-columns: minmax(0, 1fr); }
  .tarifa-controles .botao {
    width: 100%;
    align-self: stretch;
    text-align: center;
  }
  .tarifa-origem-local { align-items: flex-start; }
}