/* ══════════════════════════════════════════════════════════════════
   BENTO, a grade dos painéis
   ──────────────────────────────────────────────────────────────────
   Saiu de dentro de index.html em 02/11/2026, quando o painel do
   admin passou a desenhar na mesma grade. É só desenho: não lê dado,
   não tem texto, e depende apenas dos tokens que index.html e
   admin.html declaram IGUAIS no :root dos dois.
   Quem monta a marcação é web/bento.js.
   ══════════════════════════════════════════════════════════════════ */

/* ══ BENTO, a grade das duas telas de painel ══
   Doze colunas porque doze divide por 2, 3, 4 e 6: a mesma grade
   serve "metade e metade", "um terço" e "um sexto" sem recontar
   nada. As classes dizem QUANTAS COLUNAS o bloco toma, e não o que
   ele é, porque numa grade o que importa é isso mesmo; o papel de
   cada bloco está no HTML que carregarRelatorios() e carregarUso()
   escrevem.
   Esta grade substitui a fila de .par-numeros e a grade de
   .rel-numeros que as duas telas usavam: lá todo número tinha o
   mesmo peso, e número não tem. */
/* margin-bottom, e nao so gap: sem ela o bento encostava no bloco de
   baixo, vao de ZERO px medido no painel e na cobranca do admin, que e
   onde isto se via como dois cartoes quase sobrepostos. */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--espaco-dentro);margin-bottom:var(--espaco-bloco)}
/* margin-bottom:0 porque .panel traz uma margem de pilha em admin.html,
   e dentro de um grid quem espaça é o gap: sem zerar, cada cartão ficava
   20 px mais alto que a linha dele. */
.bento > *{min-width:0;margin-bottom:0}
.bt-2{grid-column:span 2}
.bt-3{grid-column:span 3}
.bt-4{grid-column:span 4}
/* 5 e 7 existem para FORMULÁRIO, onde as duas metades nunca pedem a
   mesma largura: "Dados de cobrança" tem dois campos e "Endereço" tem
   sete, e 6+6 daria ao segundo a mesma largura do primeiro. */
.bt-5{grid-column:span 5}
.bt-6{grid-column:span 6}
.bt-7{grid-column:span 7}
.bt-8{grid-column:span 8}
.bt-12{grid-column:span 12}
/* Nenhum bloco atravessa duas linhas: o grid já estica os blocos da
   MESMA linha para a mesma altura, e é dele que vem o destaque
   escuro ter exatamente a altura do gráfico ao lado.
   .bt-cheio marca quem vira largura inteira CEDO, antes dos
   números: abaixo de 1020 os dois blocos grandes ficavam com menos
   de 400 px cada, e o gráfico de doze meses não cabe nisso. Os
   números continuam três por linha ali, que é onde eles ainda leem
   bem. */
@media(max-width:1020px){
  .bt-cheio{grid-column:span 12}
  .bt-2{grid-column:span 4}
  /* Quatro cartões de três colunas viram dois e dois, sem órfão. */
  .bt-3{grid-column:span 6}
}
/* No celular os números vão dois a dois. O ÚLTIMO de uma trinca
   ficaria sozinho com metade da linha vazia ao lado, então ele leva
   .bt-fim e ocupa a linha inteira; quem marca é o JS, que sabe
   quantos números a tela tem. */
/*  AS DUAS MEDIAS ABAIXO SO MEXEM EM COLUNA, e isso e regra, nao
    acaso: elas moram no alto do arquivo, antes das classes de desenho,
    e media query NAO soma especificidade. Regra de aparencia escrita
    aqui perde o empate para a declaracao base, que vem depois.
    Aparencia que muda com a largura vai junto da classe dela, la
    embaixo. Medido: .bt-v{font-size:24px} escrito aqui nao valia. */
@media(max-width:620px){
  .bento{gap:12px;margin-bottom:var(--espaco-dentro)}
  .bt-2,.bt-3,.bt-4{grid-column:span 6}
  /* Bloco de formulário em meia tela de celular dá 170 px de campo, e
     170 px não se digita. Os de meia tela para cima vão a largura
     inteira. Os antigos já iam, por .bt-cheio; esta linha só alcança os
     que não têm. */
  .bt-5,.bt-6,.bt-7,.bt-8{grid-column:span 12}
  /* .bt-cheio REPETIDO aqui, e não só na faixa de 1020: o destaque
     dos relatórios é .bt-4 .bt-cheio, e a regra de .bt-4 desta faixa
     vem depois na folha, com a mesma especificidade. Sem esta linha
     ele voltava a meia largura justamente no celular, que foi onde
     eu medi e vi. */
  .bt-cheio,.bt-fim{grid-column:span 12}
}

/* O cartão de número. O ícone fica num selo cinza em cima, o número
   em Sora logo abaixo: a fonte de título dá ao algarismo o mesmo
   peso que ela dá ao nome da tela, e é o algarismo que se vem ler. */
.bt-kpi{padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.bt-kpi-ic{width:34px;height:34px;border-radius:var(--r-campo);background:var(--grayBg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:17px}
.bt-kpi-ic .bv-ic{margin-right:0}
/* min-width:0 nos filhos: sem isto o bloco do número não encolhe
   abaixo do conteúdo, e "R$ 61.420,00" ficava numa linha só
   transbordando o cartão em vez de quebrar depois do "R$". Medido em
   375 px: 159 px de texto contra 122 px de espaço útil. */
.bt-kpi > *{min-width:0}
.bt-v{font-family:var(--fonte-titulo);font-size:32px;font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.02em}
/* Medido em 1240 px, no cartão de três colunas: 178 px de espaço
   útil, e "R$ 61.420,00" ocupa 211 px em 32 px e 158 px em 24.
   overflow-wrap é a rede para o valor que um dia for maior do que
   24 px comporta: quebra feio, e feio ainda é melhor que vazar para
   fora da caixa. Medido com R$ 1.234.567.890,12. */
.bt-v-longo{font-size:24px;overflow-wrap:anywhere}
.bt-r{font-size:12.5px;color:var(--gray);line-height:1.35;margin-top:6px}
/* O algarismo encolhe no celular. Medido em 375 px: o cartão de meia
   largura dá 168 px, e "R$ 61.420,00" em 32 px transbordava, porque
   "61.420,00" é uma palavra só e não tem onde quebrar. Vale para todos
   os números, e não só para os de dinheiro: dois tamanhos na mesma fila
   fariam o olho ler hierarquia onde não há. */
@media(max-width:620px){
  /* 22 px, e não 24: medido, "61.420,00" ocupa 127 px em 24 px e
     116 px em 22, contra 122 px de espaço útil no cartão de meia
     largura. overflow-wrap é a rede para o valor que um dia for
     maior que este: quebra feio, e feio ainda é melhor que vazar
     para fora da caixa. */
  .bt-v{font-size:22px;overflow-wrap:anywhere}
  /* 18 px no cartao de meia largura do celular: 122 px de espaco util,
     e "R$ 61.420,00" ocupa 119 px em 18. */
  .bt-v-longo{font-size:18px}
}
/* A linha de contexto embaixo do rótulo. Mais escura que ele de
   propósito: ela diz um FATO ("8 já atendidos"), e o rótulo só nomeia o
   número. Igualar as duas faria o olho ler as duas como legenda. */
.bt-sub{font-size:11.5px;color:var(--soft);margin-top:5px;line-height:1.35}

/* ══ O DESTAQUE, o único bloco escuro da tela ══
   Um só, de propósito: dois blocos escuros disputariam a mesma
   atenção e nenhum dos dois seria o primeiro a ser lido.
   O fundo é --tinta para --navy, e o halo é --teal: a cor da marca
   tem 2,12 de contraste sobre branco e por isso nunca carrega texto
   sobre claro, mas é exatamente aqui, sobre o escuro, que ela foi
   feita para brilhar.

   O HALO ESTÁ EM .20, E NÃO EM .28, POR MEDIDA. Cor de texto
   aprovada contra a cor de fundo nominal não garante nada: o que o
   olho recebe é o PIXEL COMPOSTO, o degradê com o halo translúcido
   por cima. Varrendo o bloco inteiro de três em três pixels, nas
   três larguras que ele assume (283, 351 e 432), o ponto mais claro
   dava ao rótulo em --teal só 4,03 a 4,31 com o halo em .28, abaixo
   dos 4,5 que a WCAG pede para texto normal. Em .20 esse mesmo
   ponto, o pior do bloco, dá de 4,81 a 5,14, e o número em branco
   de 10,2 a 10,9.
   A conta foi feita no PIOR PONTO, e não onde o texto está hoje, de
   propósito: assim a garantia não depende de o rótulo ser curto nem
   de a caixa ter esta largura. */
.bt-escuro{position:relative;overflow:hidden;border-radius:var(--r-cartao);padding:24px;
  background:linear-gradient(145deg,var(--tinta) 0%,var(--navy) 100%);
  box-shadow:0 10px 30px rgba(7,18,41,.22);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.bt-escuro::before{content:'';position:absolute;top:-80px;right:-70px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(31,197,201,.20) 0%,rgba(31,197,201,0) 70%);pointer-events:none}
.bt-escuro-r{position:relative;font-size:11.5px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.09em;line-height:1.4}
.bt-escuro-v{position:relative;font-family:var(--fonte-titulo);font-size:clamp(42px,5vw,56px);font-weight:700;color:#fff;line-height:1;letter-spacing:-.03em;margin-top:10px}
/* A linha de contexto do destaque, para o bloco que não tem uma semana
   de barrinhas a mostrar: a cobrança não guarda série por dia. Branco
   rebaixado, e não --teal, porque o rótulo de cima já é teal e dois
   tons da mesma cor no mesmo bloco disputam a leitura. */
.bt-escuro-nota{position:relative;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.4}

/* As sete barrinhas da semana. São ornamento informativo e vão
   ESCONDIDAS do leitor de tela: o número que elas acompanham já está
   escrito do lado, e lê-las uma a uma não acrescentaria nada.
   Dia sem coleta fica com um traço claro em vez de some: a semana
   tem sete dias, e uma fila que encolhe esconde a parada. */
/* A fila OCUPA o que sobra do bloco, em vez de ter altura própria: o
   destaque estica para casar com a altura do gráfico ao lado, e com
   as barrinhas presas em 48 px sobrava um vão no meio. Por isso a
   altura de cada barra vem em POR CENTO desta fila, e não em pixel
   como a do gráfico de doze meses, onde a caixa tem altura fixa e
   divide o espaço com dois textos. */
.bt-spark{position:relative;display:flex;align-items:flex-end;gap:6px;flex:1 1 auto;min-height:48px}
.bt-spark-b{flex:1;border-radius:4px 4px 0 0;background:rgba(31,197,201,.85);min-height:3px}
.bt-spark-b.zero{background:rgba(255,255,255,.16)}
/* Quando o destaque passa a ocupar a largura inteira ele não tem mais
   um gráfico ao lado para casar de altura, e a fila esticada virava
   uma faixa de 130 px com sete barras de um palmo cada. Altura fixa
   ali, que é o tamanho em que sete dias ainda se leem como semana. */
@media(max-width:1020px){ .bt-spark{flex:0 0 64px} }

/* O rótulo de uma faixa de blocos, quando todos eles respondem pela
   mesma janela de tempo. Sem ele, "Coletas" e "Dias com coleta"
   ficariam sem dizer de quando são. */
/*  A GRADE QUE NÃO ESTICA. O padrão do bento é esticar os blocos de uma
    linha até a altura do mais alto, e isso é o certo para cartão de
    número: dois retângulos de alturas diferentes lado a lado pareceriam
    defeito. Em FORMULÁRIO é o contrário: "Dados de cobrança" tem 229 px
    de campos e "Endereço" tem 529, e esticar o primeiro desenha uma
    moldura de 529 px com conteúdo só no alto, que é o que de fato parece
    quebrado. Aqui cada bloco fica na altura que o conteúdo dele pede, e
    a próxima linha começa abaixo dos dois. */
.bento-livre{align-items:start}

.bt-secao{font-size:12px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
/* Um bento que segue outro. São dois, e não um, quando as duas faixas
   respondem por janelas de tempo diferentes e só a primeira leva o
   rótulo de seção. */
.bt-abaixo{margin-top:var(--espaco-bloco)}