/* dia.css — o bloco do DIA: cabecalho (data, clima, corpo) e o cartao da sessao.
 *
 * ⚠️ ESTE ARQUIVO E COMPARTILHADO entre /painel e /treino (a tela inicial). Ele saiu de dentro
 * do painel.html em 30/08, quando o Valmir pediu o bloco do dia tambem na tela inicial. Copiar
 * teria duplicado ~270 linhas e obrigado toda mudanca futura a ser feita em dois lugares — que
 * e exatamente como `.abas` passou a significar duas coisas neste projeto.
 *
 * ⚠️ TODO SELETOR AQUI COMECA POR `.dia-bloco`, SEM EXCECAO, e isso nao e estilo: e a unica
 * garantia que existe. Este projeto ja apagou o painel duas vezes por seletor de nome solto
 * vindo de bloco compartilhado (`.abas`, `.pc`), e neste recorte havia `.kpis`, `.barra`,
 * `.selo`, `.vazio`, `.prev`, `.faixa` e `.clima` — sete nomes genericos que pousariam em
 * qualquer coisa de qualquer pagina. Com o prefixo, o arquivo e ESTRUTURALMENTE incapaz de
 * vazar: se nao esta dentro de um `.dia-bloco`, ele nao alcanca.
 *
 * Quem usa tem de envolver o bloco em `<div class="dia-bloco">`.
 *
 * ⚠️ E CARREGADO ANTES do <style> de cada pagina, para a pagina poder sobrepor o que quiser.
 * O prefixo tambem subiu a especificidade de cada regra em uma classe; onde havia empate com
 * o CSS da propria pagina, este arquivo agora ganha — que e o que preserva a aparencia do
 * bloco onde quer que ele esteja.
 *
 * Os tokens que ele le (--f-num, --t-titulo, --supalta, --hover, --parcial, --dia, --ceu…)
 * precisam existir na pagina. A tela inicial os ganhou no commit 22732f0.
 */

/* as duas classes no mesmo elemento: ver o aviso em painel.html, `const dias` */
.dia-bloco.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dia-bloco .dia{display:flex;flex-direction:column;gap:8px;min-width:0}
/* Duas fileiras SEMPRE reservadas — ver o comentario em paginaDoDia(). */
/* O paginador sai do fluxo e mora num rodape de altura fixa. Como filho do flex ele somava
   altura APENAS nos dias com dois cartoes, e a coluna dos dias mudava de tamanho conforme a
   semana — que era a ultima fonte do pulo da pagina. */
.dia-bloco .cartoes{display:flex;flex-direction:column;gap:8px;position:relative;
  --rodape-pag:22px;padding-bottom:var(--rodape-pag);
  min-height:calc(var(--linhas-cartao, 2) * var(--h-cartao)
                  + (var(--linhas-cartao, 2) - 1) * 8px + var(--rodape-pag))}
.dia-bloco .cartoes .paginador{position:absolute;left:0;right:0;bottom:0;height:20px;padding:0}
.dia-bloco .paginador.vazio{visibility:hidden}
/* Botao de pagina: so aparece no hover ou no foco de teclado. Espec, secao 5.4.
   ⚠️ 08/09 — VIROU UM GRUPO DE TRES: seta, contador, seta. O seletor deixou de valer para um
   `<button>` e passou a valer para o `<div>` que os agrupa, e por isso as regras de BOTAO
   descem um nivel (`.paginador button`). Estilo de botao aplicado no contenedor pintaria a
   caixa inteira e deixaria os alvos reais sem cara de alvo. */
.dia-bloco .paginador{opacity:0;transition:opacity .15s;display:flex;align-items:center;gap:6px;
  justify-content:center;padding:2px;background:none;border:0;color:var(--txt2);
  font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.06em}
.dia-bloco .paginador button{font:inherit;color:inherit;background:none;border:0;
  cursor:pointer;padding:0 6px;line-height:1}
.dia-bloco .paginador .conta{font-variant-numeric:tabular-nums}
.dia-bloco .dia:hover .paginador,.dia-bloco .paginador:focus-visible{opacity:1}
/* ⚠️ 29/08 — EM TELA DE TOQUE NAO HA HOVER, E A ESPEC 5.4 NAO SABIA DISSO. Com `opacity:0`
   dependendo de `:hover`, o botao de pagina simplesmente NAO EXISTE no celular: um dia com
   tres atividades mostra duas e as outras ficam inalcancaveis, sem nenhum sinal de que ha
   mais. Nao e um enfeite escondido — e conteudo que some, no aparelho em que o painel mais
   e usado.
   `hover:none` e a pergunta certa, e nao a largura da tela: um tablet largo com toque tem o
   mesmo problema, e um notebook estreito com mouse nao tem. Alvo de toque tambem sobe para
   32px — 20px de altura e menos que qualquer dedo. */
@media (hover:none){
  /* ⚠️ O `+22px` do `min-height` de `.cartoes` E O RODAPE DO PAGINADOR. Subir so o
     `padding-bottom` para 34 deixava a caixa 12px mais curta do que o conteudo pede, e num
     dia de dois cartoes o segundo encostava na borda. As duas medidas sao a MESMA coisa e
     tem de andar juntas — por isso o `--rodape-pag`, que existe justamente para nao haver
     dois numeros para um so espaco. */
  /* ⚠️ 07/09 — 10px EM CAIXA ALTA E ROTULO, NAO CONTROLE. Valmir: "aumente o botao de
     navegacao das atividades do dia, fica muito pequeno". Ele estava herdando `--t-mini`
     (10px) e o tratamento de legenda — versalete, letra espacada, sem fundo —, que e
     exatamente a linguagem que o resto da tela usa para coisas que NAO se tocam. E este
     botao nao e enfeite: sem ele, um dia com tres atividades mostra duas e as outras ficam
     inalcancaveis no telefone (ver o aviso de 29/08 logo acima).
     44px e o minimo de toque que o app ja adota em `.rvazio` e nos botoes da esteira; o
     fundo e o que faz o alvo ser VISIVEL, e nao so grande. */
  /* ⚠️ 08/09 — O TAMANHO NUNCA FOI O PROBLEMA. Em 07/09 este botao foi de 20 para 44px a
     pedido do Valmir e em 08/09 ele voltou: "o tamanho atual nao ajuda". Era UM botao que so
     ANDAVA PARA FRENTE — para voltar da terceira atividade para a segunda, a volta inteira.
     Um controle que anda num sentido so nao fica utilizavel por ficar maior.
     Agora sao duas setas com alvo proprio de 44px e o contador no meio, no formato "2 de 3",
     que diz quantas ha — o "1/3" antigo parecia fracao. As setas ganham fundo porque e o
     fundo que faz o alvo ser VISIVEL, e nao so grande; o contador nao ganha, para nao virar
     um terceiro botao que nao clica. */
  .dia-bloco .cartoes{--rodape-pag:50px}
  .dia-bloco .cartoes .paginador{height:44px}
  .dia-bloco .paginador{opacity:1;color:var(--acento);font-size:var(--t-corpo);
    text-transform:none;letter-spacing:0;font-weight:600;gap:6px}
  .dia-bloco .paginador button{min-width:44px;height:38px;border-radius:11px;
    background:var(--sup);font-size:20px;display:grid;place-items:center}
  .dia-bloco .paginador button:active{background:var(--alta)}
  .dia-bloco .paginador .conta{font-size:var(--t-mini);color:var(--txt2);font-weight:600;
    padding:0 4px;min-width:60px;text-align:center}
}
.dia-bloco .paginador button:focus-visible{outline:2px solid var(--acento);outline-offset:2px;
  border-radius:11px}

/* cabecalho do dia. Duas densidades da MESMA linguagem: bloco da marca com a data, grade de
   icones para o ambiente, tira clara para o corpo. No telefone ele cresce; no desktop, onde
   a coluna tem ~160px, ele se reorganiza — nunca encolhe a ponto de truncar valor. */
.dia-bloco .cab{border:1px solid var(--linha);border-radius:6px;overflow:hidden}
/* DESKTOP: a data em cima, o ambiente embaixo em DUAS colunas.
   Lado a lado nao da: a coluna do dia tem ~145px uteis e o bloco da data come 72 deles —
   sobravam 73px, onde "37km/h" mal cabe numa coluna, quanto mais duas. Empilhando, a grade
   usa a largura inteira e as duas colunas cabem. No telefone (media query la embaixo) volta
   a ser lado a lado, como no mockup, porque la a largura sobra. */
.dia-bloco .topo-dia{display:flex;flex-direction:column;gap:6px;padding:8px 10px;
  background:var(--dia);color:var(--dia-txt)}
/* A coluna da data tem altura FIXA. Antes o selo "previsão" so existia no dia previsto, e
   aquele dia ficava mais alto que os outros seis — a linha da semana inteira desalinhava.
   O selo agora ocupa lugar sempre; quando nao ha previsao, o lugar fica vazio. */
.dia-bloco .topo-dia .data{display:flex;flex-direction:row;align-items:center;gap:9px;min-width:0;flex:1}
/* Mes e dia da semana empilhados, e o par CENTRADO com o circulo — o mes sobe, a abreviatura
   desce, e o conjunto fica na altura do numero em vez de correr ao lado dele. */
/* ⚠️ `min-width:0` NAO e decorativo: sem ele um filho de flex nunca encolhe abaixo do
   proprio conteudo, e o `text-overflow:ellipsis` do `.dow` nunca chega a agir — o texto
   simplesmente transborda por cima da temperatura e da coluna vizinha. Com "Agosto" na
   linha grande o problema nao aparecia (48px cabiam em qualquer largura); com
   "hoje, Segunda-feira" sao 142px, e a 1180px a coluna inteira tem 158px. */
.dia-bloco .topo-dia .mesdow{display:flex;flex-direction:column;justify-content:center;line-height:1.08;
  min-width:0}
.dia-bloco .topo-dia .bola{width:34px;height:34px;border-radius:50%;background:var(--bola-bg);color:var(--bola-txt);
  display:grid;place-items:center;font-family:var(--f-num);font-size:17px;font-weight:500}
/* O mes e 30% maior que a abreviatura do dia (13 / 10 = 1,3), a pedido. */
/* ⚠️ INVERTIDO em 28/08: o dia da semana passou a ser a linha grande e o mes a pequena.
   Quem olha a semana procura "que dia e este", nao "que mes e" — o mes e o mesmo em quase
   todas as sete colunas, entao repeti-lo em corpo maior gastava o destaque com a informacao
   menos util da linha.
   ⚠️ `nowrap` + `ellipsis` no dia da semana: a coluna e 1/7 da tela e "hoje, Segunda-feira"
   e a cadeia mais longa possivel. Deixar quebrar empurraria o cabecalho para baixo e mudaria
   a altura de UMA coluna — a grade inteira ficaria com degrau. Cortar com reticencias e
   visivel; quebrar em silencio nao e. */
.dia-bloco .topo-dia .dow{font-size:13px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠️ `nowrap` aqui tambem, e nao so no `.dow`: com "hoje · " a linha do mes passou a
   quebrar em duas na coluna de hoje, e o cabecalho daquela coluna ficou 6px mais alto que
   os outros seis — degrau na grade, visivel de longe e invisivel numa captura de uma
   coluna so. Foi o teste comparando a ALTURA das sete colunas que mostrou. */
.dia-bloco .topo-dia .mes{font-size:10px;font-weight:500;opacity:.75;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠️ "hoje" mora na linha do MES, e nao junto do nome do dia. Duas tentativas antes desta
   nao couberam, e as duas so apareceram quando o teste passou a usar a temperatura como ela
   e de verdade — uma FAIXA ("21°–29°"), nao um numero ("21°"). Com a faixa, a 1366px sobram
   ~66px para o texto: "Segunda" pede 62 e cabe; "hoje, Segunda" pede 91 e sai "hoje, Se…",
   cortado justamente no dia que mais importa.
   Na linha de baixo o problema some: "hoje · Agosto" pede 62px em 10px, e o mes sozinho ja
   ocupava 40. O dia da semana fica inteiro na linha grande, que era o pedido. */
/* ⚠️ NAO usa `--acento`: o `.topo-dia` e escuro NOS DOIS TEMAS (as duas paletas definem
   `--dia`/`--dia-txt` iguais), e o `--acento` do tema claro e #6020b0 — roxo escuro sobre
   cinza escuro. No tema escuro ficava otimo; no claro o "hoje" praticamente sumia, e um
   print de um tema so nao mostraria. Destaque por PESO e OPACIDADE resolve nos dois, porque
   nao depende de cor de tema nenhuma: o mes ao lado esta em .75, o "hoje" em 1. */
.dia-bloco .topo-dia .mes .ag{font-style:normal;font-weight:700;opacity:1;
  letter-spacing:.02em;text-transform:uppercase;font-size:9px}
/* As SEIS celulas aparecem sempre — chuva, nascer, vento, por do sol, passos e kcal.
   Antes tres eram escondidas no desktop porque a coluna tem ~160px e nao cabem duas colunas
   de texto. A saida nao e esconder dado: e empilhar. No desktop viram seis linhas numa coluna
   so (o cabecalho fica mais alto, e igual nos sete dias, entao a semana segue alinhada);
   no telefone, duas colunas de tres, como no mockup. */
.dia-bloco .topo-dia .amb{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;align-content:center;
  flex:1;min-width:0;font-family:var(--f-num);font-size:11px;font-variant-numeric:tabular-nums}
.dia-bloco .topo-dia .amb span{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dia-bloco .topo-dia .amb .nao{opacity:.45}
/* Variante B3, escolhida em 25/08: cada icone com a cor do que ele MEDE.
   Isto resolve, a favor do PDF, o conflito anotado desde o inicio do projeto — o documento
   de design pedia coracao coral, HRV verde e sono violeta; a imagem de referencia depois
   usou o acento da marca em tudo. Ganhou o PDF.
   ⚠️ So o ICONE recebe cor. Numero colorido vira semaforo, e ai 125,3 kg em ambar parece um
   alerta que ninguem emitiu. */
.dia-bloco .topo-dia .amb .i-chuva  svg{color:var(--ceu)}
.dia-bloco .topo-dia .amb .i-sol    svg{color:var(--ambar)}
.dia-bloco .topo-dia .amb .i-vento  svg{color:#a8b6c9}
.dia-bloco .topo-dia .amb .i-lua    svg{color:#b9a6e6}
.dia-bloco .topo-dia .amb .i-passos svg{color:var(--verde)}
.dia-bloco .topo-dia .amb .i-fc     svg{color:var(--quente)}
.dia-bloco .topo-dia .amb .i-peso   svg{color:#cfd3da}
.dia-bloco .topo-dia .amb .i-pct    svg{color:var(--ambar)}
.dia-bloco .topo-dia .amb .i-hrv    svg{color:var(--verde)}
.dia-bloco .topo-dia .amb .i-sono   svg{color:var(--acento)}
/* "3.550kcal" nao cabe nos ~73px da coluna do desktop e virava reticencia. O icone ja diz
   que e caloria, entao a unidade aparece so onde ha espaco. O NUMERO nunca some. */
.dia-bloco .topo-dia .amb .un{display:none}
.dia-bloco .dia.hoje .topo-dia{box-shadow:inset 0 0 0 2px var(--acento)}
/* A temperatura vive na LINHA DA DATA (proposta de 25/08). Sozinha ela ocupava uma faixa
   inteira do cabecalho, e a faixa se repetia nos sete dias; ao lado do mes ela usa espaco
   que ja estava vazio e o cabecalho do dia encurta ~21px — que e exatamente o tipo de folga
   que faz o painel caber sem rolagem. Nada se perde: o termometro continua distinguindo
   previsao (ambar) de medida (branco).
   ⚠️ `margin-left:auto` so empurra porque a `.data` ganhou `flex:1`; sem isso a linha
   encolhe ate o conteudo e a temperatura fica colada no mes. */
.dia-bloco .topo-dia .temp{display:flex;align-items:center;gap:5px;font-family:var(--f-num);font-size:12px;
  font-variant-numeric:tabular-nums;opacity:.9;margin-left:auto;white-space:nowrap}
/* Termometro ambar = previsao; branco = medida. A cor no simbolo, o numero sempre branco. */
.dia-bloco .topo-dia .temp.previsto{cursor:help}
.dia-bloco .topo-dia .temp.previsto svg{color:var(--parcial)}

/* ⚠️ A TIRA CLARA DO CORPO FOI REMOVIDA (a pedido, 25/08).
   FC de repouso, peso, HRV e sono passaram para a MESMA grade do ambiente, com os mesmos
   icones e o mesmo cinza. O motivo dado foi bom: aqueles quatro numeros nao sao de outra
   natureza — sao o estado do dia, igual a chuva e aos passos. Uma tabela separada embaixo
   sugeria uma hierarquia que nao existe.
   O filete mantem a unica distincao que importa: o que veio do MUNDO (chuva, sol, vento, lua)
   em cima; o que veio do CORPO (passos, FC, peso, gordura, HRV, sono) embaixo. E uma linha,
   nao uma caixa. Passos mudou de grupo de proposito: passo e do corpo, nao do tempo.
   ⚠️ KCAL SAIU (a pedido): so existia em dia com atividade e ficava em traco no resto da
   semana. O numero nao se perdeu — continua no cartao de cada treino e no resumo da semana.
   Se um dia voltar, o lugar dele e aqui embaixo, ao lado dos passos. */
.dia-bloco .topo-dia .amb .risco{grid-column:1/-1;height:1px;margin:3px 0;
  background:currentColor;opacity:.15}


/* ══════════════════ a faixa do tempo: a ARTE atrás do cabeçalho do dia
   ⚠️ ESTAS REGRAS FALTAVAM e é por isso que a Home saiu sem o banner (Valmir, 30/08:
   "faltou o banner representativo"). O `@media (max-width:600px)` abaixo já tinha os
   ajustes de tamanho da `.faixa-tempo` — mas ajuste sem base não pinta nada: sem
   `position:relative` e sem o `::before`, `--arte` nunca chega à tela. Regra do recorte:
   quem leva um override leva a base junto, senão o override fica órfão e silencioso.

   O `::before` existe para a MÁSCARA poder desbotar só a arte. Aplicada no próprio
   elemento, ela apagaria o texto (dia, mês, temperatura) junto. */
.dia-bloco .faixa-tempo{position:relative;margin:-8px -10px 7px;padding:7px 10px 22px;
  border-radius:8px 8px 0 0;isolation:isolate}
.dia-bloco .faixa-tempo::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background-image:var(--arte);background-repeat:no-repeat;
  background-position:right center;background-size:auto 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 58%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 58%)}
/* A TARJA da linha do tempo (pedido de 02/09): um degrade escuro e translucido na base
   do banner, atras de cidade/temperatura/vento — sobre nuvem clara ou sol, a linha
   precisa de chao. Fica ACIMA da arte (::before, tambem z-index -1, mas declarada antes)
   e ABAIXO do texto. pointer-events livre: e so tinta. */
.dia-bloco .faixa-tempo::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:24px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,13,18,0) 0%,rgba(10,13,18,.42) 45%,rgba(10,13,18,.6) 100%)}
.dia-bloco .faixa-tempo .data{width:100%}
/* Sombra no texto: sobre nuvem clara o branco sozinho não se sustenta. */
.dia-bloco .faixa-tempo .dow,.dia-bloco .faixa-tempo .mes{text-shadow:0 1px 3px rgba(0,0,0,.5)}
.dia-bloco .faixa-tempo .bola{width:24px;height:24px;font-size:11px}
.dia-bloco .faixa-tempo .temp-pe{position:absolute;left:10px;bottom:4px;font-size:10.5px;
  font-family:var(--f-num);font-variant-numeric:tabular-nums;display:flex;gap:3px;
  align-items:center;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.dia-bloco .faixa-tempo .temp-pe img{width:14px;height:14px;object-fit:contain;flex:none}
/* O LUGAR abre a fila (pedido de 02/09: cidade, temperatura, vento — nesta ordem). So
   existe em dia de viagem: em casa a API nem manda o campo. Ambar de "fora do padrao". */
.dia-bloco .faixa-tempo .onde-pe{font-weight:700;color:var(--parcial);margin-right:9px;
  font-family:inherit;letter-spacing:.02em;max-width:46%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Em casa o nome fica na cor da linha, sem alarde — ambar e so pra dia FORA do padrao. */
.dia-bloco .faixa-tempo .onde-pe.casa{color:inherit;font-weight:600;opacity:.9}
.dia-bloco .faixa-tempo .temp-pe .vento-pe{display:flex;align-items:center;gap:3px;margin-left:9px}

/* As nove células do ambiente em duas colunas, com o ícone desenhado (não o SVG de traço). */
.dia-bloco .topo-dia .amb.tudo{grid-template-columns:1fr 1fr;gap:3px 8px;font-size:10.5px}
.dia-bloco .topo-dia .amb.tudo span{justify-content:flex-start;gap:3px}
.dia-bloco .topo-dia .amb.tudo img{width:16px;height:16px;object-fit:cover;border-radius:3px;flex:none}

/* ══════════════════ dia sem nada, e o cartão PLANEJADO
   ⚠️ TAMBÉM FALTAVAM. `.planejado`, `.tarja` e `.descanso` não tinham UMA regra sequer aqui
   — o cartão de um treino ainda por fazer saía com a mesma cara de um treino executado, e a
   tarja ("vencido", "replanejado") saía como texto solto no rodapé do cartão. */
/* ══════════════════ dia sem sessao: a arte no lugar do cartao
   ⚠️ A MESMA ALTURA DO CARTAO (`--h-cartao`). Uma caixa mais baixa aqui faria a coluna do dia
   encolher justamente nos dias vazios, e a faixa da semana pularia de altura conforme o dia
   selecionado — o defeito que o `min-height` de `.cartoes` existe para impedir. */
.dia-bloco .vazio-dia{position:relative;height:var(--h-cartao);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center;padding:12px;background:var(--alta)}
/* ⚠️ UMA IMAGEM POR ESTADO E POR TEMA, escolhida por `[data-theme]` — o mesmo interruptor do
   resto do app. As outras duas artes que o Valmir mandou (`sem_treino_treinador` e
   `descanso_noite_vivo`) estao no servidor: trocar e mudar o nome aqui, sem tocar em JS. */
.dia-bloco .vazio-dia{background-size:cover;background-position:center}
/* ⚠️ A HORA DO TREINO, E NAO O TEMA DO APLICATIVO — corrigido em 30/08, e o erro era meu.
   `descanso_claro` e `descanso_escuro` nao sao a mesma cena em tema claro e escuro: sao a
   MESMA PAISAGEM em horas diferentes do dia. Amarradas ao `data-theme`, quem usasse o app no
   tema claro veria sol num treino perdido as 21h. Quem decide agora e `.noturno`, que
   `ehNoite()` poe olhando a hora marcada contra o por do sol REAL daquele dia.
   O tema continua mandando no resto da tela; nesta arte ele nao tem voz. */
.dia-bloco .e-descanso           {background-image:url(/estado/descanso_claro.webp)}
.dia-bloco .e-descanso.noturno   {background-image:url(/estado/descanso_escuro.webp)}
.dia-bloco .e-sem-treino         {background-image:url(/estado/sem_treino_claro.webp)}
.dia-bloco .e-sem-treino.noturno {background-image:url(/estado/sem_treino_escuro.webp)}
/* No tema claro a arte de descanso e um dia de sol quase branco: o veu escuro de cima
   apagaria o desenho, e o texto precisa do contraste ao contrario. */
[data-theme=claro] .dia-bloco .vazio-dia::after{
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45))}
/* ⚠️ O VEU EXISTE PARA O TEXTO SER LEGIVEL EM QUALQUER DAS SEIS ARTES. A de descanso no tema
   claro e um dia de sol — quase branca —, e a de sem treino e uma academia quase preta: sem
   um veu proprio para cada uma, um dos dois textos sumiria. */
.dia-bloco .vazio-dia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55))}
/* A unica frase que sobra fica no RODAPE, longe do texto que a arte ja desenha no meio. */
.dia-bloco .vazio-dia{justify-content:flex-end;padding-bottom:14px}
.dia-bloco .vazio-dia .sub{position:relative;z-index:1;color:#fff;font-size:11px;
  letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.75)}

.dia-bloco .descanso{height:var(--h-cartao);display:grid;place-items:center;
  border:1px dashed var(--linha);border-radius:6px;color:var(--txt2);
  font-size:var(--t-rotulo);text-transform:uppercase;letter-spacing:.06em;opacity:.5}
.dia-bloco .futuro .descanso{opacity:.45}
.dia-bloco .cartao.planejado{background:transparent;border-style:dashed;
  border-left-style:dashed;border-left-width:3px;position:relative;padding-bottom:26px}
.dia-bloco .cartao.planejado .dur,.dia-bloco .cartao.planejado .nome{opacity:.85}
.dia-bloco .cartao.planejado .tarja{position:absolute;left:0;right:0;bottom:0;padding:4px 12px;
  background:rgba(232,72,40,.16);color:var(--quente);
  font-size:10px;text-transform:uppercase;letter-spacing:.08em;text-align:center;
  border-radius:0 0 4px 4px}
.dia-bloco .cartao.e-cumprido{background:color-mix(in srgb, var(--pronto) 15%, var(--supalta))}
.dia-bloco .cartao.e-parcial{background:color-mix(in srgb, var(--parcial) 13%, var(--supalta))}
.dia-bloco .cartao.e-cumprido:hover{background:color-mix(in srgb, var(--pronto) 23%, var(--supalta))}
.dia-bloco .cartao.e-parcial:hover{background:color-mix(in srgb, var(--parcial) 21%, var(--supalta))}
.dia-bloco .cartao.planejado.e-vencido{background:color-mix(in srgb, var(--recup) 11%, transparent);
  border-color:color-mix(in srgb, var(--recup) 45%, var(--linha))}
.dia-bloco .cartao.planejado.e-vencido:hover{background:color-mix(in srgb, var(--recup) 18%, transparent)}
.dia-bloco .cartao.planejado.e-vencido .tarja{background:color-mix(in srgb, var(--recup) 26%, transparent);
  color:var(--recup)}
.dia-bloco .cartao.e-parcial .esp{color:var(--parcial) !important}
.dia-bloco .cartao.planejado.e-replanejado .tarja{background:color-mix(in srgb, var(--ceu) 22%, transparent);
  color:var(--ceu)}

@media (max-width:600px){
  /* ⚠️ O CARTAO DO CELULAR E O MESMO DO DESKTOP, em coluna: faixa larga em cima, metricas
     embaixo. Ate 28/08 ele virava LINHA aqui (bolinha e data numa coluna estreita a
     esquerda, metricas a direita) — arranjo que fazia sentido quando o topo era so texto,
     e que a faixa do tempo quebrou: ela ficava espremida em 150px, a temperatura em
     `position:absolute` caia em cima do mes, e a arte nao aparecia.
     ⚠️ E cabe com folga: o cartao do celular tem ~360px uteis contra os 151px da coluna do
     desktop. O que era aperto la e sobra aqui — por isso tudo pode crescer. */
  .dia-bloco .topo-dia{padding:12px 14px;gap:10px;flex-direction:column}
  .dia-bloco .topo-dia .data{flex-direction:row;align-items:center;gap:12px;flex:1;min-width:0}
  .dia-bloco .topo-dia .mesdow{align-items:flex-start}
  .dia-bloco .topo-dia .bola{width:52px;height:52px;font-size:24px}
  .dia-bloco .topo-dia .amb{font-size:15px;gap:8px 14px;grid-template-columns:1fr 1fr}
  .dia-bloco .topo-dia .amb .un{display:inline}
  .dia-bloco .topo-dia .amb.tudo img{width:22px;height:22px;border-radius:4px}
  .dia-bloco .topo-dia .amb.tudo span{gap:7px}

  /* A faixa sangra ate as bordas do cartao — no celular o padding e 12/14, nao 6/9. */
  .dia-bloco .faixa-tempo{margin:-12px -14px 4px;padding:12px 14px 26px;border-radius:8px 8px 0 0}
  .dia-bloco .faixa-tempo::after{height:30px}
  .dia-bloco .faixa-tempo .dow{font-size:22px}
  .dia-bloco .faixa-tempo .mes{font-size:14px}
  .dia-bloco .faixa-tempo .mes .ag{font-size:11px}
  .dia-bloco .faixa-tempo .temp-pe{left:14px;bottom:6px;font-size:14px}
  .dia-bloco .faixa-tempo .temp-pe img{width:17px;height:17px}
  .dia-bloco .faixa-tempo .temp-pe .vento-pe{margin-left:14px;gap:4px}
}
[data-theme=claro] .dia-bloco .ident{color:#123}
.dia-bloco .ident .bola{
  width:26px;height:26px;border-radius:50%;background:#fff;color:#101018;
  display:grid;place-items:center;font-size:13px;font-weight:500;flex:none;
  font-family:var(--f-num);align-self:center;
}
.dia-bloco .ident .mes{font-size:12px;line-height:1.2}
.dia-bloco .ident .dow{font-size:var(--t-rotulo);text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-left:auto}
.dia-bloco .dia.hoje .ident{box-shadow:inset 0 0 0 2px var(--acento)}
.dia-bloco .faixa{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha)}
.dia-bloco .faixa.um{grid-template-columns:1fr}
/* O clima em uma linha so. Rotulo escrito ("chuva", "rajada", "por do sol") nao cabe numa
   coluna de 160px sem truncar — e valor truncado nao e valor. Os simbolos carregam o
   significado e o title do elemento traz o texto por extenso. */
.dia-bloco .clima{display:flex;align-items:baseline;gap:10px;padding:4px 8px;background:var(--sup);
  font-family:var(--f-num);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dia-bloco .clima .t{color:var(--txt)}
.dia-bloco .clima .s{color:var(--txt2);font-size:var(--t-mini)}
.dia-bloco .clima .prev{margin-left:auto}
.dia-bloco .clima.vazio{opacity:.45}
.dia-bloco .prev{color:var(--parcial);font-size:9px;text-transform:uppercase;letter-spacing:.05em;margin-left:4px}
.dia-bloco .faixa .cel{background:var(--sup);padding:4px 8px;display:flex;flex-direction:column;gap:0;min-width:0}
/* ⚠️ O `.rot` GENERICO DO PAINEL, trazido por inteiro. A regra de baixo so ajustava tamanho
   e espacamento e vinha em cima de um `.rot{...}` que aqui nao existe — entao o rotulo saia
   com a cor do texto normal, em caixa baixa. Override sem base, de novo. */
.dia-bloco .rot{font-size:var(--t-rotulo);text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt2);line-height:1.1}
.dia-bloco .faixa .cel .rot{font-size:var(--t-mini);letter-spacing:.05em}
.dia-bloco .faixa .cel .v{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.dia-bloco .faixa .cel small{color:var(--parcial);font-size:var(--t-mini);letter-spacing:.04em;text-transform:uppercase}
/* Celula vazia recua: traco nao merece o mesmo peso que numero. */
.dia-bloco .faixa .cel.vazio{opacity:.45}
.dia-bloco .vazio{color:var(--txt2)}

/* cartao de atividade — altura minima 158px, todos iguais */
/* ⚠️ ALTURA FIXA, nao minima (a pedido, 25/08). Com `min-height` cada esporte crescia o
   quanto precisava — caminhada 182, musculacao 198, planejado 171 — e a grade da semana
   ficava com degraus. Cartao e um bloco de leitura comparavel: se o tamanho varia com o
   conteudo, o olho le a ALTURA como informacao, e ela nao e.
   Quem sobra espaco deixa espaco; quem falta, nao existe — o teste de render confere que
   nenhum cartao passa da caixa em nenhuma largura. */
.dia-bloco .cartao{
  height:var(--h-cartao);display:flex;flex-direction:column;gap:5px;
  background:var(--supalta);border:1px solid var(--linha);border-left:3px solid var(--txt2);
  border-radius:6px;padding:10px 12px;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;
}
.dia-bloco .cartao:hover{background:var(--hover)}
.dia-bloco .cartao:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.dia-bloco .cartao[aria-expanded=true]{box-shadow:inset 0 0 0 1px var(--acento)}
/* ⚠️ `--cor-esp` vem inline, amostrada do PNG do esporte — ver COR_ESPORTE no script.
   O fallback existe para o cartao que por algum motivo nao receba a variavel. */
.dia-bloco .cartao{--cor-esp:var(--txt2)}
.dia-bloco .cartao.musculacao,.dia-bloco .cartao.corrida,.dia-bloco .cartao.caminhada{border-left-color:var(--cor-esp)}
.dia-bloco .cartao .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.dia-bloco .cartao .dur{font-size:var(--t-titulo);font-family:var(--f-num);line-height:1}
.dia-bloco .cartao .fc{font-size:12px;font-family:var(--f-num);color:var(--txt2)}
/* ⚠️ O ROTULO NAO USA O NEON PURO. `#0065dc` sobre o cartao escuro e ilegivel, e sobre o
   claro o mesmo tom fica pesado — os dois temas erram, em direcoes opostas. Por isso a cor
   do TEXTO e derivada da mesma variavel: clareada no escuro, escurecida no claro. O friso e
   a barra ficam com o neon puro, que ali e area cheia e nao precisa de contraste de leitura. */
.dia-bloco .cartao .esp{color:color-mix(in srgb, var(--cor-esp) 52%, #fff 48%)}
/* 22% de preto, e nao 12%: medido no pixel pintado, o roxo da esteira dava 4,02 contra o
   fundo do cartao claro — abaixo do minimo de 4,5. Com 22% todos os treze passam. */
[data-theme=claro] .dia-bloco .cartao .esp{color:color-mix(in srgb, var(--cor-esp) 78%, #000 22%)}
.dia-bloco .cartao .esp{font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.06em;line-height:1}
.dia-bloco .cartao .nome{font-size:12px;font-weight:500;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ⚠️ O icone do esporte fica AO LADO do rotulo e do nome, os dois empilhados — e o desenho
   que o Valmir mandou. `min-width:0` na coluna e obrigatorio: sem ele o texto nao encolhe
   e empurra o icone para fora do cartao em vez de cortar. */
.dia-bloco .cartao .ident-esp{display:flex;align-items:center;gap:7px;min-width:0}
.dia-bloco .cartao .ident-esp .col{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.dia-bloco .cartao .ic-esp{flex:none;object-fit:cover;border-radius:50%;width:26px;height:26px}
/* ⚠️ `nowrap` no rotulo do esporte, e a razao e medida: com o icone ao lado sobram ~89px de
   texto na coluna de 151px do desktop. "CAMINHADA" cabe em 62px; "CAMINHADA · DO PLANO"
   pede 125 e quebrava em DUAS linhas. O cartao e flex de ALTURA FIXA — 184px de conteudo
   numa caixa de 174 — e quem era empurrado para fora era a BARRA DE CARGA, no rodape.
   Ninguem veria: a barra nao "corta", ela some.
   As reticencias sao visiveis; a barra sumindo nao era. O texto inteiro fica no `title`. */
/* ⚠️ 28/08, Valmir: esta linha define o TIPO DO EXERCICIO daquele cartao, junto com o icone
   — e SO isso. Antes ela vinha concatenada ("CAMINHADA · DO PLANO") e o efeito era duplo:
   inventava um rotulo que nao existe no plano ("caminhada do Plano") e ainda gastava o
   orcamento das reticencias, entao o proprio tipo sumia. Qualificador nenhum entra aqui;
   nome diferente do tipo vive na LINHA DE BAIXO (`.nome`), que e o lugar dele. O texto
   completo, com os qualificadores, continua no `title`. */
.dia-bloco .cartao .esp{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia-bloco .kpis{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;margin-top:auto;font-size:var(--t-rotulo)}
.dia-bloco .kpis .k{color:var(--txt2)}
.dia-bloco .kpis .v{font-family:var(--f-num);font-variant-numeric:tabular-nums;text-align:right;color:var(--txt)}
.dia-bloco .barra{margin-top:6px;display:flex;align-items:center;gap:6px}
.dia-bloco .barra .trilho{flex:1;height:4px;border-radius:2px;background:var(--linha);overflow:hidden}
.dia-bloco .barra .trilho i{display:block;height:100%}
.dia-bloco .barra .val{font-size:var(--t-mini);color:var(--txt2);font-family:var(--f-num)}
.dia-bloco .selo{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--parcial)}