/* Galiza Fitness: interface "Anilhas" (protótipo v2.1 aprovado no Gate A). Cada macro com a cor de uma anilha.
   Regras do app real: sem style/script inline (CSP); geometria dos gráficos só por atributos SVG. */
@font-face { font-family: "Saira"; src: url("../fontes/saira-anilhas.f30bea5124c6.woff2") format("woff2"); font-weight: 600 800; font-stretch: 70% 80%; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fontes/manrope-anilhas.4c22ee352bcb.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --gelo: #EEF1F5;
  --ferro: #1A1F29;
  --aco: #5F6878;        /* texto secundário: 5,6:1 no branco, 5,0:1 no gelo */
  --borda: #8A94A3;      /* contorno de campo: 3,1:1 no branco */
  --linha: #DCE1E8;      /* divisória decorativa */
  --branco: #FFFFFF;
  --prot: #D62839;       /* anilha vermelha (texto 5,0:1 no branco) */
  --carb: #2457D6;       /* anilha azul (6,2:1) */
  --gord: #E9AE00;       /* anilha amarela: só preenchimento */
  --gord-texto: #8F6A00; /* gordura em texto (5,0:1) */
  --gord-borda: #B88700; /* contorno da anilha amarela (3,2:1) */
  --verde: #1B7A4B;      /* dentro do plano: branco sobre ele 5,3:1 */
  --verde-claro: #E3F3EA;/* fundo; verde sobre ele 4,65:1 */
  --erro: #B42318;
  --placar: "Saira", "Arial Narrow", sans-serif;
  --texto: "Manrope", "Segoe UI", system-ui, sans-serif;
  --raio: 18px;
  --nav: 4.25rem;
}
* { box-sizing: border-box; }
html { scroll-padding-bottom: calc(var(--nav) + 2rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--gelo); color: var(--ferro);
  font: 500 1rem/1.5 var(--texto);
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom) + 1.5rem);
}
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--carb); outline-offset: 2px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Topo e navegação ---------- */
.topo { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem .2rem; }
.marca { display: inline-flex; align-items: center; gap: .5rem; font: 800 1.15rem/1 var(--placar); font-stretch: 75%; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.marca svg { width: 2.1rem; height: 1.3rem; }
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ferro); padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 3.5rem;
  border-radius: 14px; text-decoration: none; color: #C9D0DB; font: 700 .78rem/1 var(--texto);
}
.nav a svg { width: 1.45rem; height: 1.45rem; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav a[aria-current="page"] { background: var(--branco); color: var(--ferro); }

.pagina { max-width: 76rem; margin: 0 auto; padding: .5rem 1rem 1rem; }
.cartao { background: var(--branco); border-radius: var(--raio); padding: 1.1rem; box-shadow: 0 1px 0 var(--linha); }
.cartao + .cartao { margin-top: .75rem; }

/* ---------- Cabeçalho ---------- */
.cab { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .5rem 0 1rem; flex-wrap: wrap; }
.cab .sobre { display: block; font: 700 .8rem/1.2 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .08em; }
.cab h1 { margin: .25rem 0 0; font: 800 clamp(1.9rem, 7.5vw, 2.7rem)/1 var(--placar); font-stretch: 70%; text-transform: uppercase; overflow-wrap: anywhere; }
.setas { display: flex; gap: .4rem; flex: none; }
.seta {
  flex: none; display: grid; place-items: center; min-width: 2.9rem; height: 2.9rem; padding: 0 .7rem; border-radius: 14px;
  background: var(--branco); text-decoration: none; font: 700 1rem/1 var(--texto); box-shadow: 0 1px 0 var(--linha); border: 0; color: var(--ferro); cursor: pointer;
}
.seta[aria-disabled="true"] { color: #8A94A3; }
.data-campo { position: relative; }
.data-campo input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* ---------- Mensagens de estado (salvo, enviando, erro) ---------- */
.aviso { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-radius: 14px; padding: .75rem .9rem; margin: 0 0 .75rem; font-weight: 700; }
.aviso.salvo { background: var(--verde-claro); color: var(--verde); }
.aviso.enviando { background: var(--branco); color: var(--aco); }
.aviso.erro { background: #FDECEA; color: var(--erro); }
.aviso .acao { flex: none; min-height: 2.75rem; padding: 0 1rem; border-radius: 12px; border: 2px solid currentColor; background: transparent; color: inherit; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.aviso[hidden] { display: none; }

/* ---------- Resumo do dia (assinatura: a barra carregada) ---------- */
.resumo .topo-resumo { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.resumo .kcal strong { font: 800 2.8rem/1 var(--placar); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.resumo .kcal span { font: 600 1rem/1.2 var(--texto); color: var(--aco); }
.estado-dia { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 999px; font: 800 .8rem/1 var(--texto); background: var(--gelo); color: var(--ferro); }
.estado-dia.completo { background: var(--verde-claro); color: var(--verde); }
.resumo .situacao { margin: .35rem 0 .2rem; font-weight: 600; }
.resumo .situacao b { font-weight: 800; }
.barbell { display: block; width: 100%; height: auto; max-height: 6.5rem; margin: .4rem 0 .1rem; }
.barbell .eixo { fill: #C3CAD5; }
.barbell .faixa { fill: #8FD1AC; }
.barbell .kcal-feito { fill: var(--ferro); }
.barbell .presilha { fill: var(--ferro); }
.barbell .vazio { fill: var(--branco); stroke-width: 2.5; }
.barbell .p .vazio { stroke: var(--prot); } .barbell .p .cheio { fill: var(--prot); }
.barbell .c .vazio { stroke: var(--carb); } .barbell .c .cheio { fill: var(--carb); }
.barbell .g .vazio { stroke: var(--gord-borda); } .barbell .g .cheio { fill: var(--gord); }
.barbell .acima-marca { fill: var(--ferro); }
.barbell .zero { fill: none; stroke: var(--aco); stroke-width: 2; stroke-dasharray: 5 4; }
.barbell .hachura { stroke: var(--branco); stroke-width: 3; }
.legenda-barra { margin: 0 0 .6rem; font-size: .82rem; color: var(--aco); }
.macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.macro { border-radius: 14px; padding: .55rem .6rem; background: var(--gelo); }
.macro dt { display: flex; align-items: center; gap: .35rem; font: 800 .75rem/1.1 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .03em; }
.macro dt::before { content: ""; flex: none; width: .65rem; height: .65rem; border-radius: 50%; }
.macro.p dt::before { background: var(--prot); } .macro.c dt::before { background: var(--carb); } .macro.g dt::before { background: var(--gord); box-shadow: inset 0 0 0 1.5px var(--gord-borda); }
.macro dd { margin: .3rem 0 0; }
.macro .valor { display: block; font: 800 1.45rem/1 var(--placar); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.macro .valor small { font: 600 .82rem/1 var(--texto); color: var(--aco); }
.macro .nota { display: block; margin-top: .25rem; font: 700 .8rem/1.25 var(--texto); color: var(--aco); }
.macro .nota.dentro { color: var(--verde); } .macro .nota.acima { color: var(--ferro); } .macro .nota.parcial { color: var(--erro); }
.botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.botoes > * { flex: 1 1 11rem; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3.25rem; padding: .6rem 1.2rem;
  border: 0; border-radius: 16px; background: var(--ferro); color: var(--branco); font: 800 1rem/1.15 var(--texto);
  text-decoration: none; text-align: center; cursor: pointer;
}
.botao.claro { background: var(--gelo); color: var(--ferro); }
.botao.verde { background: var(--verde); }
.botao.perigo { background: var(--erro); }
.botao[disabled], .botao[aria-disabled="true"] { background: #C3CAD5; color: #3E4654; cursor: not-allowed; }
.nota-pe { margin: .6rem 0 0; font-size: .85rem; color: var(--aco); }

/* ---------- Refeições ---------- */
.refeicoes { display: grid; gap: .75rem; }
.refeicao header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.refeicao h2 { margin: 0; font: 800 1.35rem/1 var(--placar); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; }
.refeicao .total { font: 700 .9rem/1 var(--texto); color: var(--aco); font-variant-numeric: tabular-nums; }
.itens { list-style: none; margin: .5rem 0 0; padding: 0; }
.itens li + li { border-top: 1px solid var(--linha); }
.itens a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .05rem .75rem; padding: .65rem 0; text-decoration: none; min-height: 3rem; }
.itens .nome { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.itens .fonte { font-size: .85rem; color: var(--aco); }
.itens .marcas { font-size: .8rem; font-weight: 800; color: var(--erro); }
.itens .kcal { grid-row: 1 / span 3; grid-column: 2; align-self: center; text-align: right; font: 800 1.2rem/1 var(--placar); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.itens .kcal small { display: block; font: 600 .75rem/1.2 var(--texto); color: var(--aco); }
.adicionar {
  display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3rem; margin-top: .5rem;
  border: 2px dashed var(--borda); border-radius: 14px; text-decoration: none; font-weight: 800; color: var(--ferro);
}
.vazia { margin: .5rem 0 0; color: var(--aco); }

/* ---------- Lançar alimento ---------- */
.busca { position: relative; }
.busca label { display: block; margin: 0 0 .4rem; font: 800 .8rem/1 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .05em; }
.busca input {
  width: 100%; height: 3.5rem; border: 2px solid var(--borda); border-radius: 16px; background: var(--branco);
  padding: 0 1rem 0 2.9rem; font-weight: 600; font-size: 1.1rem; color: var(--ferro);
}
.busca input:focus { border-color: var(--carb); outline: none; }
.busca svg { position: absolute; left: 1rem; bottom: 1.05rem; width: 1.4rem; height: 1.4rem; stroke: var(--aco); fill: none; stroke-width: 2; }
.dica { margin: .5rem .2rem 1rem; font-size: .88rem; color: var(--aco); }
.grupo-tit { margin: 1rem .2rem .4rem; font: 800 .78rem/1 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .06em; }
.grupo-tit[hidden], .resultados li[hidden] { display: none; }
.resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.resultados button {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; text-align: left; padding: .75rem 1rem;
  border: 2px solid transparent; border-radius: 14px; background: var(--branco); color: var(--ferro); cursor: pointer;
}
.resultados .nome { font-weight: 700; line-height: 1.3; }
.resultados .info { font-size: .85rem; color: var(--aco); }
.resultados .kcal100 { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 800 1.1rem/1 var(--placar); font-stretch: 80%; }
.resultados .kcal100 small { display: block; font: 600 .72rem/1.2 var(--texto); color: var(--aco); }
.sem-resultado { background: var(--branco); border-radius: 14px; padding: 1rem; }
.sem-resultado[hidden] { display: none; }
.sem-resultado p { margin: 0 0 .6rem; }

dialog.painel {
  width: 100%; max-width: 30rem; max-height: calc(100dvh - 1rem); margin: auto auto 0; padding: 0; border: 0;
  border-radius: 24px 24px 0 0; background: var(--branco); color: var(--ferro); overflow: auto; overscroll-behavior: contain;
}
dialog.painel::backdrop { background: rgba(26, 31, 41, .55); }
.painel form { position: relative; padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
.painel h2 { margin: 0 3rem 0 0; font: 800 1.35rem/1.1 var(--placar); font-stretch: 80%; }
.painel .info { margin: .2rem 0 .8rem; font-size: .88rem; color: var(--aco); }
.painel .fechar { position: absolute; top: .7rem; right: .7rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 12px; background: var(--gelo); color: var(--ferro); font-size: 1.1rem; cursor: pointer; }
.painel .aviso-valor { margin: 0 0 .7rem; padding: .55rem .7rem; border-radius: 12px; background: #FFF6DA; color: #5C4400; font-size: .88rem; font-weight: 700; }
.painel .aviso-valor[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .9rem; padding: 0; border: 0; min-width: 0; }
.chips legend { width: 100%; margin-bottom: .45rem; padding: 0; font: 800 .78rem/1 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .05em; }
.chips label { position: relative; }
.chips input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; }
.chips span { display: block; min-height: 2.75rem; padding: .75rem .9rem; border-radius: 999px; background: var(--gelo); font-weight: 800; line-height: 1.1; cursor: pointer; }
.chips input:checked + span { background: var(--ferro); color: var(--branco); }
.chips input:focus-visible + span { outline: 3px solid var(--carb); outline-offset: 2px; }
.outra { display: flex; align-items: center; gap: .4rem; font-weight: 800; }
.outra input { width: 6.5rem; height: 2.75rem; border: 2px solid var(--borda); border-radius: 999px; padding: 0 .9rem; font-weight: 800; color: var(--ferro); }
.outra input:focus { border-color: var(--carb); outline: none; }
.outra input[aria-invalid="true"] { border-color: var(--erro); }
.erro-campo { width: 100%; margin: 0; font-size: .88rem; font-weight: 700; color: var(--erro); }
.erro-campo:empty { display: none; }
.calc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: 0 0 .9rem; }
.calc div { background: var(--gelo); border-radius: 12px; padding: .5rem .55rem; }
.calc dt { font: 800 .72rem/1 var(--texto); color: var(--aco); text-transform: uppercase; }
.calc dd { margin: .3rem 0 0; font: 800 1.2rem/1 var(--placar); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.calc .p dd { color: var(--prot); } .calc .c dd { color: var(--carb); } .calc .g dd { color: var(--gord-texto); }
.quando { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .9rem; }
.campo { display: grid; gap: .35rem; font: 800 .78rem/1.2 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .05em; }
.campo input, .campo select { width: 100%; height: 3rem; border: 2px solid var(--borda); border-radius: 12px; padding: 0 .75rem; background: var(--branco); font-weight: 700; font-size: 1rem; color: var(--ferro); text-transform: none; letter-spacing: 0; }
.campo input:focus, .campo select:focus { border-color: var(--carb); outline: none; }
.campo .ajuda { font: 600 .82rem/1.3 var(--texto); text-transform: none; letter-spacing: 0; }

/* ---------- Treino ---------- */
.sessao-cab { background: var(--ferro); color: var(--branco); }
.sessao-cab .rotina { margin: 0; color: #C9D0DB; font-weight: 600; }
.sessao-cab h2 { margin: .2rem 0 .8rem; font: 800 2.1rem/1 var(--placar); font-stretch: 70%; text-transform: uppercase; }
.placar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.placar div { background: rgba(255, 255, 255, .1); border-radius: 12px; padding: .55rem .65rem; }
.placar dt { font: 700 .74rem/1.2 var(--texto); color: #C9D0DB; text-transform: uppercase; letter-spacing: .04em; }
.placar dd { margin: .3rem 0 0; font: 800 1.55rem/1 var(--placar); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.placar dd small { font: 600 .74rem/1 var(--texto); color: #C9D0DB; }
.sessao-cab .nota-pe { color: #C9D0DB; }
.exercicios { display: grid; gap: .75rem; }
.exercicio header { display: flex; justify-content: space-between; align-items: start; gap: .75rem; }
.exercicio h2 { margin: 0; font: 800 1.3rem/1.05 var(--placar); font-stretch: 80%; }
.exercicio .meta { flex: none; font: 800 .82rem/1 var(--texto); background: var(--gelo); border-radius: 999px; padding: .45rem .65rem; }
.exercicio .antes { margin: .3rem 0 .6rem; font-size: .88rem; color: var(--aco); }
.fichas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.fichas a { display: flex; align-items: baseline; gap: .3rem; min-height: 2.75rem; background: var(--gelo); border-radius: 12px; padding: .6rem .75rem; text-decoration: none; font: 800 1.15rem/1 var(--placar); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.fichas small { font: 700 .76rem/1 var(--texto); color: var(--aco); }
.fichas .recorde a { background: var(--verde-claro); color: var(--verde); }
.fichas .recorde small { color: var(--verde); }
.registrar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.passo { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem; align-items: stretch; background: var(--gelo); border-radius: 14px; }
.passo button { min-height: 3.75rem; border: 0; background: transparent; font: 800 1.5rem/1 var(--texto); color: var(--ferro); cursor: pointer; border-radius: 14px; }
.passo button:focus-visible { outline-offset: -3px; }
.passo label { display: grid; align-content: center; justify-items: center; gap: .15rem; padding: .3rem 0; font: 800 .76rem/1.1 var(--texto); color: var(--aco); text-align: center; }
.passo input { width: 100%; min-height: 2.75rem; border: 0; border-radius: 10px; background: var(--branco); text-align: center; font: 800 1.55rem/1 var(--placar); font-stretch: 80%; font-variant-numeric: tabular-nums; color: var(--ferro); padding: 0; }
.passo input:focus { outline: 3px solid var(--carb); outline-offset: -3px; }
.passo input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--erro); }
.registrar .ajuda { grid-column: 1 / -1; margin: 0; font-size: .85rem; color: var(--aco); }
.registrar .botao, .registrar .erro-campo { grid-column: 1 / -1; }
.exercicio.pendente h2 { color: var(--aco); }

/* ---------- Aderência (tabela) ---------- */
.tabela-rola { overflow-x: auto; position: relative; }
.semana { width: 100%; border-collapse: separate; border-spacing: .3rem; table-layout: fixed; min-width: 19rem; }
.semana caption { text-align: left; padding: 0 .3rem .4rem; font-size: .88rem; color: var(--aco); }
.semana th[scope="col"] { font: 800 .78rem/1.1 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .03em; }
.semana th[scope="col"]:first-child { width: 3.8rem; }
.semana th[scope="row"] { text-align: left; font: 800 1.1rem/1 var(--placar); font-stretch: 75%; text-transform: uppercase; }
.semana th[scope="row"] a { display: block; min-height: 2.75rem; text-decoration: none; }
.semana th[scope="row"] small { display: block; font: 600 .78rem/1.3 var(--texto); color: var(--aco); text-transform: none; }
.semana td { border-radius: 12px; padding: .5rem .2rem; text-align: center; font: 800 1.02rem/1 var(--placar); font-stretch: 75%; font-variant-numeric: tabular-nums; background: var(--branco); }
.semana td .est { display: block; margin-top: .25rem; font: 800 .74rem/1.1 var(--texto); }
.semana td.dentro { background: var(--verde); color: var(--branco); }
.semana td.acima { background: var(--ferro); color: var(--branco); }
.semana td.abaixo { background: var(--branco); box-shadow: inset 0 0 0 2px var(--borda); }
.semana td.cinza { background: transparent; box-shadow: inset 0 0 0 2px var(--linha); color: var(--aco); font: 700 .82rem/1.2 var(--texto); }
.semana td.incompleto { background: transparent; box-shadow: inset 0 0 0 2px var(--erro); color: var(--erro); font: 700 .82rem/1.2 var(--texto); }
.semana tfoot td { background: var(--gelo); }
.semana tfoot td .est { color: var(--aco); font-weight: 700; }
.legenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .8rem .3rem 0; padding: 0; list-style: none; font-size: .88rem; color: var(--aco); }
.legenda li { display: flex; align-items: center; gap: .4rem; }
.legenda i { width: 1.2rem; height: 1.2rem; border-radius: 5px; display: inline-grid; place-items: center; font: 800 .72rem/1 var(--texto); font-style: normal; }
.legenda .dentro { background: var(--verde); color: var(--branco); } .legenda .acima { background: var(--ferro); color: var(--branco); }
.legenda .abaixo { box-shadow: inset 0 0 0 2px var(--borda); } .legenda .incompleto { box-shadow: inset 0 0 0 2px var(--erro); color: var(--erro); }
.legenda .cinza { box-shadow: inset 0 0 0 2px var(--linha); }

/* ---------- Plano ---------- */
.metas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0 0; }
.meta-cx { background: var(--gelo); border-radius: 14px; padding: .7rem .8rem; }
.meta-cx dt { display: flex; align-items: center; gap: .4rem; font: 800 .76rem/1 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .04em; }
.meta-cx dt::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ferro); }
.meta-cx.p dt::before { background: var(--prot); } .meta-cx.c dt::before { background: var(--carb); } .meta-cx.g dt::before { background: var(--gord); box-shadow: inset 0 0 0 1.5px var(--gord-borda); }
.meta-cx dd { margin: .35rem 0 0; }
.meta-cx strong { display: block; font: 800 1.8rem/1 var(--placar); font-stretch: 75%; font-variant-numeric: tabular-nums; }
.meta-cx small { font: 600 .82rem/1.2 var(--texto); color: var(--aco); }
.vigencia { display: inline-block; padding: .35rem .65rem; border-radius: 999px; background: var(--verde-claro); color: var(--verde); font-weight: 800; font-size: .85rem; }
.titulo-sec { margin: 0; font: 800 1.3rem/1 var(--placar); font-stretch: 75%; text-transform: uppercase; }
.versoes { list-style: none; margin: .6rem 0 0; padding: 0; }
.versoes li { border-top: 1px solid var(--linha); }
.versoes summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .75rem 0; min-height: 3rem; cursor: pointer; list-style: none; }
.versoes summary::-webkit-details-marker { display: none; }
.versoes .periodo { font-weight: 800; }
.versoes .obs { font-size: .85rem; color: var(--aco); }
.versoes .num { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 800 1.1rem/1 var(--placar); font-stretch: 80%; }
.versoes details[open] .num::after { content: " ▲"; font-size: .7rem; }
.versoes details:not([open]) .num::after { content: " ▼"; font-size: .7rem; }
.versoes .detalhe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0 0 .8rem; }
.versoes .detalhe div { background: var(--gelo); border-radius: 10px; padding: .45rem .55rem; }
.versoes .detalhe dt { font: 800 .72rem/1 var(--texto); color: var(--aco); text-transform: uppercase; }
.versoes .detalhe dd { margin: .25rem 0 0; font: 800 1.05rem/1 var(--placar); font-stretch: 80%; }
.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.atalho { display: block; padding: .9rem; border-radius: 16px; background: var(--branco); text-decoration: none; box-shadow: 0 1px 0 var(--linha); }
.atalho strong { display: block; font: 800 1.15rem/1.1 var(--placar); font-stretch: 80%; text-transform: uppercase; }
.atalho span { font-size: .85rem; color: var(--aco); }

/* ---------- Conta, entrar, estados ---------- */
.lista-conta { list-style: none; margin: 0; padding: 0; }
.lista-conta li + li { border-top: 1px solid var(--linha); }
.lista-conta a, .lista-conta button { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .5rem 0; border: 0; background: none; text-decoration: none; font-weight: 700; color: var(--ferro); cursor: pointer; text-align: left; }
.lista-conta small { display: block; font-weight: 600; font-size: .85rem; color: var(--aco); }
.perigo-zona { box-shadow: inset 0 0 0 2px #F2C7C3; }
.perigo-zona .lista-conta button { color: var(--erro); }
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.entrada .cartao { width: 100%; max-width: 24rem; padding: 1.5rem; }
.entrada .marca { font-size: 1.4rem; margin-bottom: 1.2rem; }
.entrada h1 { margin: 0 0 .3rem; font: 800 2.2rem/1 var(--placar); font-stretch: 70%; text-transform: uppercase; }
.entrada p { margin: 0 0 1.2rem; color: var(--aco); }
.entrada .campo { margin-bottom: .9rem; }
.entrada .botao { width: 100%; }
.entrada .rodape { margin: 1rem 0 0; font-size: .9rem; text-align: center; }
.galeria { display: grid; gap: .75rem; }
.galeria h2 { margin: 0 0 .2rem; font: 800 1.3rem/1.05 var(--placar); font-stretch: 75%; text-transform: uppercase; }
.galeria .explica { margin: 0 0 .8rem; color: var(--aco); font-size: .9rem; }
.recusa { box-shadow: inset 6px 0 0 var(--erro); }
.recusa ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; }

/* ---------- Computador ---------- */
@media (min-width: 1100px) {
  body { padding-bottom: 2rem; }
  html { scroll-padding-bottom: 2rem; scroll-padding-top: 4.5rem; }
  .nav { position: sticky; top: 0; inset: auto; display: flex; justify-content: center; gap: .25rem; padding: .4rem; }
  .nav a { flex-direction: row; min-height: 2.9rem; padding: 0 1.1rem; gap: .5rem; font-size: .88rem; }
  .nav a svg { width: 1.2rem; height: 1.2rem; }
  .topo { position: absolute; top: .55rem; left: 1.5rem; padding: .4rem 0; z-index: 11; }
  .topo .marca { color: var(--branco); }
  .pagina { padding: 1.25rem 2rem; }
  .duas { display: grid; grid-template-columns: 25rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .duas > .fixo { position: sticky; top: 5rem; }
  dialog.painel { margin: auto; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.macros + .macros { margin-top: .5rem; }
.campo input, .campo select, .macro { min-width: 0; }
.macro dt { overflow-wrap: anywhere; }
@media (max-width: 374px) { .quando { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .macros { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .macro { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .5rem .7rem; }
  .macro dd { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
  .macro .nota { margin: 0; text-align: right; }
}
.galeria > *, .duas > *, .refeicoes > *, .exercicios > * { min-width: 0; }
#enviar { width: 100%; }
/* O resumo é estreito em qualquer tela: macros sempre em linhas. */
.resumo .macros { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.resumo .macro { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .5rem .7rem; }
.resumo .macro dd { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.resumo .macro .nota { margin: 0; text-align: right; }

/* ================= Peças do app (formulários do Django, mensagens, tabelas) ================= */
.pular { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--branco); padding: .6rem 1rem; border-radius: 12px; font-weight: 800; }
.pular:focus { left: .5rem; }
.mensagens { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; }
.mensagens li { border-radius: 14px; padding: .75rem .9rem; background: var(--verde-claro); color: var(--verde); font-weight: 700; }
.mensagens li.error, .mensagens li.erro { background: #FDECEA; color: var(--erro); }
.errorlist { list-style: none; margin: .3rem 0 0; padding: 0; color: var(--erro); font-weight: 700; font-size: .88rem; }
.errorlist.nonfield { margin: 0 0 .8rem; padding: .7rem .9rem; border-radius: 12px; background: #FDECEA; }
.helptext { display: block; margin-top: .25rem; font-size: .85rem; color: var(--aco); font-weight: 600; }

/* Formulário padrão: rótulo em cima, campo largo, alvo de toque grande. */
.formulario { display: grid; gap: .9rem; }
.formulario p, .formulario .linha { margin: 0; display: grid; gap: .35rem; }
.formulario label { font: 800 .8rem/1.2 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .05em; }
.formulario input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .formulario select, .formulario textarea {
  width: 100%; min-height: 3rem; border: 2px solid var(--borda); border-radius: 12px; padding: .55rem .8rem;
  background: var(--branco); color: var(--ferro); font-weight: 700; font-size: 1rem;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--carb); outline: none; }
.formulario input[aria-invalid="true"] { border-color: var(--erro); }
.formulario ul:not(.errorlist) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.formulario ul:not(.errorlist) label { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .6rem .9rem; border-radius: 999px; background: var(--gelo); color: var(--ferro); font: 800 1rem/1.1 var(--texto); text-transform: none; letter-spacing: 0; cursor: pointer; }
.formulario ul:not(.errorlist) input { width: 1.1rem; height: 1.1rem; accent-color: var(--ferro); }
.formulario .botao { justify-self: start; }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 479px) { .duas-colunas { grid-template-columns: minmax(0, 1fr); } }

/* Tabelas de dados (progressão, totais detalhados). */
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: .55rem .4rem; text-align: right; border-bottom: 1px solid var(--linha); }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela thead th { font: 800 .74rem/1.2 var(--texto); color: var(--aco); text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--borda); }
.tabela tbody th { font-weight: 800; }

.texto-longo { max-width: 40rem; }
.texto-longo p { margin: 0 0 .8rem; }
.consentimento-texto { background: var(--gelo); border-radius: 14px; padding: 1rem; white-space: pre-wrap; font-size: .95rem; max-height: 50vh; overflow: auto; }
.vazia-cartao { text-align: center; padding: 1.5rem 1rem; }
.vazia-cartao p { margin: 0 0 1rem; color: var(--aco); }
.subtitulo { margin: 1.5rem 0 .6rem; font: 800 1.3rem/1 var(--placar); font-stretch: 75%; text-transform: uppercase; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li + li { border-top: 1px solid var(--linha); }
.lista-simples a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .5rem 0; text-decoration: none; font-weight: 700; }
.lista-simples small { color: var(--aco); font-weight: 600; }
.em-linha { display: inline; }
.rodape { max-width: 76rem; margin: 1rem auto 0; padding: 0 1rem 1rem; font-size: .85rem; color: var(--aco); }
.rodape a { color: inherit; }
.erro-pagina { max-width: 30rem; margin: 3rem auto; }

/* ================= Diário no app ================= */
.lancamentos { width: 100%; border-collapse: collapse; margin-top: .4rem; font-variant-numeric: tabular-nums; }
.lancamentos tbody tr { border-top: 1px solid var(--linha); }
.lancamentos tbody tr:first-child { border-top: 0; }
.lancamentos th.alimento { text-align: left; font-weight: 500; padding: .55rem 0; }
.lancamentos th.alimento a { display: grid; gap: .1rem; text-decoration: none; min-height: 2.75rem; }
.lancamentos .nome { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lancamentos .fonte { font-size: .85rem; color: var(--aco); }
.lancamentos td { padding: .55rem .35rem; text-align: right; font-size: .9rem; color: var(--aco); white-space: nowrap; }
.lancamentos td.c-kcal { font: 800 1.15rem/1 var(--placar); font-stretch: 80%; color: var(--ferro); }
.lancamentos td.marcado { color: var(--erro); font-weight: 800; }
.lancamentos tfoot th, .lancamentos tfoot td { padding: .55rem .35rem; border-top: 2px solid var(--linha); font-weight: 800; font-size: .85rem; color: var(--aco); text-align: right; white-space: normal; }
.lancamentos tfoot th { text-align: left; }
/* Celular: cada lançamento vira um bloco (alimento + kcal na primeira linha; macros abaixo). */
@media (max-width: 699px) {
  .lancamentos, .lancamentos tbody, .lancamentos tfoot { display: block; }
  .lancamentos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; padding: .3rem 0; }
  .lancamentos th.alimento { grid-column: 1; grid-row: 1 / span 2; padding: .3rem 0; }
  .lancamentos td { padding: 0; text-align: right; }
  .lancamentos td.c-kcal { grid-column: 2; grid-row: 1; align-self: center; }
  .lancamentos td.c-kcal::after { content: " kcal"; font: 600 .72rem/1 var(--texto); color: var(--aco); }
  .lancamentos tbody td:not(.c-kcal) { display: none; }
  .lancamentos tbody td.marcado { display: block; grid-column: 1 / -1; text-align: left; font-size: .8rem; }
  .lancamentos tbody td.marcado.c-protein_g::before { content: "Proteína: "; }
  .lancamentos tbody td.marcado.c-fat_g::before { content: "Gordura: "; }
  .lancamentos tbody td.marcado.c-carb_g::before { content: "Carboidrato: "; }
  .lancamentos tbody td.marcado.c-fiber_g::before { content: "Fibra: "; }
  .lancamentos tbody td.marcado.c-kcal::before { content: "kcal: "; }
  .lancamentos tfoot tr { display: flex; flex-wrap: wrap; gap: .2rem .8rem; border-top: 2px solid var(--linha); padding-top: .5rem; }
  .lancamentos tfoot th, .lancamentos tfoot td { border: 0; padding: 0; text-align: left; }
  .lancamentos tfoot td.c-kcal { font: 800 .9rem/1.3 var(--texto); color: var(--aco); }
  .lancamentos tfoot td.c-kcal::after { content: " kcal"; font: inherit; }
  .lancamentos tfoot td.c-protein_g::before { content: "P "; } .lancamentos tfoot td.c-fat_g::before { content: "G "; }
  .lancamentos tfoot td.c-carb_g::before { content: "C "; } .lancamentos tfoot td.c-fiber_g::before { content: "Fibra "; }
}
@media (min-width: 700px) {
  .lancamentos td.c-protein_g::after, .lancamentos td.c-fat_g::after, .lancamentos td.c-carb_g::after, .lancamentos td.c-fiber_g::after { content: " g"; }
  .lancamentos tbody td:not(.c-kcal) { width: 4.6rem; }
}
.detalhes-dia summary { cursor: pointer; font-weight: 800; min-height: 2.75rem; display: flex; align-items: center; }
.detalhes-dia .tabela td { white-space: normal; }
.selo { display: inline-block; padding: .1rem .45rem; border-radius: 999px; background: var(--gelo); font-size: .75rem; font-weight: 800; color: var(--aco); vertical-align: .1em; }

/* Lançar */
.lancar { scroll-margin-top: 1rem; }
.lancar .busca { margin-top: .75rem; }
.escolha { border: 0; margin: 0; padding: 0; min-width: 0; }
.escolha legend { padding: 0; }
.resultado { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem; padding: .75rem 1rem;
  border: 2px solid var(--linha); border-radius: 14px; background: var(--branco); cursor: pointer; }
.resultado input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.resultado:has(input:checked) { border-color: var(--ferro); }
.resultado:has(input:focus-visible) { outline: 3px solid var(--carb); outline-offset: 2px; }
.resultado .nome { font-weight: 700; line-height: 1.3; }
.resultado .info { font-size: .85rem; color: var(--aco); }
.resultado .kcal100 { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 800 1.1rem/1 var(--placar); font-stretch: 80%; }
.resultado .kcal100 small { display: block; font: 600 .72rem/1.2 var(--texto); color: var(--aco); }
.detalhes-lancar { margin-top: 1rem; }
.detalhes-lancar .campo-q { display: grid; gap: .35rem; }
.detalhes-lancar .campo-q label { margin: 0; }
.detalhes-lancar input[type="number"] { width: 100%; height: 3rem; border: 2px solid var(--borda); border-radius: 12px; padding: 0 .75rem; font-weight: 800; font-size: 1.05rem; color: var(--ferro); }
.detalhes-lancar input[type="number"]:focus { border-color: var(--carb); outline: none; }
.detalhes-lancar input[aria-invalid="true"] { border-color: var(--erro); }
.atalhos-g { margin-top: -.3rem; }
.chip-g { min-height: 2.75rem; padding: .6rem .9rem; border: 0; border-radius: 999px; background: var(--gelo); color: var(--ferro); font-weight: 800; cursor: pointer; }
#enviar { width: 100%; }
.painel-corpo { position: relative; padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
.painel-corpo .detalhes-lancar { margin-top: .4rem; }

/* ================= Aderência, plano, metas no app ================= */
.aderencia td { vertical-align: middle; }
.aderencia td .pct { display: block; font: 800 1.02rem/1 var(--placar); font-stretch: 75%; }
.aderencia td .cons { display: block; order: 2; font: 600 .7rem/1.2 var(--texto); }
.aderencia td { display: table-cell; }
.aderencia td .resto { display: block; font: 700 .72rem/1.2 var(--texto); }
.aderencia td.est-dentro { background: var(--verde); color: var(--branco); }
.aderencia td.est-acima { background: var(--ferro); color: var(--branco); }
.aderencia td.est-abaixo { background: var(--branco); box-shadow: inset 0 0 0 2px var(--borda); }
.aderencia td.est-incompleto { background: transparent; box-shadow: inset 0 0 0 2px var(--erro); color: var(--erro); }
.aderencia td.est-futuro, .aderencia td.est-sem_plano, .aderencia td.est-sem_registro { background: transparent; box-shadow: inset 0 0 0 2px var(--linha); color: var(--aco); font: 700 .8rem/1.2 var(--texto); }
.aderencia td.est-dentro::after { content: "✓ dentro"; } .aderencia td.est-abaixo::after { content: "▼ abaixo"; }
.aderencia td.est-acima::after { content: "▲ acima"; }
.aderencia td::after { display: block; margin-top: .25rem; font: 800 .72rem/1.1 var(--texto); }
.aderencia th[scope="row"] small { display: block; font: 600 .76rem/1.3 var(--texto); color: var(--aco); text-transform: none; }
.aderencia tfoot td { font: 700 .74rem/1.25 var(--texto); }
.versoes .obs { display: block; font-weight: 600; color: var(--aco); }
.versoes th[scope="row"] { font-weight: 700; }
.aviso-energia { margin: .5rem 0 0; padding: .55rem .7rem; border-radius: 12px; background: #FFF6DA; color: #5C4400; font-size: .88rem; font-weight: 700; }
.recusa-linha { margin: .3rem 0; padding: .6rem .8rem; border-radius: 12px; background: #FDECEA; color: var(--erro); font-weight: 700; }
.fixo .atalhos { margin-bottom: .75rem; }

/* ================= Conta, acesso, treino e listas no app ================= */
.acesso { max-width: 26rem; margin: 1.5rem auto; }
.acesso h1 { margin: 0 0 .3rem; font: 800 2.2rem/1 var(--placar); font-stretch: 70%; text-transform: uppercase; }
.acesso .botao { width: 100%; }
.rodape-acesso { margin: 1rem 0 0; text-align: center; font-weight: 700; }
.aceite { display: flex !important; align-items: flex-start; gap: .6rem; text-transform: none !important; letter-spacing: 0 !important; font: 700 1rem/1.4 var(--texto) !important; color: var(--ferro) !important; }
.aceite input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; accent-color: var(--ferro); flex: none; }
.lista-conta form { margin: 0; }
.busca-pagina { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; }
.marcado { color: var(--erro); font-weight: 800; }
.ficha { position: relative; }
.ficha summary { display: flex; align-items: baseline; gap: .3rem; min-height: 2.75rem; background: var(--gelo); border-radius: 12px; padding: .6rem .75rem; cursor: pointer; list-style: none; font: 800 1.15rem/1 var(--placar); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.ficha summary::-webkit-details-marker { display: none; }
.ficha summary small { font: 700 .76rem/1 var(--texto); color: var(--aco); }
.ficha[open] summary { background: var(--ferro); color: var(--branco); }
.ficha[open] summary small { color: #C9D0DB; }
.ficha-edicao { margin-top: .5rem; padding: .75rem; border-radius: 14px; background: var(--gelo); display: grid; gap: .5rem; min-width: min(20rem, 80vw); }
.fichas li:has(.ficha[open]) { flex-basis: 100%; }
.registrar .campo input { min-height: 3rem; }
.largura-toda { grid-column: 1 / -1; }
.acrescentar { margin: .75rem 0; }
.acrescentar summary { display: flex; align-items: center; justify-content: center; min-height: 3rem; border: 2px dashed var(--borda); border-radius: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.acrescentar summary::-webkit-details-marker { display: none; }
.acrescentar[open] summary { margin-bottom: .75rem; }
.dia-rotina .tabela small.obs { display: block; font-weight: 600; color: var(--aco); }
.botao.pequeno { min-height: 2.75rem; padding: .4rem .8rem; font-size: .88rem; }
.dia-rotina > form:last-child { margin-top: .5rem; }
.lancamentos td.marcado.zero { color: var(--aco); font-weight: 700; }
.lista-conta button { flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; }
.lista-conta button small { font-weight: 600; }
.passo label { line-height: 1.15; }

/* Revisão da Fase B: foco visível no seletor de data; marca clara só sobre a barra escura (páginas com navegação). */
.data-campo:focus-within { outline: 3px solid var(--carb); outline-offset: 2px; }
@media (min-width: 1100px) {
  body:not(.com-nav) .topo { position: static; padding: .9rem 2rem .2rem; }
  body:not(.com-nav) .topo .marca { color: var(--ferro); }
}