/* =========================================================================
   SolarHub — fontes, reset, tipografia e casca
   ========================================================================= */

/* --- fontes auto-hospedadas ------------------------------------------------
   Vendorizadas em painel/static/painel/fontes/, mesmo padrao do Chart.js e do
   htmx: o produto nao depende de CDN externa para renderizar corretamente. */

@font-face {
  font-family: "Fraunces";
  src: url("../fontes/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fontes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- reset minimo ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- tipografia ------------------------------------------------------------
   Tres vozes, cada uma com um trabalho:
     Fraunces  — titulo. Aparece pouco e grande.
     Inter     — interface. Tem que sumir.
     Plex Mono — dado. Sempre tabular, para coluna de numero alinhar. */

/* Coluna de altura minima da janela: sem isto o rodape escuro sobe e para no
   meio da tela quando a pagina e curta (portal sem usina, lista vazia), com
   uma faixa clara sobrando embaixo dele. Com flex:1 no .conteudo, o miolo
   estica e o rodape encosta no pe da janela. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: var(--altura-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-variation-settings: var(--fraunces-titulo);
  font-weight: 600;
  line-height: var(--altura-apertada);
  letter-spacing: -0.015em;
}

h1 { font-size: var(--t-gg); }
h2 { font-size: var(--t-g); }
h3 { font-size: var(--t-med); }

/* Sobrancelha: rotulo micro em caixa alta. Some no fundo ate voce precisar
   dele, que e exatamente o papel de um rotulo. */
.rotulo {
  display: block;
  font-family: var(--fonte);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
}

/* Todo numero do produto passa por aqui. tabular-nums e o que faz uma coluna
   de kWh alinhar virgula com virgula. */
.dado,
.tabela td.num,
.cartao strong,
.total-periodo strong {
  font-family: var(--fonte-dado);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.apoio {
  color: var(--tinta-media);
  font-size: var(--t-peq);
}

/* --- foco -----------------------------------------------------------------
   Um anel so, em todo lugar, sempre visivel. */
:focus-visible {
  outline: 2px solid var(--sol-forte);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* --- casca: barra superior ---------------------------------------------------
   Marca a esquerda, navegacao no meio (indicador de pagina ativa em laranja),
   chip da organizacao a direita. O chip e um <details> nativo: some o menu
   de Configuracoes/Meu plano/Sair sem uma linha de JS.

   Barra escura fechada por uma faixa de --sol: e a assinatura que os paineis
   da casa (obras, video wall, monitor) tem em comum, e o que separa o topo do
   conteudo sem precisar de sombra. Sem overflow: hidden aqui — cortaria o
   .conta-menu-painel, que e absolute e sai do topo. */
.topo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--e4) var(--e6) 0;
  background: var(--noite);
  border-bottom: var(--acento) solid var(--sol);
}
/* Linha 1 do capo: marca, navegacao e chip da organizacao. */
.topo-linha {
  display: flex;
  align-items: center;
  gap: var(--e6);
}
/* Fileiras de modulos esmaecendo da direita. Fica atras de tudo (o conteudo
   sobe com z-index na regra seguinte) e nao intercepta clique. */
.topo::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  background: var(--fileiras);
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
/* Granulacao por cima do carvao, em overlay. Sem ela o capo le como um
   retangulo de cor chapada; com ela, como papel impresso. */
.topo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: var(--grao);
  background-size: 260px 260px;
}
.topo > * { position: relative; z-index: 1; }
/* A linha da marca sobe mais um degrau que o cabecalho. Os dois sao filhos do
   .topo e cada um abre o seu contexto de empilhamento; empatados em z-index 1,
   o cabecalho ganha por vir depois no DOM e passa NA FRENTE do menu da conta,
   cujo z-index 20 so vale dentro do contexto da propria linha. O sintoma era
   Configuracoes / Meu plano / Tarifas nao aceitarem clique — so "Sair", que
   fica abaixo da faixa do cabecalho. */
.topo-linha { z-index: 2; }
/* O anel de foco global usa --sol-forte, escurecido para o fundo claro; sobre
   --noite ele quase some (2,3:1). Aqui o anel volta para --sol (4,9:1). */
.topo :focus-visible { outline-color: var(--sol); }

.marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--fonte-titulo);
  font-variation-settings: var(--fraunces-titulo);
  font-weight: 600;
  font-size: var(--t-g);
  letter-spacing: -0.02em;
  color: var(--sobre-noite-forte);
}

/* O simbolo da marca e um SVG de proporcao 2:1, mas no portal white-label
   este mesmo slot recebe o logo raster que a integradora subiu. Por isso a
   altura manda e a largura acompanha — largura fixa esmagava o logo. */
.marca-simbolo {
  height: 22px;
  width: auto;
  max-width: 124px;
  color: var(--sol);
}
/* No portal white-label este slot recebe o logo que a integradora subiu — um
   arquivo desenhado para papel branco. Sobre o capo escuro, um logo de traco
   escuro simplesmente some, e nao da para pedir a cada integradora uma versao
   invertida. Ele ganha uma caixa branca, como o painel EQI faz com a marca da
   casa. So <img>: o SVG proprio do produto usa currentColor e nao precisa. */
.topo img.marca-simbolo {
  box-sizing: content-box;
  padding: var(--e1) var(--e2);
  background: var(--superficie);
  border-radius: var(--raio-p);
}

.menu {
  display: flex;
  gap: var(--e2);
  flex: 1;
}

.menu a {
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--sobre-noite-fraca);
  padding: var(--e1) var(--e3);
  border-radius: var(--raio-pilula);
  transition: color var(--transicao), background var(--transicao);
}
.menu a:hover {
  color: var(--sobre-noite-forte);
  background: color-mix(in srgb, var(--sobre-noite-forte) 10%, transparent);
}
/* Pagina ativa: pilula solida, como os passos do relatorio EQI e o seletor do
   painel de obras. Substitui o sublinhado de 2px — dentro do capo, que agora
   tem duas linhas, um sublinhado fino se perdia. */
.menu a.ativa {
  color: var(--sol-sobre);
  font-weight: 600;
  background: var(--sol);
}
.menu a.ativa:hover { background: var(--sol-forte); color: var(--superficie); }

.identidade {
  display: flex;
  align-items: center;
}

/* --- chip da organizacao + menu da conta ------------------------------------- */
.conta-menu { position: relative; }

.conta-menu > summary {
  display: flex;
  align-items: center;
  gap: var(--e2);
  list-style: none;
  cursor: pointer;
  padding: var(--e1) var(--e3) var(--e1) var(--e1);
  border-radius: var(--raio-pilula);
  border: 1px solid transparent;
  transition: border-color var(--transicao), background var(--transicao);
}
.conta-menu > summary::-webkit-details-marker { display: none; }
.conta-menu > summary::marker { content: ""; }
/* O anel de foco global usa --raio-p (base.css); aqui o elemento e uma
   pilula (--raio-pilula) — sem este ajuste o outline fica com cantos
   quadrados por cima de um fundo redondo. */
.conta-menu > summary:focus-visible { border-radius: var(--raio-pilula); }
.conta-menu > summary:hover,
.conta-menu[open] > summary {
  border-color: color-mix(in srgb, var(--sobre-noite-fraca) 45%, transparent);
  background: color-mix(in srgb, var(--sobre-noite-forte) 12%, transparent);
}

.chip-iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--e5);
  height: var(--e5);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sol);
  color: var(--sol-sobre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.conta-menu .nome-organizacao {
  font-size: var(--t-peq);
  color: var(--sobre-noite);
}

.conta-menu .seta {
  width: var(--e3);
  height: var(--e3);
  color: var(--sobre-noite-fraca);
  transition: transform var(--transicao);
}
.conta-menu[open] .seta { transform: rotate(180deg); }

.conta-menu-painel {
  position: absolute;
  top: calc(100% + var(--e2));
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  min-width: var(--largura-painel-flutuante);
  padding: var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-3);
}
.conta-menu-painel a,
.conta-menu-painel button {
  display: block;
  width: 100%;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-p);
  font-size: var(--t-peq);
  text-align: left;
  color: var(--tinta);
  transition: background var(--transicao), color var(--transicao);
}
/* Os quatro itens reagem igual. Antes so o fundo mudava aqui, e o "Sair"
   ficava laranja por fora deste bloco: ele e um <button class="link"> e
   pegava carona no .link:hover de componentes.css, que os tres <a> nao tem.
   O resultado era um item do menu com feedback diferente dos outros tres
   sem nenhuma razao de desenho. --sol-texto sobre --papel: 5,02:1. */
.conta-menu-painel a:hover,
.conta-menu-painel button:hover {
  background: var(--papel);
  color: var(--sol-texto);
}
.conta-menu-painel form { margin: 0; }

/* --- casca: area de conteudo ----------------------------------------------- */
.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--e5) var(--e5) var(--e8);
}

.cabecalho-secao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
}

/* --- casca: cabecalho de pagina ----------------------------------------------
   Titulo em serifa + linha de contexto + fatia de acoes. Um degrau acima do
   .cabecalho-secao: abre a pagina inteira, nao uma secao dentro dela. */
/* --- casca: cabecalho de pagina, dentro do capo -------------------------------
   Linha 2 da regiao escura: titulo em serifa clara, contexto e acoes. Nao ha
   mais borda inferior — quem separa do conteudo e a faixa de --sol que fecha
   o capo. */
.cabecalho-pagina {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e5) 0 var(--e6);
  color: var(--sobre-noite);
}
.cabecalho-pagina h1,
.cabecalho-pagina h2 { color: var(--sobre-noite-forte); }
/* Regua curta de --sol abrindo o titulo: o mesmo gesto que abre uma secao
   nos paineis da casa (e o .selo dos carrosseis). Presa ao proprio h1, e nao
   ao <div> que o envolve: os 19 cabecalhos de hoje tem a mesma estrutura
   (.cabecalho-pagina > div > h1), mas um seletor estrutural quebraria calado
   no primeiro template que montasse o cabecalho de outro jeito. */
.cabecalho-pagina h1 {
  position: relative;
  padding-top: var(--e4);
  margin-bottom: var(--e1);
}
.cabecalho-pagina h1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--regua);
  height: var(--acento);
  background: var(--sol);
  border-radius: 1px;
}
.cabecalho-pagina-contexto {
  color: var(--sobre-noite);
  font-size: var(--t-peq);
}
/* Um botao branco solido dentro do capo grita mais que o titulo. O secundario
   vira contorno sobre o carvao; o primario (.botao, laranja) continua como
   esta — e justamente ali que ele deve chamar. */
.topo .botao-secundario {
  background: transparent;
  border-color: color-mix(in srgb, var(--sobre-noite-fraca) 55%, transparent);
  color: var(--sobre-noite-forte);
}
.topo .botao-secundario:hover {
  border-color: var(--sobre-noite-fraca);
  background: color-mix(in srgb, var(--sobre-noite-forte) 10%, transparent);
}
/* .link herda color do body (--tinta, feito para fundo claro): sobre o carvao
   isso da 1,4:1. Vale para o "Sair" do portal, que e um .link solto no topo.
   O seletor exige form filho DIRETO de .identidade de proposito: no painel o
   mesmo botao vive dentro de .conta-menu-painel, que e uma superficie BRANCA
   flutuando sobre o topo escuro — la o texto tem de continuar escuro. Sem o
   ">", .topo .link (0,2,0) ganharia de .conta-menu-painel button (0,1,1) e
   pintaria o "Sair" de cinza claro sobre branco. */
.topo .identidade > form .link { color: var(--sobre-noite); }
.topo .identidade > form .link:hover { color: var(--sobre-noite-forte); }
.cabecalho-pagina-acoes {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}

/* --- casca: avisos no capo ----------------------------------------------------
   Aviso de sistema entra como chip dentro da regiao escura, junto do titulo, em
   vez de um bloco colorido de largura inteira no comeco do conteudo — que
   empurrava o painel para baixo e disputava atencao com o dado.

   Pilula com borda e SEM fundo, como o selo dos carrosseis da casa: o texto
   fica direto sobre --noite (4,89:1 no erro, 6,89:1 no positivo, 8,48:1 no
   ambar), enquanto um fundo tingido derrubaria o erro para 4,03:1. A borda sai
   de currentColor, entao cada gravidade acerta a sua sozinha.

   O :has() esconde o container quando a tela nao tem aviso nenhum — ele e
   renderizado sempre, para as telas poderem preencher {% block avisos_capo %}. */
.capo-avisos { display: none; }
.topo .capo-avisos:has(.aviso) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  position: relative;
  z-index: 1;
  padding-bottom: var(--e5);
}
.capo-avisos .aviso {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  padding: var(--e1) var(--e3);
  border-radius: var(--raio-pilula);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.4;
}
/* As tres gravidades repetem fundo e borda de proposito, em vez de herdarem de
   uma regra so com .capo-avisos .aviso: .aviso.error tambem pesa (0,2,0) e mora
   em componentes.css, que o HTML carrega DEPOIS de base.css — no empate ele
   ganha e devolvia o fundo --alerta-tinta ao chip, deixando o texto claro em
   3,03:1 sobre rosa. Com a classe de gravidade no seletor sao (0,3,0) e vencem.
   A borda sai de currentColor: cada gravidade acerta a sua sem repetir a cor. */
.capo-avisos .aviso.error,
.capo-avisos .aviso.success,
.capo-avisos .aviso.warning {
  background: none;
  border: 1px solid color-mix(in srgb, currentColor 75%, var(--noite));
}
.capo-avisos .aviso.error { color: var(--alerta-clara); }
.capo-avisos .aviso.success { color: var(--mata-clara); }
.capo-avisos .aviso.warning { color: var(--ambar); }
.capo-avisos .aviso a { text-decoration: underline; }
.capo-avisos .aviso-icone { width: var(--e3); height: var(--e3); }
/* Com chip, o cabecalho encosta nele em vez de abrir o proprio rodape. */
.topo:has(.capo-avisos .aviso) .cabecalho-pagina { padding-bottom: var(--e3); }

/* --- casca: rodape de procedencia ---------------------------------------------
   Todo painel da casa fecha dizendo de onde veio o numero. Aqui a procedencia
   e estrutural (o dado vem do conector de cada usina), entao o texto e fixo —
   nao ha data global de sincronizacao para mostrar; essa e por usina e vive na
   coluna "Sincronizado" da lista. */
/* Carvao com faixa de --sol em cima: a pagina fecha com o mesmo gesto que
   abre. As fileiras entram espelhadas (da esquerda, mascarando para a
   direita) para o rodape nao ser uma copia do capo de cabeca para baixo. */
.rodape-app {
  position: relative;
  margin-top: var(--e8);
  padding: var(--e6) var(--e5);
  background: var(--noite);
  border-top: var(--acento) solid var(--sol);
  text-align: center;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--sobre-noite-fraca);
  overflow: hidden;
}
.rodape-app::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--fileiras);
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
          mask-image: linear-gradient(to right, #000, transparent);
  pointer-events: none;
}
.rodape-app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: var(--grao);
  background-size: 260px 260px;
}
.rodape-app p {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin-inline: auto;
}
.rodape-app strong {
  font-weight: 600;
  color: var(--sobre-noite-forte);
}

@media (max-width: 640px) {
  .topo { padding: var(--e3) var(--e4) 0; }
  .topo-linha { flex-wrap: wrap; row-gap: var(--e3); gap: var(--e4); }
  .cabecalho-pagina { padding: var(--e4) 0 var(--e5); }
  .menu {
    order: 3;
    /* flex-basis, nao width: o .menu tem flex: 1 (= flex-basis: 0%) na regra
       base, e com flex-basis zerado o width e ignorado — o menu continuava
       espremido na mesma linha da marca em vez de descer, e so o primeiro item
       e meio aparecia. */
    flex-basis: 100%;
    gap: var(--e5);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { flex-shrink: 0; }
  .conta-menu .nome-organizacao { display: none; }
  .conteudo { padding: var(--e5) var(--e4) var(--e8); }
  h1 { font-size: 1.6rem; }
  .cabecalho-pagina { align-items: flex-start; }
}