/* ============================================================
   MuscleGoal — folha de componentes
   Identidade "Preto no branco" (design-system/DESIGN.md).

   Todo valor de cor, tamanho, espaço e medida vem de assets/tokens.css.
   Não escreva cor, raio, sombra nem tamanho direto numa regra daqui.

   Classes de tela são PREFIXADAS (dia-, ref-, red-, pla-, ali-, met-,
   bus-, add-, fal-, txt-). Nome genérico vazando de um contexto para
   outro foi o defeito mais repetido do projeto anterior.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{font-family:var(--f-tela);font-size:var(--t-corpo);line-height:var(--al-corpo);
     color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.r{text-align:right}
[hidden]{display:none !important}
code{font-family:var(--f-num);font-size:var(--t-rotulo);background:var(--superficie-2);padding:0 var(--e1)}

/* Foco: o mesmo contorno em tudo o que recebe teclado. */
:focus-visible{outline:var(--traco-foco) solid var(--foco);outline-offset:2px}

/* Ícones: SVG de src/ui/componentes/icones.js, só traço. */
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--traco-icone);
     stroke-linecap:round;stroke-linejoin:round}
.ico.cheio{fill:currentColor}

/* ============================================================
   Moldura — formato de sistema
   No computador: lateral de ferro fixa (marca, menu, conta) e o
   conteúdo ao lado. No celular a lateral vira o topo e a navegação
   desce para a barra de baixo (ver "Celular").
   ============================================================ */
body:has(> .lateral){display:grid;grid-template-columns:var(--larg-lateral) minmax(0,1fr);align-items:start}
.lateral{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--ferro);color:var(--sobre-ferro);
      display:flex;flex-direction:column;gap:var(--e4);padding:var(--e4) 0}
.lateral :focus-visible{outline-color:var(--sobre-ferro)}
.marca{font-family:var(--f-logo);font-size:var(--t-secao);font-weight:var(--p-marca);
       letter-spacing:var(--et-logo);line-height:1;white-space:nowrap;padding:0 var(--e4)}
/* a palavra da marca: o "o" de Goal é a anilha (componentes/marca.js) */
.marca-nome > span:last-child{display:inline-flex;align-items:flex-end;white-space:nowrap}
.marca-o{width:.6em;height:.6em;flex:none;margin:0 .03em 0 .035em;position:relative;bottom:.185em}
.marca-alvo{fill:var(--meta)}

.menu{display:flex;flex-direction:column}
.menu h2{font-size:var(--t-min);font-weight:var(--p-forte);color:var(--sobre-ferro-2);
     padding:var(--e3) var(--e4) var(--e1)}
.menu a{display:flex;align-items:center;gap:var(--e3);min-height:var(--alt-controle);padding:0 var(--e4);
     color:var(--sobre-ferro);text-decoration:none;font-weight:var(--p-medio);
     border-left:var(--traco-forte) solid transparent;transition:background var(--dur)}
.menu a:hover{background:var(--ferro-2)}
.menu a[aria-current]{background:var(--ferro-2);border-left-color:var(--meta);font-weight:var(--p-negrito)}
.lateral-pe{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--e2);
     padding:var(--e3) var(--e4) 0;border-top:var(--traco-leve) solid var(--ferro-2);
     font-size:var(--t-apoio);color:var(--sobre-ferro-2)}
.lateral-pe .usuario{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lateral-sair{background:none;border:0;color:var(--sobre-ferro);text-decoration:underline;
     min-height:var(--alt-controle-p);font-weight:var(--p-forte)}

.casca{max-width:var(--larg-conteudo);min-width:0;padding:var(--e5) var(--e5) var(--e6)}
/* barra de baixo: só no celular */
.nav{display:none;background:var(--ferro)}
.nav a{flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--alt-linha);
     padding:0 var(--e1);font-size:var(--t-rotulo);font-weight:var(--p-forte);text-decoration:none;
     color:var(--sobre-ferro);border-top:var(--traco-forte) solid transparent;white-space:nowrap}
.nav a.on{background:var(--ferro-2);border-top-color:var(--meta)}

main#app{width:100%}

.tela-cab{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e5);flex-wrap:wrap}
.tela-cab h1{font-family:var(--f-marca);font-size:var(--t-tela);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo)}
.tela-cab .btn{margin-left:auto}

/* ============================================================
   Componentes
   ============================================================ */
/* Bloco: não tem caixa. Abre com um traço forte e um título. */
.cartao{min-width:0}
.cartao > header{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
     border-top:var(--traco-forte) solid var(--tinta);padding:var(--e2) 0}
.cartao > header h2{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo)}
.cartao > header .acoes{margin-left:auto;display:flex;gap:var(--e2);align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
     min-height:var(--alt-controle);padding:0 var(--e4);white-space:nowrap;
     border:var(--traco) solid var(--borda-campo);background:var(--superficie);color:var(--tinta);
     border-radius:var(--raio);font-weight:var(--p-forte);transition:background var(--dur)}
.btn:hover{background:var(--superficie-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primario{background:var(--acao);border-color:var(--acao);color:var(--sobre-acao)}
.btn.primario:hover{background:var(--acao-forte);border-color:var(--acao-forte)}
.btn.perigo{background:var(--erro);border-color:var(--erro);color:var(--sobre-erro)}
.btn.fantasma{border-color:transparent;background:none;color:var(--tinta-2);
     text-decoration:underline;text-underline-offset:3px}
.btn.fantasma:hover{background:var(--superficie-2);color:var(--tinta)}
.btn.perigo-txt{color:var(--erro);border-color:var(--erro)}
.btn.perigo-txt:hover{background:var(--erro-suave)}
.btn.pequeno{min-height:var(--alt-controle-p);padding:0 var(--e3);font-size:var(--t-rotulo)}

/* botão só de ícone */
.ic{width:var(--alt-controle-p);height:var(--alt-controle-p);flex:none;display:grid;place-items:center;
    border:0;background:none;color:var(--tinta-2);border-radius:var(--raio)}
.ic:hover{background:var(--superficie-2);color:var(--tinta)}

.pilula{min-height:var(--alt-controle-p);padding:0 var(--e3);white-space:nowrap;
     border:var(--traco) solid var(--borda-campo);background:var(--superficie);color:var(--tinta);
     border-radius:var(--raio);font-size:var(--t-rotulo);font-weight:var(--p-forte);
     transition:background var(--dur)}
.pilula:hover{background:var(--superficie-2)}
.pilula.on{background:var(--tinta);color:var(--superficie)}

/* abas: a mesma faixa da navegação, em tamanho menor */
.abas{display:flex;border:var(--traco) solid var(--tinta);margin-bottom:var(--e4)}
.aba{flex:1;min-height:var(--alt-controle-p);padding:0 var(--e3);background:none;border:0;
     border-right:var(--traco) solid var(--tinta);font-size:var(--t-rotulo);font-weight:var(--p-forte);
     white-space:nowrap}
.aba:last-child{border-right:0}
.aba:hover{background:var(--superficie-2)}
.aba.on{background:var(--tinta);color:var(--superficie)}
.aba b{font-weight:var(--p-normal);margin-left:var(--e1)}

/* campo de formulário */
.cp{display:flex;flex-direction:column;gap:var(--e1);min-width:0}
.cp > label{font-size:var(--t-rotulo);font-weight:var(--p-forte)}
.cp .opc{color:var(--tinta-2);font-weight:var(--p-normal)}
.cp .ajuda{font-size:var(--t-min);color:var(--tinta-2)}
input,select,textarea{width:100%;min-width:0;min-height:var(--alt-controle);padding:var(--e2) var(--e3);
     border:var(--traco) solid var(--borda-campo);border-radius:var(--raio);background:var(--superficie);
     line-height:1.3}
::placeholder{color:var(--tinta-2);opacity:1}
input:disabled,select:disabled{background:var(--superficie-2);color:var(--tinta-2);cursor:not-allowed}
input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--tinta)}
input[inputmode=decimal]{font-family:var(--f-num);font-variant-numeric:tabular-nums}
/* erro mora no campo: contorno reforçado e a frase logo abaixo */
.cp.erro input,.cp.erro select{border-color:var(--erro);box-shadow:inset 0 0 0 1px var(--erro)}
.msg-erro{font-size:var(--t-apoio);color:var(--erro);font-weight:var(--p-medio)}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
.grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e3)}
.grade4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
.marcar{display:flex;align-items:center;gap:var(--e2);cursor:pointer}

/* estado vazio: caixa com moldura, a frase e a ação */
.vazio-bloco{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e2);
     background:var(--superficie);border:var(--traco) solid var(--tinta);padding:var(--e5);
     color:var(--tinta-2);margin-top:var(--e3)}
.vazio-bloco h3{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo);color:var(--tinta)}
.vazio-bloco a{color:var(--tinta);font-weight:var(--p-forte)}
.vazio-bloco .btn{margin-top:var(--e2)}

/* barra de progresso */
.trilho{height:var(--alt-trilho);background:var(--superficie);box-shadow:inset 0 0 0 var(--traco) var(--tinta);
     overflow:hidden}
.trilho i{display:block;height:100%;background:var(--tinta)}
.trilho.acima i{background:var(--atencao)}
.trilho.fino{height:var(--alt-trilho-fino)}

/* ============================================================
   Diálogo
   ============================================================ */
/* margin:auto é o que centraliza um <dialog> aberto com showModal(), e o
   reset `*{margin:0}` lá de cima a apagaria. */
dialog.modal{border:var(--traco) solid var(--tinta);padding:0;border-radius:var(--raio);
     width:calc(100% - 24px);margin:auto;max-height:calc(100dvh - 24px);
     color:var(--tinta);background:var(--superficie)}
dialog.modal[open]{display:flex;flex-direction:column}
dialog.modal::backdrop{background:var(--veu)}
dialog.modal > header{display:flex;align-items:center;gap:var(--e3);flex:none;
     padding:var(--e3) var(--e4);border-bottom:var(--traco) solid var(--tinta)}
dialog.modal > header h2{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo)}
dialog.modal > header .x{margin-left:auto;width:var(--alt-controle-p);height:var(--alt-controle-p);
     display:grid;place-items:center;flex:none;background:none;border:0;color:var(--tinta)}
dialog.modal > header .x:hover{background:var(--superficie-2)}
dialog.modal > .modal-corpo{padding:var(--e4);overflow-y:auto;flex:1 1 auto;min-height:0}
dialog.modal > footer{display:flex;gap:var(--e2);justify-content:flex-end;align-items:center;flex:none;
     padding:var(--e3) var(--e4);border-top:var(--traco-leve) solid var(--fio-leve)}
dialog.modal > footer:empty{display:none}
.texto-confirma{color:var(--tinta)}
/* todo formulário dentro de diálogo empilha os blocos do mesmo jeito */
.modal-corpo > form,.modal-corpo > .add,form.modal-corpo{display:flex;flex-direction:column;gap:var(--e4)}
.modal-corpo .vazio-bloco{border:0;padding:var(--e4) 0}

/* ============================================================
   Avisos
   ============================================================ */
.toasts{position:fixed;bottom:var(--e4);right:var(--e4);z-index:100;display:flex;
     flex-direction:column;gap:var(--e2);max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:var(--e3);min-width:240px;
     background:var(--tinta);color:var(--fundo);padding:var(--e3) var(--e4);font-size:var(--t-rotulo)}
.toast.saindo{opacity:0;transition:opacity var(--dur)}
.toast .txt{flex:1}
.toast .acao{min-height:var(--alt-controle-p);padding:0 var(--e3);background:none;color:inherit;
     border:var(--traco) solid currentColor;font-size:var(--t-apoio);font-weight:var(--p-forte)}
.toast .x{display:grid;place-items:center;width:var(--alt-controle-p);height:var(--alt-controle-p);
     background:none;border:0;color:inherit}
.toast.erro{background:var(--erro);color:var(--sobre-erro)}
.toast.alerta{background:var(--atencao);color:var(--sobre-erro)}

/* ============================================================
   Entrada
   ============================================================ */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--e5)}
.caixa-login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:var(--e4);
     background:var(--superficie);border:var(--traco) solid var(--tinta);padding:var(--e5)}
.caixa-login h1{font-family:var(--f-logo);font-size:var(--t-tela);font-weight:var(--p-marca);
     letter-spacing:var(--et-logo);line-height:var(--al-titulo)}
.caixa-login .sub{color:var(--tinta-2);margin-top:calc(var(--e3) * -1)}

/* ============================================================
   Diário (dia-)
   ============================================================ */
.dia,.dia-painel,.dia-refeicoes{display:flex;flex-direction:column;gap:var(--e6);min-width:0}
.dia-nav{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.dia-nav > .btn[data-nav="-1"],.dia-nav > .btn[data-nav="1"]{width:var(--alt-controle);padding:0}
.dia-rotulo{display:flex;flex-direction:column;min-width:0;padding:0 var(--e2);margin-right:auto}
.dia-rotulo strong{font-family:var(--f-marca);font-size:var(--t-tela);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo)}
.dia-rotulo span{font-size:var(--t-apoio);color:var(--tinta-2)}
#dia-data{width:auto}
.dia-nav .dia-add{margin-left:auto}

/* resumo, semana e navegação formam um bloco só: ficam mais perto entre si */
.dia-resumo{display:flex;flex-direction:column;gap:var(--e4);margin-top:calc(var(--e5) * -1)}
.dia-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e5);flex-wrap:wrap}
.dia-total{display:flex;flex-direction:column}
/* número principal da tela: fonte de marca, não a de números */
.dia-total b{font-family:var(--f-marca);font-size:var(--t-metrica);font-weight:var(--p-marca);
     letter-spacing:var(--et-metrica);line-height:var(--al-metrica)}
.dia-total span{font-size:var(--t-apoio);color:var(--tinta-2)}
.dia-saldo{display:flex;flex-direction:column;text-align:right}
.dia-saldo b{font-family:var(--f-marca);font-size:var(--t-metrica-2);font-weight:var(--p-marca);
     letter-spacing:var(--et-metrica);line-height:var(--al-metrica);color:var(--ok)}
.dia-saldo span{font-size:var(--t-apoio);color:var(--tinta-2)}
.dia-saldo.acima b{color:var(--atencao)}
.dia-sem-meta{color:var(--tinta);font-weight:var(--p-forte)}
.dia-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.dia-macro-l{display:flex;justify-content:space-between;gap:var(--e2);font-size:var(--t-apoio);
     margin-bottom:var(--e1)}
.dia-macro-l .num{color:var(--tinta-2);white-space:nowrap}
.dia-macro-l b{color:var(--tinta);font-weight:var(--p-forte)}

/* últimos sete dias */
.dia-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--e1);margin-top:calc(var(--e5) * -1);
     padding-top:var(--e4);border-top:var(--traco-leve) solid var(--fio-leve)}
.dia-col{display:flex;flex-direction:column;align-items:center;gap:var(--e1);min-width:0;
     padding:var(--e1) 0 0;background:none;border:0}
.dia-col:hover{background:var(--superficie)}
.dia-col-v{font-size:var(--t-min);color:var(--tinta-2)}
.dia-col-area{position:relative;width:100%;max-width:44px;height:64px;display:flex;align-items:flex-end}
.dia-col-barra{display:block;width:100%;min-height:var(--traco);background:var(--tinta)}
.dia-col-barra.acima{background:var(--atencao)}
.dia-col-barra.vazia{background:var(--fio-leve)}
/* a meta é um traço que atravessa a coluna, não uma segunda barra */
.dia-col-meta{position:absolute;left:calc(var(--e1) * -1);right:calc(var(--e1) * -1);
     border-top:var(--traco) dashed var(--tinta-2)}
.dia-col-d{align-self:stretch;text-align:center;font-size:var(--t-apoio);font-weight:var(--p-forte);
     padding:var(--e1) 0}
.dia-col.on .dia-col-d{background:var(--tinta);color:var(--fundo)}

.dia-sub{font-size:var(--t-apoio);color:var(--tinta-2)}
.dia-item{display:flex;align-items:center;gap:var(--e3);width:100%;min-height:var(--alt-linha);
     text-align:left;background:none;border:0;border-bottom:var(--traco-leve) solid var(--fio-leve);
     padding:var(--e2) 0}
.dia-item:hover{background:var(--superficie)}
.dia-item-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.dia-item-nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--p-medio)}
.dia-item-det{font-size:var(--t-apoio);color:var(--tinta-2)}
.dia-item-kcal{font-size:var(--t-titulo);font-weight:var(--p-forte)}
.dia-acoes{display:flex;gap:var(--e2);flex-wrap:wrap}

.dia-planos{display:flex;flex-direction:column;gap:var(--e2)}
.dia-plano{display:flex;flex-direction:column;text-align:left;background:var(--superficie);
     border:var(--traco) solid var(--borda-campo);padding:var(--e3) var(--e4)}
.dia-plano:hover{background:var(--superficie-2)}
.dia-plano span{font-size:var(--t-apoio);color:var(--tinta-2)}
.dia-editar-nome{font-weight:var(--p-forte)}
.dia-editar-previa{font-family:var(--f-num);font-size:var(--t-rotulo);background:var(--superficie-2);
     padding:var(--e2) var(--e3)}

/* ============================================================
   Busca de alimento (bus-) e adicionar ao diário (add-)
   ============================================================ */
.bus{display:flex;flex-direction:column;gap:var(--e2)}
.bus-lista{display:flex;flex-direction:column;min-height:220px}
.bus-titulo{font-size:var(--t-apoio);font-weight:var(--p-forte);color:var(--tinta-2);padding:var(--e2) 0}
.bus-item{display:flex;align-items:center;gap:var(--e3);min-height:var(--alt-linha-c);text-align:left;
     background:none;border:0;border-bottom:var(--traco-leve) solid var(--fio-leve);padding:var(--e2) 0}
.bus-item:hover{background:var(--superficie-2)}
.bus-nome{flex:1;min-width:0;display:flex;align-items:center;gap:var(--e2)}
.bus-info{font-size:var(--t-apoio);color:var(--tinta-2);white-space:nowrap}
.bus-novo{background:var(--superficie);border:var(--traco) dashed var(--borda-campo);
     padding:var(--e3);margin-top:var(--e3);font-weight:var(--p-medio);text-align:left}
.bus-novo:hover{background:var(--superficie-2)}

.bus-qtd{display:flex;flex-direction:column;gap:var(--e4);min-height:220px}
.bus-voltar{align-self:flex-start}
.bus-escolhido{display:flex;flex-direction:column}
.bus-escolhido strong{font-size:var(--t-titulo);font-weight:var(--p-forte)}
.bus-escolhido span{font-size:var(--t-apoio);color:var(--tinta-2)}
.bus-linha{display:flex;gap:var(--e3);align-items:flex-end}
.bus-linha .cp{flex:1}
.bus-atalhos{display:flex;gap:var(--e2);flex-wrap:wrap}
.bus-previa{display:grid;grid-template-columns:repeat(4,1fr);background:var(--superficie-2);
     padding:var(--e3) var(--e1);text-align:center}
.bus-previa div{display:flex;flex-direction:column}
.bus-previa b{font-size:var(--t-titulo);font-weight:var(--p-forte)}
.bus-previa span{font-size:var(--t-min);color:var(--tinta-2)}

.add .abas{margin-bottom:0}
.add-refs{display:flex;flex-direction:column}
.add-ref{display:flex;align-items:center;gap:var(--e2);min-height:var(--alt-linha);padding:var(--e2) 0;
     border-bottom:var(--traco-leve) solid var(--fio-leve)}
.add-ref-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.add-ref-txt span{font-size:var(--t-apoio);color:var(--tinta-2)}
.add-porcoes{width:64px;text-align:center}
.add-avulso{display:flex;flex-direction:column;gap:var(--e4)}
.add-avulso .btn{align-self:flex-end}
.add-nota{font-size:var(--t-apoio);color:var(--tinta-2)}

/* formulário de alimento */
.fal-ref{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;background:var(--superficie-2);
     padding:var(--e3)}
.fal-ref label{font-size:var(--t-rotulo);font-weight:var(--p-forte)}
.fal-ref input{width:88px;text-align:right}
.fal-dica{flex-basis:100%;font-size:var(--t-min);color:var(--tinta-2)}

/* medidas caseiras e apelidos, no formulário de alimento */
.fal-bloco{display:flex;flex-direction:column;gap:var(--e2);border-top:var(--traco) solid var(--tinta);
     padding-top:var(--e3)}
.fal-titulo{font-size:var(--t-corpo);font-weight:var(--p-forte)}
.fal-titulo span{display:block;font-weight:var(--p-normal);font-size:var(--t-apoio);color:var(--tinta-2)}
.fal-medidas{display:flex;flex-direction:column;gap:var(--e2)}
.fal-medida{display:flex;align-items:center;gap:var(--e2);color:var(--tinta-2);font-size:var(--t-rotulo)}
.fal-medida input[data-campo=nome]{flex:1}
.fal-medida input[data-campo=quantidade]{width:88px;text-align:right}
.fal-medida .fal-un{width:20px}
.fal-vazio{font-size:var(--t-apoio);color:var(--tinta-2)}
#fal-mais{align-self:flex-start}
.fal-apelidos{display:flex;gap:var(--e2);flex-wrap:wrap}
.fal-apelido{display:inline-flex;align-items:center;gap:var(--e1);font-size:var(--t-rotulo);
     box-shadow:inset 0 0 0 var(--traco) var(--tinta);padding:0 0 0 var(--e3)}
.fal-apelido button{display:grid;place-items:center;width:var(--alt-controle-p);height:var(--alt-controle-p);
     border:0;background:none}
.fal-apelido button:hover{background:var(--superficie-2)}

/* ============================================================
   Texto livre (txt-) — entrada, o que foi entendido, pendências
   Âmbar = precisa da pessoa. Contorno preto = já aprendido de uma
   resposta dela (informação, não estado: por isso sem cor).
   ============================================================ */
.txt-entrada{display:flex;gap:var(--e2);padding:var(--e3) 0 0;align-items:flex-end}
.txt-entrada textarea{flex:1;resize:none}

.dia-grupo{display:flex;align-items:center;gap:var(--e2);width:100%;min-height:var(--alt-linha-c);
     text-align:left;background:none;border:0;padding:var(--e3) 0 0;font-weight:var(--p-forte)}
.dia-grupo:hover{background:var(--superficie)}
.dia-grupo span{flex:1;min-width:0}
.dia-grupo small{font-family:var(--f-num);font-weight:var(--p-normal);color:var(--tinta-2);
     font-size:var(--t-min);white-space:nowrap}
.dia-grupo .ico{color:var(--tinta-2)}

.aprox,.memo{display:inline-block;font-style:normal;font-size:var(--t-min);font-weight:var(--p-forte);
     line-height:1.5;padding:0 var(--e2);margin-left:var(--e1);white-space:nowrap}
.aprox{color:var(--atencao);background:var(--atencao-suave)}
.memo{box-shadow:inset 0 0 0 1.5px var(--tinta)}

/* a frase que a pessoa escreveu, repetida acima do que foi entendido */
.txt-bolha{margin-top:var(--e3);padding:var(--e2) var(--e3);background:var(--superficie-2);
     border-left:var(--traco-forte) solid var(--tinta);font-size:var(--t-rotulo)}
.txt-interp{margin:var(--e3) 0;border:var(--traco) solid var(--tinta);background:var(--superficie)}
.txt-interp-cab{padding:var(--e2) var(--e3);border-bottom:var(--traco-leve) solid var(--fio-leve);
     font-size:var(--t-apoio);color:var(--tinta-2)}
.txt-interp-cab b{color:var(--tinta)}
.txt-l{display:grid;grid-template-columns:minmax(0,1fr) 104px 52px var(--alt-controle-p);gap:var(--e2);
     align-items:center;min-height:var(--alt-linha);padding:var(--e2) var(--e2) var(--e2) var(--e3);
     border-bottom:var(--traco-leve) solid var(--fio-leve)}
.txt-l > span{min-width:0}
.txt-l small{display:block;color:var(--tinta-2);font-size:var(--t-apoio)}
.txt-l.pend,.txt-cad{background:var(--atencao-suave);box-shadow:inset var(--traco-forte) 0 0 var(--atencao)}
.txt-trocar{background:none;border:0;padding:0;text-align:left;font-weight:var(--p-medio);
     text-decoration:underline;text-underline-offset:3px}
.txt-q{display:flex;align-items:center;gap:var(--e1)}
.txt-q input{min-height:var(--alt-controle-p);padding:var(--e1) var(--e2);text-align:right}
.txt-q em{font-style:normal;font-size:var(--t-apoio);color:var(--tinta-2);width:16px}
.txt-opcoes{display:flex;gap:var(--e2);flex-wrap:wrap;margin:var(--e2) 0 var(--e1);align-items:center}
.txt-opcoes .pilula{white-space:normal;text-align:left;font-weight:var(--p-medio)}
.txt-parecidos{font-size:var(--t-apoio);color:var(--tinta-2)}
.txt-cad{display:flex;flex-direction:column;gap:var(--e3);padding:var(--e3);
     border-bottom:var(--traco-leve) solid var(--fio-leve)}
.txt-cad-topo{display:flex;align-items:flex-start;gap:var(--e2)}
.txt-cad-topo span{flex:1}
.txt-cad-acoes{display:flex;gap:var(--e2);flex-wrap:wrap}
.txt-cad .fal-ref{background:var(--superficie)}
.txt-cad .fal-ref select{width:auto}
.txt-tot{display:flex;justify-content:space-between;gap:var(--e3);padding:var(--e3);
     border-top:var(--traco) solid var(--tinta);font-weight:var(--p-forte)}
.txt-acoes{display:flex;gap:var(--e2);padding:var(--e3);flex-wrap:wrap;align-items:center}
.txt-dica{font-size:var(--t-apoio);color:var(--tinta-2)}

/* ============================================================
   Refeições (ref-), editor de refeição (red-) e de plano (pla-)
   ============================================================ */
.ref-lista{display:flex;flex-direction:column;border-top:var(--traco-forte) solid var(--tinta)}
.ref-lista > .vazio-bloco{margin-top:var(--e4)}
.ref-cartao{display:flex;align-items:center;gap:var(--e3);width:100%;min-height:var(--alt-linha);
     text-align:left;background:none;border:0;border-bottom:var(--traco-leve) solid var(--fio-leve);
     padding:var(--e3) 0}
.ref-cartao:hover{background:var(--superficie)}
.ref-cartao-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ref-cartao-txt strong{font-size:var(--t-titulo);font-weight:var(--p-forte)}
.ref-cartao-txt span{font-size:var(--t-apoio);color:var(--tinta-2)}
.ref-cartao-kcal{display:flex;flex-direction:column;align-items:flex-end}
.ref-cartao-kcal b{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo)}
.ref-cartao-kcal span{font-size:var(--t-min);color:var(--tinta-2)}

.red-itens,.pla-itens{display:flex;flex-direction:column;border-top:var(--traco) solid var(--tinta)}
.red-item,.pla-item{display:flex;align-items:center;gap:var(--e2);min-height:var(--alt-linha-c);
     padding:var(--e2) 0;border-bottom:var(--traco-leve) solid var(--fio-leve)}
.red-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.red-q{width:88px;text-align:right}
.red-un{width:20px;color:var(--tinta-2);font-size:var(--t-apoio)}
.red-kcal{width:56px;text-align:right;font-weight:var(--p-forte)}
#red-incluir,#pla-incluir{align-self:flex-start}
.red-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);
     background:var(--superficie-2);padding:var(--e3)}
.red-total:empty{display:none}
.red-total span{font-size:var(--t-apoio);color:var(--tinta-2)}
.red-total b{font-size:var(--t-titulo);font-weight:var(--p-forte);white-space:nowrap}

.pla-item{flex-wrap:wrap}
.pla-item select{flex:2 1 170px}
.pla-item select:first-child{flex:1 1 130px}
.pla-item input{flex:0 0 64px;text-align:center}

/* ============================================================
   Alimentos (ali-)
   ============================================================ */
.ali-barra{display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap;margin-bottom:var(--e4)}
#ali-busca{flex:1 1 220px}
.ali-filtros{display:flex;gap:var(--e2);flex-wrap:wrap}
.ali-cab,.ali-linha{display:grid;
     grid-template-columns:var(--alt-controle-p) minmax(0,1fr) 60px 60px 60px 60px;
     align-items:center;gap:var(--e2)}
.ali-cab{min-height:var(--alt-controle);border-bottom:var(--traco) solid var(--tinta);
     font-size:var(--t-apoio);font-weight:var(--p-negrito)}
.ali-linha{min-height:var(--alt-linha);border-bottom:var(--traco-leve) solid var(--fio-leve)}
.ali-linha:hover{background:var(--superficie)}
.ali-fav{display:grid;place-items:center;width:var(--alt-controle-p);height:var(--alt-controle-p);
     background:none;border:0;color:var(--tinta-2)}
.ali-fav.on{color:var(--tinta)}
.ali-nome{display:flex;flex-direction:column;min-width:0;text-align:left;background:none;border:0;
     padding:var(--e2) 0;font-weight:var(--p-medio)}
.ali-nome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ali-nome small{font-size:var(--t-min);font-weight:var(--p-normal);color:var(--tinta-2)}
.ali-kcal{font-weight:var(--p-forte)}
.ali-mais{padding:var(--e3) 0;font-size:var(--t-apoio);color:var(--tinta-2)}
.ali-lista > .vazio-bloco{margin-top:0}

/* ============================================================
   Metas (met-)
   ============================================================ */
.met{display:flex;flex-direction:column;gap:var(--e6)}
.met .tela-cab{margin-bottom:calc(var(--e5) * -1)}
.met-campos{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e3);padding-top:var(--e3)}
.met-conta{margin-top:var(--e3);font-size:var(--t-apoio);color:var(--tinta-2);
     background:var(--superficie-2);padding:var(--e2) var(--e3)}
.met-conta.fora{background:var(--atencao-suave);color:var(--atencao);font-weight:var(--p-medio)}
.met-rodape{display:flex;align-items:center;gap:var(--e3);padding-top:var(--e3)}
.met-rodape span{flex:1;font-size:var(--t-apoio);color:var(--tinta-2)}
.met-linha{display:flex;align-items:center;gap:var(--e3);min-height:var(--alt-linha-c);
     padding:var(--e2) 0;border-bottom:var(--traco-leve) solid var(--fio-leve)}
.met-linha.vigente{font-weight:var(--p-forte)}
.met-desde{flex:1}
.met-desde i{font-style:normal;font-size:var(--t-min);font-weight:var(--p-forte);
     background:var(--tinta);color:var(--fundo);padding:0 var(--e2);margin-left:var(--e2)}
.met-macros{font-size:var(--t-apoio);color:var(--tinta-2)}

/* ============================================================
   Comuns às telas das etapas 2 e 3
   ============================================================ */
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bom{color:var(--ok)}
.atencao{color:var(--atencao)}
.cp.largo{grid-column:1 / -1}
.rolagem{overflow-x:auto}
.lin-vazia{font-size:var(--t-apoio);color:var(--tinta-2);padding:var(--e3) 0 0}
.lin-vazia a,.met-rodape a{color:var(--tinta);font-weight:var(--p-forte)}

/* segundo nível da navegação: as telas da seção, logo abaixo da faixa */
/* as abas de seção só existem no celular; no computador o menu lateral lista tudo */
.abas.sub{display:none;margin-bottom:var(--e5)}
.abas.sub .aba{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--tinta)}
.abas.sub .aba.on{color:var(--superficie)}

/* duas colunas que viram uma */
.lado{display:grid;grid-template-columns:1fr 1fr;gap:var(--e6) var(--e5);align-items:start}

/* linha de números de destaque: sem caixa, separados por fio */
.indices{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--traco-forte) solid var(--tinta);
     border-bottom:var(--traco-leve) solid var(--fio-leve)}
.ind{display:flex;flex-direction:column;min-width:0;padding:var(--e3) var(--e3) var(--e3) 0}
.ind + .ind{padding-left:var(--e3);border-left:var(--traco-leve) solid var(--fio-leve)}
.ind span{font-size:var(--t-apoio);font-weight:var(--p-forte)}
.ind b{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);line-height:var(--al-titulo);white-space:nowrap}
.ind small{font-size:var(--t-min);color:var(--tinta-2)}
.ind small.bom{color:var(--ok);font-weight:var(--p-forte)}

/* conta explicada, linha a linha */
.conta-l{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
     min-height:var(--alt-linha-c);padding:var(--e2) 0;border-bottom:var(--traco-leve) solid var(--fio-leve)}
.conta-l > span:first-child{min-width:0}
.conta-l small{display:block;font-size:var(--t-min);color:var(--tinta-2)}
.conta-l label{font-weight:var(--p-forte)}
.conta-l.total{border-top:var(--traco) solid var(--tinta);font-weight:var(--p-forte)}
.conta-previa{margin-top:var(--e3);padding:var(--e2) var(--e3);background:var(--superficie-2);font-size:var(--t-rotulo)}

/* tabela */
.tb{width:100%;border-collapse:collapse}
.tb th{font-size:var(--t-apoio);font-weight:var(--p-negrito);text-align:left;white-space:nowrap;
     padding:var(--e2) var(--e3);border-bottom:var(--traco) solid var(--tinta)}
.tb th.r,.tb td.r{text-align:right}
.tb th:first-child,.tb td:first-child{padding-left:0}
.tb th:last-child,.tb td:last-child{padding-right:0}
.tb td{height:var(--alt-linha-c);padding:var(--e1) var(--e3);white-space:nowrap;
     border-bottom:var(--traco-leve) solid var(--fio-leve)}
.tb tbody tr:hover{background:var(--superficie)}
.tb .forte{font-weight:var(--p-forte)}
.tb tr.fora td{color:var(--tinta-2)}
.tb tfoot td{border-top:var(--traco) solid var(--tinta);border-bottom:0;font-weight:var(--p-forte)}

/* ============================================================
   Perfil (per-)
   ============================================================ */
.per-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);padding-top:var(--e3)}
.per-previa{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3);margin-top:var(--e4);
     padding:var(--e3);background:var(--superficie-2)}
.per-previa:empty{display:none}
.per-previa div{display:flex;flex-direction:column}
.per-previa span{font-size:var(--t-apoio);color:var(--tinta-2)}
.per-previa b{font-size:var(--t-titulo);font-weight:var(--p-forte)}

/* ============================================================
   Água (agu-)
   ============================================================ */
.agu,.car,.med,.gas,.per,.tre,.pro{display:flex;flex-direction:column;gap:var(--e6)}
.agu .tela-cab,.car .tela-cab,.med .tela-cab,.gas .tela-cab,.per .tela-cab,.tre .tela-cab,.pro .tela-cab{
     margin-bottom:calc(var(--e5) * -1)}
.agu-hoje{display:flex;flex-direction:column;gap:var(--e4)}
/* "faltam" não é estado bom nem ruim: fica na cor do texto */
.dia-saldo.neutro b{color:var(--tinta)}
.agu-rotulo{font-size:var(--t-apoio);font-weight:var(--p-forte);margin-bottom:calc(var(--e2) * -1)}
.agu-recipientes{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center}
.agu-acao{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:center}
.agu-botao{min-height:var(--alt-linha);padding:0 var(--e5);font-size:var(--t-titulo)}
.agu-botao .num{font-weight:var(--p-normal)}
.agu-conta{font-size:var(--t-apoio);color:var(--tinta-2)}
.agu-campo{width:104px;flex:none}
.agu-campo input{text-align:right}
.dia-semana.solta{margin-top:0;border-top:0}
.dia-semana.solta .dia-col{cursor:default}
.dia-col-barra.ok{background:var(--ok)}

/* faixa de água no diário */
.agu-faixa{display:grid;grid-template-columns:auto minmax(80px,1fr) auto auto;gap:var(--e3);align-items:center;
     border-top:var(--traco-forte) solid var(--tinta);padding-top:var(--e3)}
.agu-faixa-txt b{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);margin-right:var(--e2)}
.agu-faixa-txt .num{font-size:var(--t-apoio);color:var(--tinta-2);white-space:nowrap}

/* ============================================================
   Balanço do dia (bal-), no diário
   Sem cor: os quatro componentes do gasto se distinguem por textura.
   ============================================================ */
.dia-extra{display:flex;flex-direction:column;gap:var(--e6)}
.dia-extra:empty{display:none}
.bal-saldo{font-size:var(--t-apoio);color:var(--tinta-2)}
.bal-saldo b{font-family:var(--f-marca);font-size:var(--t-secao);font-weight:var(--p-marca);
     letter-spacing:var(--et-marca);color:var(--tinta);margin-right:var(--e1)}
.bal-saldo.bom b{color:var(--ok)}
.bal-saldo.atencao b{color:var(--atencao)}
.bal-corpo{display:flex;flex-direction:column;gap:var(--e2);padding-top:var(--e2)}
.bal-l{display:grid;grid-template-columns:88px minmax(0,1fr) 64px;gap:var(--e3);align-items:center}
.bal-rot{font-size:var(--t-apoio);font-weight:var(--p-forte)}
.bal-l b{text-align:right;font-weight:var(--p-forte)}
.bal-trilho{display:flex;height:calc(var(--alt-trilho) * 1.5);background:var(--superficie);
     box-shadow:inset 0 0 0 var(--traco) var(--tinta)}
.bal-trilho i{display:block;height:100%;box-shadow:inset 0 0 0 var(--traco) var(--tinta)}
.bal-consumido,.bal-basal{background:var(--tinta)}
.bal-rotina{background:var(--tinta-2)}
.bal-musc{background:repeating-linear-gradient(135deg,var(--tinta) 0 2px,var(--superficie) 2px 6px)}
.bal-cardio{background:var(--superficie)}
.bal-legenda{display:flex;gap:var(--e2) var(--e4);flex-wrap:wrap;font-size:var(--t-apoio);color:var(--tinta-2);
     padding-top:var(--e1)}
.bal-legenda span{display:inline-flex;align-items:center;gap:var(--e2);white-space:nowrap}
.bal-legenda i{width:var(--e4);height:var(--e3);flex:none;box-shadow:inset 0 0 0 var(--traco) var(--tinta)}
.bal-legenda b{color:var(--tinta);font-weight:var(--p-forte)}

/* ============================================================
   Cardio (car-)
   ============================================================ */
.car-frase{padding:var(--e3) 0}
.car-campos{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e3);align-items:start}

/* ============================================================
   Medidas (med-), figura (fig-) e gráfico (graf-)
   ============================================================ */
.med-campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);padding-top:var(--e3)}
.med-series{flex-wrap:wrap;justify-content:flex-end}
#med-comparar{width:auto;min-height:var(--alt-controle-p);padding-top:0;padding-bottom:0;font-size:var(--t-rotulo)}
.fig-par{display:flex;align-items:flex-end;justify-content:center;gap:var(--e2);padding-top:var(--e3)}
.fig-par figure{flex:0 1 120px;min-width:0;text-align:center}
.fig-par figure.principal{flex:0 1 300px}
.fig-par figcaption{font-size:var(--t-min);color:var(--tinta-2);padding-top:var(--e1)}
.fig{display:block;width:100%;height:auto}
.fig-traco{fill:none;stroke:var(--tinta);stroke-width:3;stroke-linejoin:round}
.fig-miolo{fill:var(--superficie)}
.fig.apagada .fig-traco{stroke:var(--tinta-2);stroke-width:2}
.fig.apagada .fig-miolo{fill:var(--superficie-2)}
.fig-marca{stroke:var(--tinta);stroke-width:1.5;stroke-dasharray:3 2}
.fig-guia{stroke:var(--fio-leve);stroke-width:1}
.fig-txt{font-family:var(--f-tela);font-size:15px;fill:var(--tinta-2)}
.fig-txt tspan{font-family:var(--f-num);font-weight:var(--p-forte);fill:var(--tinta)}
.fig-txt.falta tspan{font-weight:var(--p-normal);fill:var(--tinta-2)}

.graf{display:block;width:100%;height:auto;margin-top:var(--e3)}
.graf-grade{stroke:var(--fio-leve);stroke-width:1}
.graf-eixo{font-family:var(--f-num);font-size:var(--t-min);fill:var(--tinta-2)}
.graf-linha{fill:none;stroke:var(--tinta);stroke-width:var(--traco);stroke-linejoin:round}
.graf-ponto{fill:var(--superficie);stroke:var(--tinta);stroke-width:var(--traco)}
.graf-ponto.ultimo{fill:var(--tinta)}
.graf-valor{font-family:var(--f-marca);font-size:var(--t-titulo);font-weight:var(--p-marca);fill:var(--tinta)}

/* ============================================================
   Gasto e déficit (gas-)
   ============================================================ */
.gas .tela-cab .ali-filtros{margin-left:auto}
.gas-leitura{display:flex;flex-direction:column;gap:var(--e3);padding-top:var(--e3)}
.gas-aviso{font-size:var(--t-apoio);color:var(--tinta-2);padding:var(--e3);background:var(--superficie-2)}

/* ============================================================
   Musculação (tre-) e progressão (pro-)
   ============================================================ */
.tre-abas{margin-bottom:0}
.tre-lido{display:block;font-size:var(--t-apoio);color:var(--tinta-2)}
.txt-cad-acoes select{flex:1 1 220px;width:auto}
.tre-ex{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e4) 0;
     border-bottom:var(--traco-leve) solid var(--fio-leve)}
.tre-ex-cab{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap}
.tre-ex-cab strong{font-size:var(--t-titulo);font-weight:var(--p-forte)}
.tre-ex-cab span{flex:1;min-width:0;font-size:var(--t-apoio);color:var(--tinta-2)}
.tre-aviso{font-size:var(--t-apoio);color:var(--tinta-2)}
.tre-aviso .aprox{margin-left:0;margin-right:var(--e1)}
.tre-series{display:grid;grid-template-columns:32px minmax(72px,1fr) 104px 88px var(--alt-controle-p);
     gap:var(--e2);align-items:center;max-width:460px}
.tre-series .cab{font-size:var(--t-min);font-weight:var(--p-forte);color:var(--tinta-2)}
.tre-series .ant{font-size:var(--t-apoio);color:var(--tinta-2)}
.tre-series input{text-align:right;font-family:var(--f-num)}
.tre-ex > .btn{align-self:flex-start}
.tre-fecho{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);padding-top:var(--e4)}
.tre-rodape{grid-column:1 / -1;display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
     border-top:var(--traco) solid var(--tinta);padding-top:var(--e3)}
.tre-rodape span{flex:1;min-width:0;font-family:var(--f-num);font-size:var(--t-rotulo)}
.tre-ficha{cursor:default}
.tre-ficha:hover{background:none}
.tre-tit{white-space:normal !important;min-width:180px}
.tre-acoes{display:flex;gap:var(--e1);justify-content:flex-end;align-items:center}
.tre-grupo .met-linha{min-height:var(--alt-controle)}
#tre-lista-ex{display:flex;flex-direction:column;gap:var(--e5)}
.tre-ficha-itens{display:flex;flex-direction:column}
.tre-ficha-item{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 64px 88px var(--alt-controle-p);
     gap:var(--e2);align-items:end;padding:var(--e2) 0;border-bottom:var(--traco-leve) solid var(--fio-leve)}
.tre-ficha-item .cp span{font-size:var(--t-min);font-weight:var(--p-forte);color:var(--tinta-2)}
.tre-ficha-item .cp .msg-erro{color:var(--erro)}
.tre-ficha-item input{text-align:center;padding-left:var(--e1);padding-right:var(--e1)}
#pro-exercicio{flex:1 1 260px}
.pro-resumo{font-family:var(--f-num) !important;letter-spacing:0 !important}

/* ============================================================
   Placar — os números do dia numa faixa de ferro (diario.js)
   ============================================================ */
.placar{display:grid;grid-template-columns:minmax(280px,1.5fr) repeat(3,minmax(0,1fr));
     background:var(--ferro);color:var(--sobre-ferro)}
.placar > div{padding:var(--e4) var(--e5);min-width:0;border-left:var(--traco-leve) solid var(--ferro-2)}
.placar-principal{display:flex;align-items:center;gap:var(--e4);border-left:0 !important}
.placar-rot{font-size:var(--t-min);font-weight:var(--p-forte);color:var(--sobre-ferro-2)}
.placar-val{font-family:var(--f-marca);font-weight:var(--p-marca);font-size:var(--t-metrica-2);
     letter-spacing:var(--et-marca);line-height:1.05;white-space:nowrap}
.placar-val small{font-size:var(--t-titulo);font-weight:var(--p-negrito);color:var(--sobre-ferro-2)}
.placar-principal .placar-val{font-size:var(--t-metrica);line-height:var(--al-metrica)}
.placar-sub{font-size:var(--t-min);color:var(--sobre-ferro-2)}
.placar-sub a{color:var(--sobre-ferro)}
.placar :focus-visible{outline-color:var(--sobre-ferro)}
/* a anilha: o aro é o progresso do dia, o centro é o alvo */
.placar-anilha{width:104px;height:104px;flex:none}
.placar-anilha .fundo{stroke:var(--ferro-2)}
.placar-anilha .feito{stroke:var(--sobre-ferro)}
.placar-anilha .alvo{fill:var(--meta)}
.placar.acima .placar-anilha .feito,.placar.acima .placar-anilha .alvo{stroke:var(--cor-carbo);fill:var(--cor-carbo)}
.placar.acima .placar-anilha .feito{fill:none}
/* trilho: a parte que falta tem o recartilhado da barra, onde a mão segura */
.placar-trilho{height:var(--alt-trilho-fino);margin-top:var(--e2);position:relative;background:
     repeating-linear-gradient(45deg,transparent 0 3px,var(--sobre-ferro-2) 3px 4px),
     repeating-linear-gradient(-45deg,transparent 0 3px,var(--sobre-ferro-2) 3px 4px)}
.placar-trilho i{position:absolute;inset:0 auto 0 0;background:var(--cor)}
.placar-cel.proteina{--cor:var(--cor-proteina)}
.placar-cel.carbo{--cor:var(--cor-carbo)}
.placar-cel.gordura{--cor:var(--cor-gordura)}

/* ============================================================
   Diário em formato de sistema: refeições em colunas, painel ao lado
   ============================================================ */
.dia{gap:var(--e5)}
.dia-colunas{display:flex;flex-direction:column;gap:var(--e6);min-width:0}
.dia-refeicoes{gap:var(--e4)}
.dia-nav .dia-rotulo strong{font-size:var(--t-tela)}

/* a mesma grade no cabeçalho, na faixa da refeição e em cada item */
.dia-tabela-cab,.dia-momento > header,.dia-item{display:grid;column-gap:var(--e2);align-items:center;
     grid-template-columns:minmax(0,1fr) 84px repeat(3,52px) 60px;padding-inline:var(--e2)}
.dia-tabela-cab{font-size:var(--t-min);font-weight:var(--p-negrito);color:var(--tinta-2);
     padding-block:var(--e1);border-bottom:var(--traco) solid var(--tinta)}
.dia-momento > header{border-top:0;background:var(--superficie-2);min-height:var(--alt-linha-c);
     padding-block:var(--e1);border-left:var(--traco-forte) solid var(--tinta);font-weight:var(--p-negrito)}
.dia-momento > header h2{font-family:var(--f-tela);font-size:var(--t-corpo);font-weight:var(--p-negrito);
     letter-spacing:0;line-height:var(--al-corpo)}
.dia-mom-nome{display:flex;align-items:center;gap:var(--e3);min-width:0;flex-wrap:wrap}
.dia-mom-nome .btn{margin-left:auto;font-weight:var(--p-forte)}
.dia-mom-nome .dia-sub{font-weight:var(--p-normal)}
.dia-item{min-height:var(--alt-linha-c);padding-block:var(--e1)}
.dia-item-det{display:none}
.dia-item-kcal{font-size:var(--t-corpo);font-weight:var(--p-negrito)}
.dia-c-q{color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia-grupo{padding-inline:var(--e2);color:var(--tinta-2);font-weight:var(--p-forte)}
.txt-entrada{padding:var(--e2) 0 0}

/* semana: a coluna de hoje e a linha da meta na cor da meta */
.dia-semana{margin-top:0;padding-top:0;border-top:0}
.dia-col-meta{border-top-color:var(--meta)}
.dia-col.on .dia-col-barra{background:var(--meta)}
.dia-col.on .dia-col-barra.acima{background:var(--atencao)}

/* ============================================================
   A barra carregada (componentes/barra.js)
   ============================================================ */
.barra-caixa{max-width:420px}
.barra-fig{display:block;width:100%;height:auto}
.barra-fig .haste{fill:var(--tinta-2)}
.barra-fig .luva{fill:var(--tinta)}
.barra-fig .anilha{stroke:var(--tinta);stroke-width:1}
.barra-fig .a25,.barra-fig .a2{fill:var(--anilha-25)}
.barra-fig .a20{fill:var(--anilha-20)}
.barra-fig .a15{fill:var(--anilha-15)}
.barra-fig .a10{fill:var(--anilha-10)}
.barra-fig .a5{fill:var(--superficie)}
.barra-fig .a1{fill:var(--fio-leve)}

/* água na cor da água; item do menu sozinho ganha respiro do grupo de cima */
.agu-hoje .trilho i,.agu-faixa .trilho i{background:var(--cor-agua)}
.menu a.solo:not(:first-child){margin-top:var(--e3)}

/* ============================================================
   Profundidade
   Dois níveis, e só eles: a barra e o desenho de dado (linha de
   gráfico, figura) projetam sombra no papel. Nenhum bloco ganha
   caixa nem sombra.
   ============================================================ */
.trilho{box-shadow:inset 0 0 0 var(--traco) var(--tinta),var(--sombra-barra)}
.bal-trilho,.dia-col-barra:not(.vazia){box-shadow:var(--sombra-barra)}
.graf-linha,.graf-ponto,.fig-miolo{filter:var(--sombra-dado)}


/* janela média: o número principal ocupa a linha inteira do placar */
@media (max-width:1100px){
  .placar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .placar-principal{grid-column:1 / -1}
  .placar-cel{border-top:var(--traco-leve) solid var(--ferro-2)}
  .placar-cel.proteina{border-left:0}
}

/* ============================================================
   Celular — a navegação desce para a barra de baixo
   ============================================================ */
@media (max-width:760px){
  .placar > div{padding:var(--e3) var(--e4)}
  .placar-anilha{width:84px;height:84px}
  .placar-cel .placar-val{font-size:var(--t-secao)}
  .placar-cel .placar-val small{display:block;font-size:var(--t-min)}
  .dia-tabela-cab,.dia-momento > header,.dia-item{grid-template-columns:minmax(0,1fr) 60px}
  .dia-c-q,.dia-c-m{display:none}
  .dia-item-det{display:block}
  .dia-item{min-height:var(--alt-linha)}
  .dia-painel{order:-1}
  body:has(> .lateral){display:block}
  .lateral{position:static;height:auto;flex-direction:row;align-items:center;padding:var(--e2) var(--e4)}
  .lateral .marca{padding:0}
  .menu,.lateral-pe .usuario{display:none}
  .lateral-pe{margin:0 0 0 auto;padding:0;border:0}
  .casca{padding:var(--e4) var(--e4) calc(var(--alt-linha) + var(--e6))}
  .abas.sub{display:flex}
  .nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;
       padding-bottom:env(safe-area-inset-bottom)}

  .toasts{left:var(--e3);right:var(--e3);bottom:calc(var(--alt-linha) + var(--e3))}
  dialog .toasts{bottom:var(--e3)}
  .toast{min-width:0}

  .dia-nav .dia-add{flex-basis:100%;margin-left:0}
  .dia-macros{grid-template-columns:1fr}
  .dia-saldo{text-align:left}
  .dia-grupo small{display:none}

  .txt-l{grid-template-columns:minmax(0,1fr) 88px 44px var(--alt-controle-p)}
  .txt-cad .grade4{grid-template-columns:1fr 1fr}
  .grade3{grid-template-columns:1fr 1fr}
  .met-campos{grid-template-columns:1fr 1fr}
  .met-campos .cp:first-child{grid-column:1 / -1}
  .met-rodape{flex-direction:column;align-items:stretch}
  .met-macros{display:none}

  .ali-cab,.ali-linha{grid-template-columns:var(--alt-controle-p) minmax(0,1fr) 48px 44px 44px 44px;gap:var(--e1)}
  /* quatro colunas de número deixam pouco para o nome: ele quebra em
     duas linhas e as medidas caseiras ficam para o diálogo do alimento */
  .ali-nome span{white-space:normal}
  .ali-nome small{display:none}
  .ali-cab span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pla-item select:first-child{flex:1 1 100%}

  /* etapas 2 e 3 */
  .abas.sub{overflow-x:auto}
  .abas.sub .aba{flex:1 0 auto}
  .lado{grid-template-columns:1fr}
  .indices{grid-template-columns:1fr 1fr}
  .ind:nth-child(odd){padding-left:0;border-left:0}
  .ind:nth-child(n+3){border-top:var(--traco-leve) solid var(--fio-leve)}
  .per-campos,.per-previa{grid-template-columns:1fr 1fr}
  .car-campos{grid-template-columns:1fr 1fr}
  .agu-botao{flex:1 1 100%}
  .agu-faixa{grid-template-columns:1fr auto}
  .agu-faixa .trilho{grid-column:1 / -1;grid-row:2}
  .agu-faixa .fantasma{display:none}
  .bal-l{grid-template-columns:72px minmax(0,1fr) 52px;gap:var(--e2)}
  .fig-par figure:not(.principal){flex-basis:96px}
  .tre-series{grid-template-columns:24px minmax(56px,1fr) 88px 64px var(--alt-controle-p);gap:var(--e1)}
  .tre-fecho{grid-template-columns:1fr}
  .tre-ficha-item{grid-template-columns:1fr 1fr 1fr 1fr;row-gap:var(--e1)}
  .tre-ficha-item select{grid-column:1 / -1}
  .tre-ficha-item .ic{grid-column:4;justify-self:end}
  .tre-rodape span,.tre-ex-cab span{flex-basis:100%}
  .tre-ex-cab{position:relative;padding-right:var(--alt-controle-p)}
  .tre-ex-cab .ic{position:absolute;top:0;right:0}
  .tre-abas{overflow-x:auto}
  .tre-abas .aba{flex:1 0 auto}
}

/* ============================================================
   Tela larga — o diário abre em duas colunas: à esquerda as
   refeições; à direita o painel do dia (semana, balanço, água)
   ============================================================ */
@media (min-width:1100px){
  .dia-colunas{display:grid;grid-template-columns:minmax(0,1fr) var(--larg-painel);gap:var(--e6);align-items:start}
}

/* O painel trava quando o fim dele encosta no pé da janela; se couber
   inteiro, trava no topo. --alt-painel vem de diario.js (medirPainel). */
@media (min-width:1100px){
  .dia-painel{position:sticky;
       top:min(var(--e4), calc(100vh - var(--alt-painel, 0px) - var(--e4)))}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}