/* =========================================================================
   SolarHub — componentes
   Blocos reutilizaveis: cartoes, tabelas, etiquetas, formularios, botoes,
   avisos e estados vazios.
   ========================================================================= */

/* --- bloco: uma secao de conteudo em superficie propria --------------------- */
/* Faixa de --sol atravessando o topo, como nos cartoes de obra do painel da
   casa. Cada secao branca fica visualmente "presa" na mesma cor que fecha o
   capo e o rodape, e o titulo dispensa a regua curta que tinha antes. */
.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: var(--acento) solid var(--sol);
  border-radius: var(--raio-g);
  padding: var(--e4) var(--e5) var(--e5);
  margin-block: var(--e5);
  box-shadow: var(--sombra-1);
}
.bloco > h2 {
  font-size: var(--t-med);
  margin-bottom: var(--e4);
}

/* --- cartoes de indicador --------------------------------------------------- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--e3);
}

/* Barra de acento a esquerda: da para varrer uma fileira de indicadores e ver
   qual tem cor sem ler nenhum. Neutra por padrao (--borda-forte) e colorida
   so nas variantes que carregam informacao — .sol e .alerta abaixo. */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: var(--acento) solid var(--borda-forte);
  border-radius: var(--raio);
  padding: var(--e4);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.cartao:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
}

.cartao-topo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
.cartao-icone {
  width: var(--e4);
  height: var(--e4);
  color: var(--sol);
  flex-shrink: 0;
}

.cartao strong {
  display: block;
  font-size: var(--t-g);
  font-weight: 600;
  line-height: var(--altura-apertada);
  letter-spacing: -0.02em;
}
.cartao strong small {
  font-size: var(--t-peq);
  font-weight: 400;
  color: var(--tinta-fraca);
  letter-spacing: 0;
}

/* Cor carrega informacao: o cartao so fica vermelho quando ha o que olhar. */
.cartao.alerta {
  background: var(--alerta-tinta);
  border-color: color-mix(in srgb, var(--alerta) 30%, transparent);
  border-left-color: var(--alerta);
}
.cartao.alerta strong { color: var(--alerta); }
.cartao.alerta .cartao-icone { color: var(--alerta); }

/* Variante ambar: o mesmo tratamento de "cor carrega informacao" acima, mas
   para destacar (nao alertar) — hoje aplicada so no numero-heroi. --sol so
   preenche/borda (3.1:1, insuficiente pra texto); o texto usa --sol-texto
   (5.9:1), igual .cartao.alerta usa --alerta pro seu proprio texto. */
.cartao.sol {
  background: var(--sol-tinta);
  border-color: color-mix(in srgb, var(--sol) 30%, transparent);
  border-left-color: var(--sol);
}
.cartao.sol strong { color: var(--sol-texto); }
.cartao.sol .cartao-icone { color: var(--sol-texto); }

/* --- numero-heroi: o dado mais visto do produto ----------------------------
   "Gerado hoje" sai da grade plana de cartoes e vira o primeiro elemento que
   a pessoa ve ao abrir o painel — herda .cartao (superficie/borda/sombra) e
   .sol (tingimento ambar, ver acima), so ajustando escala e acrescentando o
   indicador de variacao. Fica em componentes.css (nao telas.css) porque e um
   membro da familia .cartao, nao um layout exclusivo do dashboard. */
.numero-heroi {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--e4);
  padding: var(--e5) var(--e6) var(--e6);
}
/* As fileiras de modulos do lado oposto ao numero — o unico cartao grande o
   bastante para o motivo aparecer sem virar ruido atras do texto. O cartao
   segue claro (--sol-tinta, herdado de .cartao.sol): o carvao fica so no capo
   e no rodape, que emolduram a pagina. Por isso a mistura clara. */
.numero-heroi::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 46%;
  background: var(--fileiras-claras);
  -webkit-mask-image: linear-gradient(to left, #000 8%, transparent 88%);
          mask-image: linear-gradient(to left, #000 8%, transparent 88%);
  pointer-events: none;
}
.numero-heroi > * { position: relative; z-index: 1; }
.numero-heroi .cartao-topo { margin-bottom: var(--e3); }
.numero-heroi strong {
  font-size: var(--t-hero);
  line-height: 1;
  letter-spacing: -0.03em;
}
.numero-heroi strong small {
  font-size: var(--t-med);
  margin-left: var(--e1);
}

.numero-heroi-delta {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-top: var(--e3);
  font-size: var(--t-peq);
  font-weight: 600;
}
.numero-heroi-delta .seta { font-size: var(--t-micro); }
.numero-heroi-delta.alta { color: var(--mata); }
.numero-heroi-delta.baixa { color: var(--alerta); }
.numero-heroi-delta.estavel,
.numero-heroi-delta.indefinida {
  color: var(--tinta-fraca);
  font-weight: 400;
}

/* --- nota de cartao --------------------------------------------------------
   Mesma familia visual do .numero-heroi-delta, mas para o cartao comum: uma
   linha de contexto sob o numero, dizendo do que ele e feito. Existe porque um
   numero sozinho num relatorio convida a conclusao errada — "143,1 kWh/kWp" so
   quer dizer alguma coisa acompanhado de "mediana de 13 usinas comparaveis".

   A cor NUNCA e o unico diferenciador (alta/baixa vem sempre com a seta ao
   lado no markup), e por isso ela pode ser apenas reforco. */
.cartao-nota {
  margin-top: var(--e3);
  font-size: var(--t-peq);
  color: var(--tinta-fraca);
  line-height: var(--altura-base);
}
.cartao-nota.alta { color: var(--mata); font-weight: 600; }
.cartao-nota.baixa { color: var(--alerta); font-weight: 600; }

/* --- texto de apoio dentro de um bloco -------------------------------------
   O relatorio de performance depende de ressalva: "dias com dado nao e
   disponibilidade", "desvio acima costuma ser cadastro errado". Sem um lugar
   proprio, essa frase ou vira titulo (peso demais) ou some. Fica entre o h2 e
   a tabela, e depois dela quando explica o que acabou de ser mostrado. */
.nota-do-bloco {
  font-size: var(--t-peq);
  color: var(--tinta-media);
  line-height: var(--altura-base);
  margin-block: var(--e3);
  max-width: 68ch;
}
.lista-do-bloco {
  font-size: var(--t-peq);
  color: var(--tinta-media);
  line-height: var(--altura-base);
  margin-block: var(--e3);
  padding-left: var(--e4);
  max-width: 68ch;
}
.lista-do-bloco li { margin-bottom: var(--e2); }
.bloco > h3 {
  font-size: var(--t-peq);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-fraca);
  margin-top: var(--e4);
}

/* --- cartao de conexao ------------------------------------------------------ */
.cartao-conexao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  /* Mesma barra de acento da familia .cartao, para a tela de Conexoes nao ser
     a unica sem ela. Fica neutra: o estado da conexao ja e dito pela etiqueta
     Ativa/Inativa, e nao ha classe de estado no cartao para colorir. */
  border-left: var(--acento) solid var(--borda-forte);
  border-radius: var(--raio-g);
  padding: var(--e5);
  margin-block: var(--e4);
  box-shadow: var(--sombra-1);
}
.cartao-conexao header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
}
.cartao-conexao h2 { font-size: var(--t-med); }
.cartao-conexao h2 small {
  font-family: var(--fonte);
  font-weight: 600;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
}

/* --- tabelas ---------------------------------------------------------------- */
.tabela {
  width: 100%;
  font-size: var(--t-peq);
}
.tabela th,
.tabela td {
  text-align: left;
  padding: var(--e3);
  border-bottom: 1px solid var(--borda);
}
.tabela th {
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
  border-bottom-color: var(--borda-forte);
  white-space: nowrap;
}
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--papel); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela td:has(> a) { font-weight: 500; }
.tabela td > a:hover { color: var(--sol-texto); }

/* Coluna de numero: direita e tabular, para virgula alinhar com virgula. */
.tabela th.num,
.tabela td.num { text-align: right; }

.tabela.compacta th,
.tabela.compacta td { padding: var(--e2) var(--e3); }

/* Mini-grafico de 7 dias na lista de usinas — mesma logica de cor de
   .marca-simbolo (currentColor + var(--sol), um traco, nunca texto). */
.sparkline {
  display: block;
  width: 64px;
  height: 20px;
  color: var(--sol);
}

/* --- medidor de uso: usinas usadas / limite do plano -------------------------
   Barra de progresso simples. Cor muda com a proximidade do limite: verde
   (normal) -> ambar (>=80%, atencao) -> vermelho (100%, no limite). Plano
   ilimitado nao renderiza a trilha — nao ha limite pra medir contra.
   Unico consumidor hoje: cobranca/meu_plano.html. */
.medidor-uso { margin-top: var(--e4); }
.medidor-uso-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-peq);
  color: var(--tinta-media);
  margin-bottom: var(--e2);
}
/* Sobrescreve .cartao strong (t-g, display:block) — aqui o numero e uma
   linha inline dentro de uma legenda pequena, nao o dado principal do cartao. */
.medidor-uso-topo strong {
  display: inline;
  font-size: var(--t-peq);
  font-weight: 600;
  line-height: inherit;
  letter-spacing: normal;
}
.medidor-uso-trilho {
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--papel-fundo);
  overflow: hidden;
}
.medidor-uso-barra {
  height: 100%;
  border-radius: var(--raio-pilula);
  transition: width var(--transicao);
}
.medidor-uso-barra.normal { background: var(--mata); }
.medidor-uso-barra.atencao { background: var(--sol); }
.medidor-uso-barra.limite { background: var(--alerta); }

/* --- barra de proporcao dentro da celula -------------------------------------
   Uma coluna de numeros diz o valor; a barra diz a ordem de grandeza antes de
   voce ler qualquer numero. E o "avanco fisico por obra" dos paineis da casa,
   reduzido a 4px para caber numa linha de tabela.

   Contrato de marcacao — a largura e DADO, entao vem do template pelo custom
   property, nao de uma classe por faixa:
     <span class="barra-proporcao" style="--proporcao: 72%"><span></span></span>
   Sem o style, --proporcao cai em 0% e a barra some sem quebrar o layout. */
.barra-proporcao {
  display: block;
  height: 4px;
  margin-top: 5px;
  margin-left: auto;
  max-width: 120px;
  border-radius: var(--raio-pilula);
  background: var(--papel-fundo);
  overflow: hidden;
}
.barra-proporcao > span {
  display: block;
  height: 100%;
  width: var(--proporcao, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dado-clara), var(--dado));
}

/* --- grafico de colunas do relatorio ----------------------------------------
   Desenhado em HTML/CSS, sem Chart.js, porque o corpo do relatorio alimenta a
   tela E o PDF — e no PDF nao roda JavaScript. Layout de tabela pela mesma
   razao dos cartoes de impressao.css: `table-layout: fixed` da colunas iguais
   sem ninguem saber quantos dias o mes tem, e nao depende de flex.

   Contrato de marcacao — as tres medidas sao DADO e vem do template por custom
   property, igual a `.barra-proporcao`:
     <span class="grafico-barra" style="--esquerda: 3.2%; --largura: 2.6%; --altura: 72%"></span>
   Sem o style, tudo cai em 0% e a coluna some sem quebrar o layout.

   Barra POSICIONADA, e nao celula de tabela com altura percentual: a versao com
   table-cell sai certa aqui e sai como tracinho no alto do quadro no WeasyPrint,
   que nao resolve altura percentual dentro de celula. Posicao absoluta resolve
   contra o quadro, que tem altura definida, e os dois motores concordam. */
/* 280px cabe no miolo de um celular de 360px sem cortar o ultimo rotulo do
   eixo; abaixo disso as 31 colunas viram um risco so. Acima, a rolagem do
   `.rolagem` assume. */
.grafico-colunas { min-width: 280px; }

.grafico-quadro {
  position: relative;
  height: var(--grafico-altura);
}

.grafico-eixo {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.grafico-barra {
  position: absolute;
  bottom: 0;
  left: var(--esquerda, 0%);
  width: var(--largura, 0%);
  height: var(--altura, 0%);
  /* 2px de piso: um dia de geracao muito baixa arredondaria para nada visivel e
     ficaria igual a um dia sem dado — que e outra coisa. */
  min-height: 2px;
  border-radius: var(--raio-p) var(--raio-p) 0 0;
  background: linear-gradient(180deg, var(--dado-clara), var(--dado));
}

/* A referencia (o esperado) fica sobre as barras e mede a partir do PE do
   quadro, nao do bloco inteiro — dai o quadro envolver so as barras. Tracejada
   e cinza: e referencia, nao dado medido, e a legenda nomeia as duas em texto. */
.grafico-referencia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--altura, 0%);
  border-top: 2px dashed var(--grafico-tendencia);
  /* Sobre as barras, e nao atras. As duas sao posicionadas, e sem z-index a
     ordem de pintura e a do DOM: a referencia desaparecia exatamente nos dias em
     que a barra passa dela, que sao os que interessa ver. */
  z-index: 1;
}

.grafico-eixo td {
  text-align: center;
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
  padding-top: var(--e1);
}

.grafico-legenda .chave {
  display: inline-block;
  width: var(--e3);
  height: 2px;
  vertical-align: middle;
  margin-right: var(--e1);
}
.grafico-legenda .chave--gerado { height: 8px; background: var(--dado); }
.grafico-legenda .chave--esperado { border-top: 2px dashed var(--grafico-tendencia); }

.vazio {
  color: var(--tinta-fraca);
  text-align: center;
  padding: var(--e6);
}

/* Rolagem horizontal fica presa ao envoltorio da tabela: a pagina em si nunca
   rola de lado. */
.rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Empilhamento em cartoes abaixo de 720px — opt-in via o modificador
   .tabela--empilha (nao mexe em .tabela sozinho, entao nenhuma tela atual
   muda so por causa deste CSS existir). Contrato de marcacao:
     <table class="tabela tabela--empilha">
       <tbody>
         <tr>
           <td data-rotulo="Cliente">Fulano</td>
           <td data-rotulo="Status" class="num">Online</td>
         </tr>
   O <thead> some no breakpoint e cada <td> mostra o atributo data-rotulo
   (via ::before) no lugar do cabecalho de coluna. Nenhuma tabela do produto
   usa isto ainda — cada tela adota o modificador e os atributos quando a
   sua propria task de redesenho chegar. */
@media (max-width: 720px) {
  .tabela--empilha thead { display: none; }
  .tabela--empilha,
  .tabela--empilha tbody,
  .tabela--empilha tr { display: block; width: 100%; }
  .tabela--empilha tr {
    margin-bottom: var(--e3);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
  }
  .tabela--empilha tbody tr:last-child { margin-bottom: 0; }
  .tabela--empilha td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e3);
    padding: var(--e2) 0;
    text-align: right;
    border-bottom: 1px solid var(--borda);
  }
  /* A celula empilhada e flex, e um filho vazio sem base propria colapsa para
     zero — era o que sumia com a barra no celular. Aqui ela toma a linha
     inteira embaixo do numero (o flex-wrap do td acima e o que permite), que
     no estreito le melhor do que uma barrinha espremida ao lado do valor. */
  .tabela--empilha .barra-proporcao {
    flex: 1 0 100%;
    max-width: none;
    margin-top: var(--e1);
  }
  .tabela--empilha td:last-child { border-bottom: none; }
  .tabela--empilha td::before {
    content: attr(data-rotulo);
    font-size: var(--t-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tinta-fraca);
    text-align: left;
  }
  /* .estado-vazio ocupa a linha inteira (colspan) — nao e um par
     rotulo/valor como as demais celulas, entao sai do layout de linha. */
  .tabela--empilha td.celula-vazia {
    display: block;
    padding: 0;
    border-bottom: none;
    text-align: left;
  }
  .tabela--empilha td.celula-vazia::before { content: none; }
}

/* --- estado vazio: um convite a agir, nao um beco sem saida ------------------ */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e2);
  padding: var(--e7) var(--e5);
  color: var(--tinta-media);
}
.estado-vazio svg {
  width: var(--e6);
  height: var(--e6);
  color: var(--borda-forte);
  margin-bottom: var(--e1);
}
.estado-vazio h3 {
  font-size: var(--t-med);
  color: var(--tinta);
}
.estado-vazio p {
  font-size: var(--t-peq);
  max-width: 42ch;
}
.estado-vazio .acoes { margin-top: var(--e3); }

/* --- etiquetas de status ---------------------------------------------------
   ATENCAO: os nomes .online / .offline / .desconhecido sao contrato com
   Usina.Status — os templates emitem class="etiqueta {{ usina.status }}".
   Redesenhar a vontade; renomear quebra o status de todas as usinas. */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  border-radius: var(--raio-pilula);
  font-size: var(--t-micro);
  font-weight: 700;
  /* Caixa alta e o registro de status dos paineis da casa. O tracking fica em
     0.045em, e nao nos 0.07 do material impresso: a coluna ALERTAS da lista de
     usinas chega a ter duas etiquetas lado a lado, e cada 0.01em ali empurra a
     coluna de nome para quebrar em duas linhas. */
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}
.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.etiqueta.online { background: var(--mata-tinta); color: var(--mata); }
.etiqueta.offline { background: var(--alerta-tinta); color: var(--alerta); }
.etiqueta.desconhecido { background: var(--papel-fundo); color: var(--tinta-media); }
.etiqueta.alerta {
  background: var(--alerta-tinta);
  color: var(--alerta);
  margin-inline-end: var(--e1);
}
.etiqueta.sol,
.etiqueta.aberta { background: var(--sol-tinta); color: var(--sol-texto); }

/* --- etiquetas de status de cobranca -----------------------------------
   Mesmo contrato do bloco acima, agora para os enums de cobranca:
   Assinatura.Status (ativa/inadimplente/cancelada) e Fatura.Status
   (aberta/paga/falhou/cancelada) — os templates emitem
   class="etiqueta {{ assinatura.status }}" / class="etiqueta {{ fatura.status }}". */
.etiqueta.ativa,
.etiqueta.paga { background: var(--mata-tinta); color: var(--mata); }
.etiqueta.inadimplente,
.etiqueta.falhou { background: var(--alerta-tinta); color: var(--alerta); }
.etiqueta.cancelada { background: var(--papel-fundo); color: var(--tinta-media); }

/* --- formularios ------------------------------------------------------------ */
.formulario { max-width: 560px; }

.formulario label {
  display: block;
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--tinta-media);
  margin-bottom: var(--e4);
}

/* _campo.html (Task 9) desaninha o label do input -- eles viram irmaos em
   vez de label envolvente. O margin-bottom acima (16px) foi calibrado pra
   colapsar contra o padding interno do <label> antigo; aqui ele colapsaria
   contra o margin-top do input e o label ficaria equidistante entre os dois
   campos em vez de colado ao seu proprio. Escopado a `.campo label` pra nao
   afetar o login, que ainda usa o `<label>` envolvente antigo. */
.formulario .campo label {
  margin-bottom: var(--e1);
}

.formulario input,
.formulario select,
.formulario textarea,
.filtros input,
.filtros select,
.controles-periodo input,
.controles-periodo select {
  font: inherit;
  font-size: var(--t-base);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.formulario input,
.formulario select,
.formulario textarea {
  display: block;
  width: 100%;
  margin-top: var(--e2);
  padding: var(--e3);
}

/* Campo de dado usa mono: um numero digitado le como um numero. */
.formulario input[type="text"],
.formulario input[type="number"],
.formulario input[type="date"],
.formulario input[type="password"],
.formulario input[type="email"] { font-family: var(--fonte-dado); }

.formulario input:hover,
.formulario select:hover,
.formulario textarea:hover { border-color: var(--tinta-fraca); }

/* outline vem do :focus-visible global (base.css) — nao suprimido aqui.
   O anel abaixo (--sol-tinta, ~1.1:1 sobre --superficie) e decorativo, um
   reforco de marca sob o clique do mouse; sozinho nao cumpre o piso de
   contraste de foco (3:1, WCAG 1.4.11) — quem navega por teclado depende
   do outline visivel, nao deste box-shadow (Task 12). */
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  border-color: var(--sol);
  box-shadow: 0 0 0 3px var(--sol-tinta);
}

.formulario input[type="checkbox"],
.formulario input[type="radio"] {
  display: inline-block;
  width: auto;
  margin: 0 var(--e2) 0 0;
  accent-color: var(--sol);
}

.formulario .ajuda {
  display: block;
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
  margin-top: var(--e1);
}

/* --- campo: contrato de marcacao proprio, substitui {{ form.as_p }} --------
   Um .campo por BoundField (ver painel/templates/painel/_campo.html): rotulo,
   widget, ajuda e erro (padrao .aviso.error) empilhados verticalmente. Fica
   aqui, nao em telas.css, porque o mesmo padrao serve qualquer formulario do
   produto (clientes, conexoes, usinas, configuracoes). */
.formulario .campo { margin-bottom: var(--e4); }
/* O :last-child que existia aqui antes nunca disparava — o ultimo filho de
   .formulario e sempre .acoes, nao o ultimo .campo, entao a regra era morta.
   Na pratica isso nao dobrava o gap: margem inferior do .campo e margem
   superior do .acoes (ambos var(--e4)) sao irmaos de bloco adjacentes e
   colapsam pelo espec de CSS, resultando nos mesmos 16px pretendidos "de
   graca". Esta regra torna esse resultado explicito e independente de
   colapso de margem — se .formulario ou .acoes ganharem padding/border ou
   virarem flex/grid no futuro, o colapso implicito para de valer e o gap
   dobraria silenciosamente sem esta linha. */
.formulario .campo + .acoes { margin-top: 0; }

/* Campo invalido: a borda vermelha do proprio input reforca o .campo-erro
   abaixo dele — quem escaneia a tela ve o campo errado antes de ler o texto. */
.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--alerta); }

/* Checkbox: caixa e rotulo lado a lado numa unica label clicavel, igual ao
   padrao ja usado em .preferencia-alerta-opcoes. */
.formulario .campo-caixa {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: 0;
}

.campo-erro { margin-top: var(--e2); }

/* Barra de ferramentas: uma superficie com borda, nao tres campos soltos no
   ar. Busca cresce a esquerda, os dois selects ficam agrupados a direita —
   um unico corpo, com hierarquia clara entre "o que eu digito" e "o que eu
   escolho". Unico consumidor: usinas/lista.html. */
.filtros {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-block: var(--e4);
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  flex-wrap: wrap;
}
.filtros input,
.filtros select { padding: var(--e2) var(--e3); font-size: var(--t-peq); }

.filtros-campo { position: relative; }
.filtros-busca {
  flex: 1 1 220px;
  min-width: 160px;
}
.filtros-busca svg {
  position: absolute;
  left: var(--e2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--e4);
  height: var(--e4);
  color: var(--tinta-fraca);
  pointer-events: none;
}
.filtros-busca input {
  width: 100%;
  padding-left: calc(var(--e4) + var(--e3));
}

.filtros-grupo {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-left: auto;
}

.acoes {
  display: flex;
  gap: var(--e3);
  align-items: center;
  margin-top: var(--e4);
  flex-wrap: wrap;
}

/* Dentro de celula de tabela o respiro de cima ja e o padding da celula: o
   margin-top do .acoes empurraria a linha inteira e desalinharia a coluna de
   acoes das outras. Usado na coluna de acoes da tela de Equipe. */
.tabela .acoes { margin-top: 0; }

/* --- botoes ---------------------------------------------------------------- */
.botao,
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-radius: var(--raio-p);
  font-size: var(--t-peq);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.botao {
  background: var(--sol);
  color: var(--sol-sobre);
  border-color: var(--sol-forte);
  box-shadow: var(--sombra-1);
}
.botao:hover { background: var(--sol-forte); color: var(--superficie); }
.botao:active { transform: translateY(1px); }

.botao-secundario {
  background: var(--superficie);
  border-color: var(--borda-forte);
  color: var(--tinta);
}
.botao-secundario:hover { border-color: var(--tinta-fraca); background: var(--papel); }
.botao-secundario:active { transform: translateY(1px); }

/* Largura total e a excecao (formulario de login), nao a regra. Antes isto
   era global e forcava todo botao primario a ocupar a linha inteira. */
.botao--bloco { width: 100%; }

/* Acao destrutiva. Na lista, e um secundario que so troca a cor da tinta — o
   perigo esta na palavra "Excluir", e um botao vermelho cheio ao lado de
   "Sincronizar agora" gritaria mais alto que a acao principal. Na tela de
   confirmacao, onde excluir E a acao principal, o `.botao.botao--perigo` fica
   preenchido: ali o vermelho e a informacao.
   --alerta sobre --superficie: 5,94:1. Branco sobre --alerta: 5,94:1. */
.botao-secundario.botao--perigo {
  color: var(--alerta);
  border-color: color-mix(in srgb, var(--alerta) 35%, var(--borda-forte));
}
.botao-secundario.botao--perigo:hover {
  background: var(--alerta-tinta);
  border-color: var(--alerta);
}

.botao.botao--perigo { background: var(--alerta); color: var(--superficie); }
.botao.botao--perigo:hover {
  background: color-mix(in srgb, var(--alerta) 85%, black);
  color: var(--superficie);
}

.botao[disabled],
.botao-secundario[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.link {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: var(--t-peq);
  padding: 0;
  transition: color var(--transicao);
}
.link:hover { color: var(--sol-texto); }

/* --- avisos ----------------------------------------------------------------
   Barra de 3px a esquerda: da para saber a gravidade pelo canto do olho, sem
   ler. O icone reforca a mesma leitura para quem nao distingue cor (ambar x
   vermelho falha em deuteranopia).

   Contrato de marcacao: um .aviso e um .aviso-icone (SVG, escolhido pela
   gravidade — ver painel/templates/painel/_aviso_icone.html) seguido de UM
   elemento com o resto do conteudo (texto e, se houver, link), ex.:
     <p class="aviso error">
       {% include "painel/_aviso_icone.html" with tags="error" %}
       <span>Texto do aviso <a href="...">acao</a></span>
     </p>
   O conteudo precisa ficar dentro de um unico filho porque .aviso e flex:
   texto solto e o <a> viram itens de flex separados e quebram o fluxo da
   frase se nao estiverem embrulhados juntos. Mesmo contrato para os erros
   de campo de formulario (Task 9). */
.avisos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-radius: var(--raio-p);
  font-size: var(--t-peq);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
}
.aviso-icone {
  width: var(--e4);
  height: var(--e4);
  flex-shrink: 0;
}
.aviso.error {
  color: var(--alerta);
  background: var(--alerta-tinta);
  border-color: color-mix(in srgb, var(--alerta) 25%, transparent);
  border-left-color: var(--alerta);
}
.aviso.success {
  color: var(--mata);
  background: var(--mata-tinta);
  border-color: color-mix(in srgb, var(--mata) 25%, transparent);
  border-left-color: var(--mata);
}
.aviso.warning {
  color: var(--sol-texto);
  background: var(--sol-tinta);
  border-color: color-mix(in srgb, var(--sol) 35%, transparent);
  border-left-color: var(--sol);
}

/* --- tooltip dos graficos ----------------------------------------------
   Chart.js so oferece a caixa de tooltip padrao; graficos.js desenha esta
   div a mao (external tooltip) e so alterna classe/texto -- a aparencia
   inteira mora aqui, vestida com os mesmos tokens de qualquer cartao. Presa
   ao wrapper do canvas (position: relative aplicado em JS), nao ao cursor. */
.grafico-tooltip {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - var(--e2)));
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-2);
  padding: var(--e2) var(--e3);
  white-space: nowrap;
  transition: opacity var(--transicao);
}
.grafico-tooltip-valor {
  display: block;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--tinta);
}
.grafico-tooltip-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);
}

/* --- ficha de credencial ---------------------------------------------------
   Material de consulta dentro de um formulario: as chaves que a plataforma
   escolhida aceita (conexoes/formulario.html) ou o que esperar de uma
   importacao (usinas/importar.html). Vive dentro de .formulario mas nao e
   campo, entao recua para o fundo de recuo e ganha barra colorida a esquerda,
   ficando claramente "nota", nao "entrada".

   Herda a largura de .formulario (560px) de proposito: uma ficha mais larga
   que o formulario que ela explica parece um segundo conteudo, nao um apoio.

   A margem superior e a normal, e nao um recuo negativo que cole a ficha ao
   campo anterior: colada, ela se le como parte do campo — o que ate funcionava
   embaixo da ajuda do textarea de credenciais, mas encostava no input de data
   na tela de importacao, onde nao ha ajuda entre os dois. */
.formulario .ficha-credencial {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  background: var(--papel-fundo);
  border-radius: var(--raio);
  border-left: var(--acento) solid var(--sol);
}

.ficha-credencial-titulo {
  margin: 0 0 var(--e3);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.ficha-credencial-lista {
  margin: 0;
  display: grid;
  gap: var(--e3);
}

/* Chave e descricao lado a lado a partir de 480px; empilhadas abaixo disso,
   que e onde a coluna fixa de chave espremeria a descricao a duas palavras
   por linha. */
.ficha-credencial-lista > div { display: grid; gap: var(--e1); }

@media (min-width: 480px) {
  .ficha-credencial-lista > div {
    grid-template-columns: minmax(0, 11rem) 1fr;
    gap: var(--e1) var(--e4);
    align-items: baseline;
  }
}

.ficha-credencial-lista dt {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
}

.ficha-credencial-lista dt code {
  font-family: var(--fonte-dado);
  font-size: var(--t-peq);
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.ficha-credencial-lista dd {
  margin: 0;
  font-size: var(--t-peq);
  line-height: var(--altura-base);
  color: var(--tinta-media);
}

/* O exemplo cai para a linha de baixo: colado ao fim da descricao, ele era
   lido como continuacao da frase. */
.ficha-credencial-exemplo {
  display: block;
  margin-top: var(--e1);
  font-family: var(--fonte-dado);
  font-size: var(--t-micro);
  color: var(--tinta-fraca);
}

.ficha-credencial-vazia {
  margin: 0;
  font-size: var(--t-peq);
  line-height: var(--altura-base);
  color: var(--tinta-media);
}