/* Cores do tema claro (padrão) */
:root {
  --fundo: #F3ECEA;
  --cartao: #FAF5F3;
  --campo: #FFFDFC;
  --borda: #E6D9D5;
  --texto: #3A2A30;
  --texto-suave: #7A6A70;
  --accent: #8C3B5C;
  --accent-escuro: #6E2D48;
  --accent-claro: #F1E1E7;
  --sobre-accent: #FFFFFF;
  --ok: #3F7D5A;
  --ok-claro: #E3EFE7;
  --alerta: #B3402F;
  --alerta-claro: #F6E1DD;
  /* Passou da meta: tom de atenção, não de bronca */
  --atencao: #A86A12;
  --atencao-claro: #F6ECD9;
  --agua: #3B7FC4;
  --agua-claro: #EAF1F9;
  --agua-trilho: #D6E4F3;
  --flutuante: #3A2A30;
  --sobre-flutuante: #FFFFFF;
  --veu: rgba(58, 42, 48, .35);
  --raio: 16px;
  --sombra: 0 1px 2px rgba(58, 42, 48, .06), 0 4px 12px rgba(58, 42, 48, .05);
  --sombra-forte: 0 20px 60px rgba(58, 42, 48, .25);
  color-scheme: light;
}

/* Tema escuro: escolhido no botão do topo, ou automático quando o aparelho está escuro */
:root[data-tema="escuro"] {
  --fundo: #1A1416;
  --cartao: #241B1F;
  --campo: #1E171A;
  --borda: #3B2E33;
  --texto: #F2E8EB;
  --texto-suave: #B5A3AA;
  --accent: #C96A90;
  --accent-escuro: #D883A6;
  --accent-claro: #3A2430;
  --sobre-accent: #FFFFFF;
  --ok: #6DBA8B;
  --ok-claro: #1E3127;
  --alerta: #E8735F;
  --alerta-claro: #3C2320;
  --atencao: #E3B061;
  --atencao-claro: #3A2E1A;
  --agua: #6AA6E6;
  --agua-claro: #1B2632;
  --agua-trilho: #2A3A4D;
  --flutuante: #F2E8EB;
  --sobre-flutuante: #1A1416;
  --veu: rgba(0, 0, 0, .55);
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
  --sombra-forte: 0 20px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #1A1416;
    --cartao: #241B1F;
    --campo: #1E171A;
    --borda: #3B2E33;
    --texto: #F2E8EB;
    --texto-suave: #B5A3AA;
    --accent: #C96A90;
    --accent-escuro: #D883A6;
    --accent-claro: #3A2430;
    --sobre-accent: #FFFFFF;
    --ok: #6DBA8B;
    --ok-claro: #1E3127;
    --alerta: #E8735F;
    --alerta-claro: #3C2320;
  --atencao: #E3B061;
  --atencao-claro: #3A2E1A;
    --agua: #6AA6E6;
    --agua-claro: #1B2632;
    --agua-trilho: #2A3A4D;
    --flutuante: #F2E8EB;
    --sobre-flutuante: #1A1416;
    --veu: rgba(0, 0, 0, .55);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25);
    --sombra-forte: 0 20px 60px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 'Public Sans', system-ui, sans-serif;
}

h1, h2, h3 { font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif; margin: 0; }

[hidden] { display: none !important; }

.faixa-homologacao {
  position: sticky; top: 0; z-index: 100;
  background: #E8A33D; color: #3A2A30;
  font-weight: 600; font-size: .9rem; text-align: center;
  padding: 6px 16px;
}

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 24px;
}

/* ---------- Login ---------- */
.centro { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cartao-login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.cartao-login h1 { color: var(--accent); font-size: 1.6rem; }
/* Campo de senha com o olhinho dentro, à direita */
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 48px; }
.btn-olho {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 1.15rem; border-radius: 8px;
}
.btn-olho:hover { background: var(--accent-claro); }
.sub { margin: -10px 0 4px; color: var(--texto-suave); }

label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 500; }

input {
  font: inherit;
  /* 16px sempre: com menos, o iPhone dá zoom sozinho ao tocar no campo e a página fica maior que a tela
     (os campos dentro de <label> herdavam .9rem = 14,4px) */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--campo);
  color: var(--texto);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.erro { color: var(--alerta); font-size: .9rem; margin: 0; min-height: 1.2em; }
.erro.info { color: var(--ok); }

.btn-primario {
  font: inherit; font-weight: 600;
  background: var(--accent); color: var(--sobre-accent);
  border: 0; border-radius: 10px;
  padding: 11px 16px; cursor: pointer;
}
.btn-primario:hover { background: var(--accent-escuro); }
.btn-primario:disabled { opacity: .6; cursor: wait; }

.btn-link {
  font: inherit; font-size: .9rem;
  background: none; border: 0; padding: 4px;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}

/* ---------- Painel ---------- */
.topo {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px);
}
.topo h1 { color: var(--accent); font-size: 1.4rem; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.btn-menu, .so-menu { display: none; }
.btn-tema .icone-tema { display: inline-block; }
.btn-tema {
  font: inherit; font-size: 1.05rem; line-height: 1; width: 34px; height: 34px; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao); color: var(--accent);
}
.btn-tema:hover { border-color: var(--accent); }
.selo {
  background: var(--accent-claro); color: var(--accent);
  border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: .8rem;
}

/* Usa a largura toda da tela */
.conteudo { padding: 0 clamp(16px, 3vw, 40px) 40px; }
/* iPhone com o app ocupando a tela toda (viewport-fit=cover): o conteúdo não fica embaixo do relógio
   nem do recorte da câmera (deitado). Onde não há recorte, env() vale 0 e nada muda. */
body { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* ---------- Somente leitura: some tudo que edita ---------- */
.somente-leitura [data-editar] { display: none !important; }

/* ---------- Controles do topo ---------- */
h2 { font-size: 1.1rem; margin-bottom: 12px; }
.conteudo > * + * { margin-top: 16px; }
.conteudo > .data-extenso { margin-top: 6px; }

.controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acoes-topo { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cartões organizáveis ---------- */
/* Grade de 6 partes: cartões 'coluna' ficam 3 por linha (computador) ou 2 (tela média);
   o organizar.js calcula quanto cada um ocupa (--larg-3 / --larg-2) para não sobrar buraco.
   Cartões na mesma linha ficam com a mesma altura (a do mais alto). */
.cartoes { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; }
.bloco { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; }
.bloco > .cartao { flex: 1; }
@media (min-width: 1100px) { .bloco { grid-column: var(--col-3, 1 / -1); grid-row: var(--lin-3, auto); } }
@media (min-width: 761px) and (max-width: 1099px) { .bloco { grid-column: var(--col-2, 1 / -1); grid-row: var(--lin-2, auto); } }
@media (max-width: 760px) { .cartoes { grid-template-columns: 1fr; } }

.barra-organizacao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--accent-claro); border: 1px dashed var(--accent);
  border-radius: var(--raio); padding: 12px 16px;
}
.barra-organizacao p { margin: 0; flex: 1 1 280px; font-size: .9rem; }
.barra-organizacao .acoes { align-items: center; }

.barra-cartao { display: none; }
.organizando .barra-cartao {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.barra-cartao .nome-cartao { font-weight: 600; color: var(--accent); margin-right: auto; }
.barra-cartao .btn-icone { width: 34px; height: 34px; font-size: 1.1rem; }
.barra-cartao .btn-icone:disabled { opacity: .35; cursor: default; }
.alca {
  font-size: 1.4rem; line-height: 1; color: var(--accent);
  padding: 6px 8px; border-radius: 8px; cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.alca:hover { background: var(--accent-claro); }
.organizando .bloco.arrastando { opacity: .55; outline-color: var(--accent); }
.organizando .bloco.arrastando .alca { cursor: grabbing; }
.organizando .bloco {
  outline: 2px dashed var(--borda); outline-offset: 6px; border-radius: var(--raio);
}
/* Enquanto organiza, o conteúdo dos cartões não responde a cliques */
.organizando .bloco > :not(.barra-cartao) { pointer-events: none; }
.organizando .bloco.oculto > :not(.barra-cartao) { opacity: .35; }

.segmentado {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px;
}
.segmentado button {
  font: inherit; font-weight: 600; border: 0; background: none; color: var(--texto-suave);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.segmentado button[aria-pressed="true"] { background: var(--accent); color: var(--sobre-accent); }

.bloco-data { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.seletor-data { display: flex; align-items: center; gap: 6px; }
/* Botão do dia: o campo de data fica por cima, invisível, e abre o calendário ao tocar */
.data-principal {
  position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-weight: 600;
}
.data-principal:hover { border-color: var(--accent); }
.data-principal .icone-aba { width: 18px; height: 18px; color: var(--accent); }
.data-principal #data-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-principal input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.periodo-campos { display: flex; flex-wrap: wrap; gap: 8px 12px; width: 100%; }
.periodo-campos[hidden] { display: none; }
.periodo-campos input { padding: 8px 10px; }
.btn-icone {
  font: inherit; font-size: 1.3rem; line-height: 1; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao);
  color: var(--accent); cursor: pointer;
}
.btn-secundario {
  font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer;
  background: var(--accent-claro); color: var(--accent); border: 1px solid transparent;
}
.btn-secundario:hover, .btn-icone:hover { border-color: var(--accent); }
.data-extenso { color: var(--texto-suave); margin: 0; }
.data-extenso::first-letter { text-transform: uppercase; }

.chip {
  font: inherit; font-size: .9rem; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--fundo); color: var(--texto); border: 1px solid var(--borda);
}
.chip:hover:not(:disabled) { border-color: var(--accent); }
.chip.ativo { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }
.chip:disabled { cursor: default; }

/* ---------- Barras de progresso ---------- */
.barra { height: 10px; background: var(--accent-claro); border-radius: 999px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.barra span.alerta { background: var(--alerta); }
.barra span.atencao { background: var(--atencao); }

.status { font-size: .8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.status.ok { background: var(--ok-claro); color: var(--ok); }
.status.alerta { background: var(--alerta-claro); color: var(--alerta); }
.status.atencao { background: var(--atencao-claro); color: var(--atencao); }
.status.neutro { background: var(--fundo); color: var(--texto-suave); }

.resto { font-size: .85rem; color: var(--texto-suave); margin: 8px 0 0; display: block; }
.resto.alerta { color: var(--alerta); }
.resto.atencao { color: var(--atencao); }
.dica { font-size: .85rem; color: var(--texto-suave); margin: -6px 0 12px; }

/* ---------- Calorias ---------- */
.cal-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-topo h2 { margin: 0; }
.cal-numero { margin: 8px 0 12px; font-family: 'Bricolage Grotesque', sans-serif; color: var(--texto-suave); }
.cal-numero strong { font-size: clamp(2.4rem, 7vw, 3.4rem); color: var(--texto); line-height: 1; }
.cal-numero span { font-size: 1.2rem; }
.card-calorias .barra { height: 14px; }

/* ---------- Resumo do dia: anel central ---------- */
.resumo-anel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px 24px; align-items: center; margin-top: 8px;
}
.resumo-anel .lado { display: grid; gap: 12px; }
.resumo-anel .anel-centro { display: flex; flex-direction: column; align-items: center; }
.resumo-anel .anel-centro .resto { margin-top: 4px; text-align: center; }
.macro { padding: 14px 16px; border-radius: 12px; background: var(--fundo); }
.macro .rotulo { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.macro .valor { margin: 2px 0 8px; color: var(--texto-suave); }
.macro .valor strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; color: var(--texto); }
.macro .resto { margin-top: 6px; }

.anel { width: clamp(180px, 18vw, 230px); height: clamp(180px, 18vw, 230px); display: block; flex-shrink: 0; }
.anel circle { fill: none; transform: rotate(-90deg); transform-origin: 100px 100px; }
.anel .trilho { stroke: var(--accent-claro); }
.anel .arco-kcal { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .4s; }
.anel .arco-kcal.alerta { stroke: var(--alerta); }
.anel .arco-kcal.atencao { stroke: var(--atencao); }
.anel .arco-agua { stroke: var(--agua); stroke-linecap: round; transition: stroke-dasharray .4s; }
.anel .trilho-agua { stroke: var(--agua-trilho); }
.anel-numero { font: 700 2.6rem 'Bricolage Grotesque', sans-serif; fill: var(--texto); text-anchor: middle; }
.anel-meta { font-size: .8rem; fill: var(--texto-suave); text-anchor: middle; }
/* Arco vazio (0%) não deve mostrar a bolinha da ponta arredondada */
.anel circle[stroke-dasharray^="0 "] { stroke-linecap: butt; }
.legenda-anel { justify-content: center; margin-top: 6px; }
.leg-kcal, .leg-agua { width: 10px; height: 10px; border-radius: 50%; }
.leg-kcal { background: var(--accent); }
.leg-kcal.alerta { background: var(--alerta); }
.leg-kcal.atencao { background: var(--atencao); }
.leg-agua { background: var(--agua); }

@media (max-width: 760px) {
  .resumo-anel { grid-template-columns: 1fr 1fr; }
  .resumo-anel .anel-centro { grid-column: 1 / -1; order: -1; }
  .resumo-anel .lado { gap: 8px; }
  .macro { padding: 10px 12px; }
  .macro .valor strong { font-size: 1.25rem; }
}

/* ---------- Macros ---------- */
.grade-macros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.card-macro { padding: 16px; display: flex; flex-direction: column; }
.card-macro .rotulo, .indicador .rotulo { font-size: .85rem; font-weight: 600; color: var(--texto-suave); }
.card-macro .valor, .indicador .valor { margin: 4px 0 10px; color: var(--texto-suave); }
.card-macro .valor strong, .indicador .valor strong {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.6rem; color: var(--texto);
}
.editavel {
  font: 700 1.6rem 'Bricolage Grotesque', sans-serif; color: var(--texto);
  background: none; border: 0; border-bottom: 2px dashed var(--accent);
  padding: 0; cursor: text;
}
.editavel:hover { color: var(--accent); }
.input-no-lugar { width: 110px; font-size: 1.2rem; padding: 4px 8px; }
.editavel-grande { font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1.1; }

/* ---------- Água (cartão próprio) ---------- */
.agua-valor { margin: 10px 0 8px; color: var(--texto-suave); }
.agua-valor strong, .agua-valor .editavel { font: 700 1.8rem 'Bricolage Grotesque', sans-serif; color: var(--texto); }
.barra-agua { background: var(--agua-trilho); }
.barra-agua span { background: var(--agua); }
.agua-botoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.chip-agua {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 6px; border-radius: 12px; font-weight: 700; font-size: 1.05rem;
  background: var(--agua-claro); border-color: var(--agua-trilho); color: var(--texto);
}
.chip-agua small { font-weight: 400; font-size: .75rem; color: var(--texto-suave); }
.chip-agua:hover:not(:disabled) { border-color: var(--agua); }
.chip-agua:active:not(:disabled) { background: var(--agua); color: #fff; }
.chip-agua:active:not(:disabled) small { color: inherit; }
.agua-outra { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.agua-outra input { flex: 1; min-width: 0; }
.dica-agua { margin: 14px 0 0; }

/* ---------- Peso ---------- */
.peso-valor { margin: 10px 0 2px; color: var(--texto-suave); }
.peso-valor strong { font: 700 1.8rem 'Bricolage Grotesque', sans-serif; color: var(--texto); }
.peso-variacao { margin: 0 0 6px; }
/* Recado depois da pesagem: caixinha suave, com a borda na cor do app */
.recado-peso {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; line-height: 1.45;
  background: linear-gradient(135deg, var(--accent-claro), color-mix(in srgb, var(--accent-claro) 40%, var(--cartao)));
  border-left: 4px solid var(--accent); color: var(--texto); font-size: .92rem;
}
.btn-objetivo {
  display: block; width: 100%; margin: 10px 0 4px; padding: 10px 12px; cursor: pointer; text-align: left;
  font: inherit; font-weight: 600; color: var(--accent); background: none;
  border: 1px dashed var(--accent); border-radius: 12px;
}
.btn-objetivo:hover { background: var(--accent-claro); }
.objetivo-peso { margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borda); background: var(--fundo); }
.objetivo-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.objetivo-topo .btn-link { padding: 0; font-size: .85rem; }
.barra-objetivo span { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, var(--cartao)), var(--accent)); }
.objetivo-texto { margin: 8px 0 0; font-size: .9rem; color: var(--texto-suave); }
.objetivo-texto strong { color: var(--texto); }
.objetivo-form { margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent); display: grid; gap: 8px; }
.objetivo-form label { display: grid; gap: 6px; font-weight: 600; }
.objetivo-form .dica { margin: 0; font-size: .82rem; }
.objetivo-form .acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.grafico-peso { position: relative; margin: 10px 0 4px; }
.grafico-peso svg { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.grafico-peso .grade { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 3 4; }
.grafico-peso .eixo { fill: var(--texto-suave); font-size: 11px; font-family: inherit; }
.grafico-peso .area-topo { stop-color: var(--accent); stop-opacity: .22; }
.grafico-peso .area-base { stop-color: var(--accent); stop-opacity: 0; }
.grafico-peso .linha { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico-peso .guia { stroke: var(--texto-suave); stroke-width: 1; stroke-dasharray: 2 3; }
/* Pontos com anel da cor do cartão, para se destacarem da linha */
.grafico-peso .ponto { fill: var(--accent); stroke: var(--cartao); stroke-width: 2; transition: r .15s; }
.grafico-peso .ponto.ultimo, .grafico-peso .ponto.ativo { r: 6; }
.grafico-peso .rotulo-ultimo { fill: var(--texto); font-size: 13px; font-weight: 700; font-family: inherit; }
.dica-ponto {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 10px;
  background: var(--texto); color: var(--fundo); font-size: .8rem; box-shadow: var(--sombra);
}
.dica-ponto[hidden] { display: none; }
.dica-ponto span { opacity: .8; font-size: .72rem; }
/* No computador, o cartão não estica a tela toda (o gráfico ficaria achatado) */
.aba-evolucao { max-width: 760px; }
.peso-form { margin-top: 12px; }
.peso-titulo { margin: 0 0 6px; font-weight: 600; }
.peso-entrada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.peso-kg, .peso-data { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.peso-kg input { width: 100px; min-width: 0; }
.peso-data input { width: auto; min-width: 0; }
.peso-form .dica { margin: 6px 0 0; font-size: .82rem; }
.peso-lembrete { margin: 12px 0 0; font-size: .82rem; }

/* ---------- Duas colunas ---------- */

/* ---------- Calculadora ---------- */
.calc-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.autocompletar { position: relative; flex: 1 1 140px; }
.autocompletar input { width: 100%; }
.sugestoes {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto;
  background: var(--campo); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra);
}
.sugestoes li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sugestoes li small { color: var(--texto-suave); white-space: nowrap; }
.sugestoes li.destaque, .sugestoes li[data-acao]:hover { background: var(--accent-claro); }
.sugestoes .sem-resultado { color: var(--texto-suave); cursor: default; font-size: .9rem; }
.campo-gramas { flex-direction: row; align-items: center; gap: 6px; }
.campo-gramas input { width: 90px; }


.manual { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 12px; }
/* Alimentos e bebidas: busca grande (passo 1) e caixa do item escolhido (passo 2) */
.dica-busca { margin: 6px 0 10px; }
.busca-grande { display: block; }
.busca-grande .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 1rem; }
.busca-grande input { padding: 14px 14px 14px 42px; font-size: 1.05rem; border: 2px solid var(--accent); }
.escolhido { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent-claro); }
.escolhido .pergunta { margin: 0 0 8px; font-weight: 600; }
.escolhido .calc-linha + .chips { margin-top: 10px; }
.previa { margin: 12px 0 0; color: var(--texto); font-weight: 400; min-height: 0; }
.previa:empty { display: none; }
.previa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.previa-qtd { color: var(--texto-suave); font-size: .9rem; }
.previa-kcal { color: var(--texto-suave); }
.previa-kcal strong { font: 700 1.6rem 'Bricolage Grotesque', sans-serif; color: var(--accent); }
.previa-macros { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.previa-macros li { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 8px; background: var(--fundo); font-size: .8rem; color: var(--texto-suave); }
.previa-macros li strong { font-size: .95rem; color: var(--texto); }
.btn-adicionar { width: 100%; margin-top: 12px; }
.escolhido-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.escolhido-topo .pergunta { margin: 0; }
.btn-so-consultar { display: block; margin: 8px auto 0; }
.btn-so-consultar[hidden] { display: none; }
.escolhido .campo-gramas { display: flex; width: 100%; }
.escolhido .campo-gramas select { flex: 1; }
.adocou { margin-top: 12px; }
.adocou .pergunta { margin: 0 0 6px; }
.adocou .dica { margin: 8px 0 0; font-size: .82rem; }
.contador-acucar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.contador-acucar .btn-icone { width: 40px; height: 40px; font-size: 1.3rem; }
.contador-acucar .btn-icone:disabled { opacity: .4; cursor: default; }
.contador-valor { min-width: 7.5em; text-align: center; font-weight: 600; }
.contador-kcal { margin-left: auto; color: var(--texto-suave); font-size: .9rem; white-space: nowrap; }
.previa-acucar { margin: 6px 0 0; font-size: .88rem; color: var(--texto-suave); }
/* Tabela nutricional do alimento escolhido (consultar e comparar), com cara de rótulo */
.tabela-nutri { color: var(--texto); font-weight: 400; margin-top: 10px; border: 2px solid var(--texto); border-radius: 10px; padding: 8px 10px; background: var(--cartao); }
.tabela-nutri-titulo { margin: 0 0 4px; font-weight: 800; font-size: .95rem; padding-bottom: 4px; border-bottom: 4px solid var(--texto); }
.tabela-nutri table { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.tabela-nutri th, .tabela-nutri td { padding: 5px 4px; border-bottom: 1px solid var(--borda); text-align: right; vertical-align: bottom; }
.tabela-nutri thead th { font-weight: 700; font-size: .8rem; overflow-wrap: anywhere; }
.tabela-nutri thead th small { display: block; font-weight: 400; color: var(--texto-suave); }
.tabela-nutri tbody th { text-align: left; font-weight: 600; }
.tabela-nutri tr.sub th { font-weight: 400; padding-left: 12px; color: var(--texto-suave); }
.tabela-nutri tbody tr:last-child th, .tabela-nutri tbody tr:last-child td { border-bottom: 0; }
.tabela-nutri .destaque { color: var(--accent); font-weight: 700; }
.tabela-nutri-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.tabela-nutri-rodape small { color: var(--texto-suave); }
.tabela-nutri .dica { margin: 4px 0 0; font-size: .8rem; }
/* Cadastro com cara de rótulo: nome à esquerda, número + unidade à direita */
.tabela-cadastro { margin-top: 2px; }
.tabela-cadastro .valores-de { margin: 0 0 4px; font-size: .9rem; padding-bottom: 4px; border-bottom: 1px solid var(--texto); }
.form-manual .linha-rotulo {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--borda); font-weight: 600; font-size: .92rem;
}
.form-manual .linha-rotulo:last-child { border-bottom: 0; }
.form-manual .linha-rotulo.sub { font-weight: 400; padding-left: 14px; color: var(--texto-suave); }
.form-manual .linha-rotulo small { font-weight: 400; color: var(--texto-suave); }
.form-manual .campo-un { display: inline-grid; grid-template-columns: 90px 2.2em; align-items: center; gap: 6px; font-weight: 400; }
.form-manual .campo-un input:not([type="checkbox"]) { width: 90px; text-align: right; padding: 6px 8px; }
.tabela-cadastro .erro { margin: 4px 0; }
/* "Quanto você comeu?", separado da tabela (referência) */
.consumo { padding: 10px 12px; border-radius: 12px; background: var(--accent-claro); }
.form-manual .linha-consumo { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .95rem; color: var(--texto); }
.consumo .dica { margin: 4px 0 0; }
.btn-corrigir-codigo { display: block; margin-top: 6px; font-size: .85rem; }
.comparando { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-claro); color: var(--accent); font-size: .88rem; }
.comparando[hidden] { display: none; }
.previa-acucar strong { color: var(--texto); }
.previa-vazia, .previa-agua { margin: 0; font-size: .9rem; color: var(--texto-suave); }
/* Cadastro: título "Valores de 2 fatias" e o açúcar dentro da caixa dos carboidratos */
.valores-de { margin: 4px 0 -2px; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; }
.grupo-carbo {
  display: grid; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo);
}
.grupo-carbo input { width: 100%; min-width: 0; }
.grupo-carbo .sub-campo { margin-left: 14px; padding-left: 10px; border-left: 3px solid var(--accent-claro); }
.grupo-carbo .erro { grid-column: 1 / -1; margin: 0; }
.form-manual small { font-weight: 400; color: var(--texto-suave); }
#ali-manual { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; }
.manual-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.manual-topo h3 { margin: 0; font-size: 1rem; }
#ali-manual > .dica { margin: 6px 0 0; }
.qtd-unidade { display: flex; gap: 6px; }
.qtd-unidade input { flex: 1; }
.qtd-unidade select { width: auto; }
.sugestoes li.cadastrar { color: var(--accent); font-weight: 600; border-top: 1px solid var(--borda); border-radius: 0 0 8px 8px; }
.sugestoes li.cadastrar:hover { background: var(--accent-claro); }
.sugestoes li.cadastrar.discreto { font-weight: 400; font-size: .85rem; color: var(--texto-suave); }
/* Metas: atalho para os valores de referência */
.metas-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--accent); }
.metas-ref span { font-size: .9rem; }
.acoes-sem-meta { display: flex; flex-wrap: wrap; gap: 8px; }
/* Duas escolhas grandes para quem ainda não tem metas (cara de botão, não de texto) */
.metas-escolha { display: grid; gap: 10px; }
.escolha-meta {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 14px; border: 2px solid var(--accent); background: var(--accent-claro);
  color: var(--texto); font: inherit; box-shadow: 0 2px 0 var(--accent);
}
.escolha-meta + .escolha-meta { background: transparent; box-shadow: none; border-width: 1px; }
.escolha-meta:hover { filter: brightness(.97); }
.escolha-meta:active { transform: translateY(1px); }
.escolha-meta strong { display: block; color: var(--accent); font-size: 1rem; }
.escolha-meta small { display: block; color: var(--texto-suave); margin-top: 2px; }
.escolha-icone { font-size: 1.6rem; flex-shrink: 0; }
#form-metas:not(.escolhendo) .metas-escolha { display: none; }
#form-metas.escolhendo > :not(h2):not(.dlg-metas-boas-vindas):not(.metas-escolha) { display: none; }
.manual summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; }
.form-manual, #form-metas { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
/* Campos encolhem junto com o cartão (sem isso eles vazam para fora em cartões estreitos) */
.form-manual input:not([type="checkbox"]), #form-metas input { width: 100%; min-width: 0; }
.largo { grid-column: 1 / -1; }
.opcao-salvar { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.opcao-salvar input { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.form-manual .dica { margin: -6px 0 0; }
/* Nome e quantidade na mesma linha, inclusive no celular */
.linha-nome { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.linha-nome input { width: 100%; min-width: 0; }

/* ---------- Bebidas ---------- */
.cal-topo + .calc-linha { margin-top: 12px; }
.calc-linha + .chips { margin-top: 10px; }
/* Lista longa não estica o cartão: rola por dentro */
.lista-dia.rolavel { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.sublista { margin-top: 12px; border-top: 1px solid var(--borda); padding-top: 12px; }
.titulo-sublista { font-weight: 600; color: var(--accent); font-size: .95rem; }
.previa { font-size: .9rem; color: var(--accent); font-weight: 600; margin: 10px 0 0; min-height: 1.35em; }

/* ---------- Suplementos ---------- */
.dica-sup { margin: 8px 0 12px; }
.chips-sup { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-sup {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  background: var(--fundo); color: var(--texto); border: 1px solid var(--borda);
}
.chip-sup:hover:not(:disabled) { border-color: var(--accent); }
.chip-sup.ativo { background: var(--ok); border-color: var(--ok); color: var(--sobre-accent); }
.chip-sup:disabled { cursor: default; }
#sup-cadastro { margin-top: 8px; }
#sup-cadastro .btn-link { white-space: nowrap; padding: 4px 2px; }
#sup-cadastro li { flex-wrap: wrap; gap: 4px 10px; }
#sup-cadastro .item-info { flex: 1 1 180px; }
#sup-cadastro li.pausado .item-info { opacity: .6; }
.dica-lista-sup { margin: 10px 0 0; }
.selo-sup {
  font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; vertical-align: 1px;
  background: var(--fundo); color: var(--texto-suave); border: 1px solid var(--borda);
}
.sup-novo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 14px; }
.sup-novo .autocompletar { width: 100%; flex: none; }

/* Formulário de suplemento: nome + "Quanto você toma?" (valores ficam em "ajustar", opcional) */
.form-sup { display: grid; gap: 12px; margin-top: 14px; }
.form-sup input:not([type="checkbox"]) { min-width: 0; }
.pergunta-qtd { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--accent-claro); }
.pergunta-qtd .pergunta { font-weight: 600; }
.pergunta-qtd .chips { margin-top: 0; }
.qtd-outra { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto-suave); }
.qtd-outra input { width: 70px; padding: 6px 8px; }
.qtd-outra select {
  font: inherit; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--campo); color: var(--texto);
}
.gramas-medida { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; }
.gramas-medida label { display: inline; font-weight: 600; }
.gramas-medida input { width: 70px; padding: 6px 8px; }
.gramas-medida small { color: var(--texto-suave); }
.valores-de select {
  font: inherit; padding: 2px 6px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--campo); color: var(--texto);
}
.form-sup .previa { margin: 0; min-height: 0; }
.form-sup .previa:empty { display: none; }
.ajustar-valores summary { cursor: pointer; color: var(--texto-suave); font-size: .85rem; text-decoration: underline; }
.ajustar-valores .dica { margin: 8px 0; }
.grade-valores { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-valores input { width: 100%; }
.form-sup .acoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.btn-excluir {
  font: inherit; font-size: .85rem; font-weight: 600; justify-self: start; cursor: pointer;
  background: none; color: var(--alerta); border: 1px solid var(--alerta); border-radius: 10px; padding: 7px 14px;
}
.btn-excluir:hover { background: var(--alerta-claro); }

/* Repetir de ontem */
.repetir .lista-dia li { padding: 8px 0; }
.repetir .btn-secundario { margin-top: 8px; }
.btn-mais {
  font-family: inherit; font-size: 1.2rem; font-weight: 600; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--accent); background: var(--accent-claro); color: var(--accent);
}
.btn-mais:hover { background: var(--accent); color: var(--sobre-accent); }
.ja-adicionado { font-size: .8rem; color: var(--ok); font-weight: 600; white-space: nowrap; }
/* Mais usados: "+" adiciona com a quantidade de costume */
.sugestoes .sugestao-dir { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mais-rapido {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 0; padding: 0;
  background: var(--accent); color: #fff; font-size: 1.3rem; line-height: 1; font-weight: 700; cursor: pointer;
}
.mais-rapido:hover { filter: brightness(1.1); }
.mais-rapido:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sugestoes .titulo-sugestoes {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); cursor: default; padding: 6px 10px 2px;
}

/* ---------- Lista do dia ---------- */
/* Cartão recolhível: título + resumo sempre visíveis, conteúdo abre na setinha */
.recolhivel > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary::after {
  content: '▾'; margin-left: auto; color: var(--accent); font-size: 1.1rem;
  transition: transform .2s;
}
.recolhivel:not([open]) > summary::after { transform: rotate(-90deg); }
.recolhivel[open] > summary { margin-bottom: 8px; }
.recolhivel > summary h2 { margin: 0; }
.resumo-lista { color: var(--texto-suave); font-size: .9rem; }

.lista-dia { list-style: none; margin: 0; padding: 0; }
.lista-dia li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.lista-dia li:last-child { border-bottom: 0; }
.lista-dia .vazio { color: var(--texto-suave); justify-content: center; padding: 24px 0; }
.item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-info strong { font-weight: 600; overflow-wrap: anywhere; }
.item-info small { color: var(--texto-suave); font-size: .8rem; }
.item-kcal { font-weight: 600; white-space: nowrap; }
.btn-remover {
  font-size: 1.2rem; line-height: 1; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: none; color: var(--texto-suave); cursor: pointer;
}
.btn-remover:hover { background: var(--alerta-claro); color: var(--alerta); }
/* ✎ corrigir item do dia */
.btn-editar-item {
  font-size: 1rem; line-height: 1; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 0; background: none; color: var(--texto-suave); cursor: pointer;
}
.btn-editar-item:hover { background: var(--accent-claro); color: var(--accent); }
.corrigindo { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--accent-claro); color: var(--accent); font-size: .88rem; font-weight: 600; }
#ali-cancelar-correcao { display: block; margin: 6px auto 0; }
#ali-cancelar-correcao[hidden] { display: none; }
/* "1 fatia tem cerca de __ g" */
.peso-medida { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--accent); }
.peso-medida label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
.peso-medida input { width: 80px; }
.peso-medida .dica { margin: 6px 0 0; }
/* Foto com IA */
.foto-ia-aviso { margin: 8px 0 0; font-size: .8rem; }
.foto-revisao { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; display: grid; gap: 8px; }
.foto-revisao .dica, .foto-revisao .erro { margin: 0; }
.foto-titulo { margin: 0; font-weight: 700; color: var(--accent); }
.foto-lendo { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--texto-suave); }
.foto-segundos { color: var(--accent); font-variant-numeric: tabular-nums; min-width: 3ch; }
.foto-demora { margin: 6px 0 0; }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--accent-claro); border-top-color: var(--accent); animation: girar .8s linear infinite; flex-shrink: 0; }
@keyframes girar { to { transform: rotate(360deg); } }
.lista-foto li { flex-wrap: wrap; }
.foto-item { flex: 1; min-width: 160px; display: flex; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; font-weight: 400; }
.foto-item input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.foto-gramas { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.foto-gramas input { width: 70px; }
.foto-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lista-foto .item-info small { display: block; }
.acoes-foto { flex-wrap: wrap; }
/* Código de barras */
.atalhos-busca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.atalhos-busca.so-codigo { grid-template-columns: minmax(0, 1fr); }
.atalho {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 76px; padding: 10px 6px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--accent-claro); color: var(--accent); font: inherit; font-size: .85rem; font-weight: 600;
  line-height: 1.2; text-align: center; cursor: pointer;
}
.atalho:hover { border-color: var(--accent); }
.atalho:active { transform: scale(.97); }
.so-codigo .atalho { flex-direction: row; min-height: 48px; }
.icone-atalho { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.origem-cadastro { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-claro); font-size: .85rem; }
.origem-cadastro a { color: var(--accent); }
/* display só com o leitor aberto: sem o [open], o diálogo fechado aparecia no fim da página */
.dialogo-codigo { width: min(440px, calc(100vw - 24px)); max-width: none; padding: 18px; }
.dialogo-codigo[open] { display: grid; gap: 10px; }
.dialogo-codigo .dica, .dialogo-codigo .erro { margin: 0; }
.dialogo-codigo .dica:empty, .dialogo-codigo .erro:empty { display: none; }
.dialogo-codigo .acoes { margin-top: 4px; }
.dialogo-codigo h2 { margin: 0; }
.cb-video { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; max-height: 38vh; width: 100%; margin: 0 auto; }
.cb-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-mira { position: absolute; left: 10%; right: 10%; top: 38%; height: 24%; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.cb-camera[hidden], .cb-foto[hidden] { display: none; }
.cb-digitar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.cb-digitar label { flex: 1; min-width: 180px; }
.cb-digitar input { width: 100%; }
/* Cadastro: "Cadastrar e adicionar" ou "Só cadastrar" */
.acoes-cadastro { display: grid; gap: 8px; }

/* ---------- Atividade ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#atividades .chips { gap: 6px; }
#atividades .chip { padding: 5px 12px; font-size: .85rem; }
#atividades .outra { margin-top: 10px; }
#atividades .outra input { padding: 7px 10px; }
.outra { margin-top: 12px; max-width: 360px; }

/* ---------- Gráfico dia a dia (resumo do período) ---------- */
/* Período longo: as barras ficam finas e a página rola de lado só dentro do gráfico */
.grafico-rolavel { overflow-x: auto; padding-top: 70px; margin-top: -70px; }
.grafico.compacto .valor-barra, .grafico.compacto .dia-semana { display: none; }
.pontos-semana { flex-wrap: wrap; }
.grafico { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; height: 230px; }
.coluna {
  position: relative; display: flex; flex-direction: column; align-items: center;
  font: inherit; color: inherit; background: none; border: 0; border-radius: 10px;
  padding: 4px 2px; cursor: pointer; min-width: 0;
}
.coluna:hover, .coluna:focus-visible { background: var(--accent-claro); outline: none; }
.coluna.selecionado { background: var(--fundo); }
.valor-barra { font-size: .72rem; font-weight: 600; color: var(--texto-suave); height: 1.2em; white-space: nowrap; }
.valor-barra.alerta { color: var(--alerta); }
.area-barra { position: relative; flex: 1; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.barra-dia { width: min(28px, 70%); background: var(--accent); border-radius: 4px 4px 0 0; }
.barra-dia.alerta { background: var(--alerta); }
.linha-meta { position: absolute; left: 12%; right: 12%; border-top: 2px dashed var(--texto-suave); opacity: .45; }
.coluna.futuro .linha-meta { opacity: .2; }
.rotulo-dia { font-size: .8rem; margin-top: 6px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rotulo-dia small { color: var(--texto-suave); }
.coluna.hoje .rotulo-dia { color: var(--accent); font-weight: 700; }
.coluna.hoje .rotulo-dia small { color: var(--accent); }
.ponto-atividade { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
.ponto-atividade.ativo { background: var(--ok); }

.dica-flutuante {
  position: absolute; bottom: calc(100% - 20px); left: 50%; transform: translateX(-50%);
  z-index: 4; width: max-content; max-width: 200px; text-align: left;
  background: var(--flutuante); color: var(--sobre-flutuante); font-size: .78rem; line-height: 1.4;
  padding: 8px 10px; border-radius: 8px; pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.coluna:hover .dica-flutuante, .coluna:focus-visible .dica-flutuante { opacity: 1; }
.coluna.ancora-esq .dica-flutuante { left: 0; transform: none; }
.coluna.ancora-dir .dica-flutuante { left: auto; right: 0; transform: none; }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; color: var(--texto-suave); margin: 12px 0 0; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; }
.leg-barra { width: 10px; height: 12px; background: var(--accent); border-radius: 2px; }
.leg-meta { width: 16px; border-top: 2px dashed var(--texto-suave); }
.leg-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.grade-indicadores { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; }
.indicador { padding: 14px; border-radius: 12px; background: var(--fundo); }
.pontos-semana { display: flex; gap: 6px; }
.pontos-semana span { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-claro); }
.pontos-semana span.ativo { background: var(--ok); }

/* ---------- Diálogo de metas ---------- */
.dialogo {
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px;
  background: var(--cartao); color: var(--texto); width: min(520px, calc(100vw - 32px));
  box-shadow: var(--sombra-forte);
}
.dialogo::backdrop { background: var(--veu); }
.dialogo h2 { grid-column: 1 / -1; margin: 0; color: var(--accent); }
.dialogo .dica { margin: 0; }
.acoes { display: flex; justify-content: flex-end; gap: 12px; }

/* ---------- Período (de/até no topo) ---------- */
.campo-data { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; color: var(--texto-suave); }
.atalhos-data { display: flex; gap: 6px; flex-wrap: wrap; }
#periodo { display: none; }
.modo-periodo #periodo { display: block; }
.modo-periodo #cartoes, .modo-periodo .barra-organizacao, .modo-periodo [data-org="abrir"] { display: none !important; }
#periodo .grade-indicadores { margin-top: 12px; }
#periodo .indicador .valor strong { font-size: 1.4rem; }
.titulo-historico { font-size: 1.05rem; margin: 24px 0 8px; }
.historico { border: 1px solid var(--borda); border-radius: 12px; }
.dia-historico { padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.dia-historico:last-child { border-bottom: 0; }
.dia-historico[open] > summary { margin-bottom: 4px; }
.grupo-historico { margin: 10px 0 0; font-size: .8rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.historico .lista-dia li { padding: 8px 0; }

.dica-periodo { margin: 10px 0 0; }
.tabela-rolavel { overflow-x: auto; margin-top: 16px; border: 1px solid var(--borda); border-radius: 12px; }
.tabela-periodo { width: 100%; border-collapse: collapse; font-size: .9rem; white-space: nowrap; }
.tabela-periodo th, .tabela-periodo td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--borda); }
.tabela-periodo th { font-size: .8rem; color: var(--texto-suave); font-weight: 600; background: var(--fundo); position: sticky; top: 0; }
.tabela-periodo th:first-child, .tabela-periodo td:first-child, .tabela-periodo .col-ativ { text-align: left; }
.tabela-periodo tbody tr:last-child td { border-bottom: 0; }
.tabela-periodo tr.vazio td { color: var(--texto-suave); }
.tabela-periodo td.alerta { color: var(--alerta); font-weight: 600; }
.tabela-periodo td small { color: var(--texto-suave); font-weight: 400; }
.tabela-periodo .col-ativ { white-space: normal; min-width: 140px; }

/* ---------- Novidades (versões) ---------- */
.btn-novidades {
  position: relative; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  background: var(--cartao); color: var(--texto-suave);
  border: 1px solid var(--borda); border-radius: 999px; padding: 3px 10px;
}
.btn-novidades:hover { border-color: var(--accent); color: var(--accent); }
/* Bolinha: tem novidade que a pessoa ainda não abriu */
.btn-novidades.nao-vista::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--fundo);
}
.dialogo-novidades { max-height: min(80vh, 640px); overflow-y: auto; }
.cabeca-novidades { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.versao { padding: 14px 0; border-top: 1px solid var(--borda); }
.versao header { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: .85rem; }
.versao h3 { font-size: 1.05rem; margin: 4px 0 2px; }
.versao .quando { margin: 0 0 6px; font-size: .85rem; color: var(--texto-suave); }
.versao ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .92rem; }
.versao:not(.atual) { opacity: .8; }

/* ---------- Aviso flutuante ---------- */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  background: var(--flutuante); color: var(--sobre-flutuante); padding: 10px 18px; border-radius: 999px;
  font-size: .9rem; box-shadow: var(--sombra); max-width: calc(100vw - 32px);
}
.aviso.erro-aviso { background: var(--alerta); border-radius: 12px; }
.aviso-acao {
  font: inherit; font-weight: 700; margin-left: 14px; padding: 2px 4px; cursor: pointer;
  background: none; border: 0; color: inherit; text-decoration: underline;
}

/* ---------- Refeições salvas ---------- */
.btn-salvar-refeicao { margin-top: 6px; }
.abas-repetir { margin: 0 0 6px; gap: 6px; }
.abas-repetir .chip { padding: 5px 12px; font-size: .85rem; }
.form-refeicao { display: grid; gap: 12px; }
.form-refeicao .pergunta { margin: 4px 0 0; font-weight: 600; }
.form-refeicao .chips { margin-top: 0; }
.form-refeicao .acoes { align-items: center; flex-wrap: wrap; }
.form-refeicao .btn-excluir { margin-right: auto; }
.lista-marcar { max-height: 40vh; overflow-y: auto; }
.lista-marcar li { padding: 0; }
.marcar { flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 10px 0; cursor: pointer; font-weight: 400; }
.marcar input { width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--accent); flex-shrink: 0; }

/* ---------- Celular ---------- */
@media (max-width: 600px) {
  .acoes-topo { margin-left: 0; }
  .segmentado { width: 100%; }
  .segmentado button { flex: 1; }
  /* Celular: ‹ [dia] › numa linha, atalhos embaixo; De/Até lado a lado só em "Período" */
  .bloco-data { width: 100%; flex-direction: column; align-items: stretch; }
  .seletor-data { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .atalhos-data { justify-content: center; }
  .periodo-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .campo-data { flex-direction: column; align-items: stretch; gap: 2px; font-size: .8rem; }
  /* iPhone: sem isso o campo de data ignora a largura e passa da borda da tela */
  .periodo-campos input { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; display: block; }
  /* Editar metas e Organizar painel ficam no menu da conta */
  .acoes-topo { display: none; }

  /* Cabeçalho: nome do app + bolinha com a inicial; o resto abre num menu */
  .topo-painel { position: relative; flex-wrap: nowrap; }
  .btn-menu {
    display: inline-flex; position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: 50%; background: var(--accent); color: var(--sobre-accent);
    font: 700 1.1rem 'Bricolage Grotesque', sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  }
  /* Bolinha de aviso: novidades não vistas ou contas aguardando aprovação */
  .topo-painel:has(.btn-novidades.nao-vista, .adm-contador:not([hidden])) .btn-menu::after {
    content: ''; position: absolute; top: 0; right: 0; width: 11px; height: 11px;
    border-radius: 50%; background: var(--alerta); border: 2px solid var(--fundo);
  }
  .topo-painel .usuario { display: none; }
  .topo-painel.menu-aberto .usuario {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; z-index: 30; top: calc(100% - 6px); right: 16px; width: min(280px, calc(100vw - 32px));
    padding: 8px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--borda);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  }
  .topo-painel .usuario .so-menu { display: inline; }
  .topo-painel .usuario > button {
    display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 12px; margin: 0;
    border: 0; border-radius: 10px; background: none; color: var(--texto); text-decoration: none;
    font: inherit; font-size: .95rem; font-weight: 500; text-align: left; cursor: pointer;
  }
  .topo-painel .usuario > button:hover, .topo-painel .usuario > button:active { background: var(--accent-claro); }
  .topo-painel .usuario > button[hidden] { display: none; }
  /* O nome (Minha conta) vem primeiro, em destaque, com o nível ao lado */
  .topo-painel .usuario .nome-usuario { order: -2; font-weight: 700; color: var(--accent); }
  .topo-painel .usuario #selo-nivel-topo { order: -1; padding: 0 12px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
  .topo-painel .usuario .btn-sair { border-top: 1px solid var(--borda); border-radius: 0 0 10px 10px; margin-top: 4px; color: var(--texto-suave); }
  .topo-painel .usuario .btn-novidades.nao-vista::after { position: static; margin-left: auto; }
  .grade-macros { grid-template-columns: 1fr 1fr; }
  .form-manual, #form-metas { grid-template-columns: 1fr; }
  .grafico { height: 200px; }
  .valor-barra { font-size: .62rem; }
  .cartao { padding: 18px; }
}

/* ---------- Exportar período ---------- */
.acoes-exportar { position: relative; margin-left: auto; }
.acoes-exportar > summary { list-style: none; padding: 6px 14px; font-size: .85rem; }
.acoes-exportar > summary::-webkit-details-marker { display: none; }
.menu-exportar {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 190px;
  display: grid; padding: 6px; background: var(--campo);
  border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra);
}
.menu-exportar button {
  font: inherit; font-weight: 600; text-align: left; cursor: pointer; color: var(--texto);
  background: none; border: 0; border-radius: 8px; padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.menu-exportar button small { font-weight: 400; color: var(--texto-suave); font-size: .78rem; }
.menu-exportar button:hover { background: var(--accent-claro); color: var(--accent); }
#periodo .cal-topo { justify-content: flex-start; gap: 10px 12px; }
.so-impressao { display: none; }

/* PDF (impressão): só o resumo do período, com as cores do gráfico */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  :root, :root[data-tema] {
    --fundo: #F3ECEA; --cartao: #FFFFFF; --campo: #FFFDFC; --borda: #E6D9D5; --texto: #3A2A30;
    --texto-suave: #7A6A70; --accent: #8C3B5C; --accent-claro: #F1E1E7; --ok: #3F7D5A; --ok-claro: #E3EFE7;
    --alerta: #B3402F; --alerta-claro: #F6E1DD; --atencao: #A86A12; --atencao-claro: #F6ECD9; --agua: #3B7FC4; --agua-claro: #EAF1F9; --agua-trilho: #D6E4F3;
    color-scheme: light;
  }
  body * { visibility: hidden; }
  #periodo, #periodo * { visibility: visible; }
  #periodo { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; padding: 0; }
  #periodo .acoes-exportar, #periodo .dica, .dica-flutuante { display: none !important; }
  .so-impressao { display: block; }
  .titulo-impressao { font: 700 1.3rem 'Bricolage Grotesque', sans-serif; color: var(--accent); margin: 0 0 4px; }
  .grafico-rolavel { overflow: visible; padding-top: 0; margin-top: 8px; }
  .grafico { height: 200px; }
  .indicador, .grafico { break-inside: avoid; }
  .dia-historico > summary { break-after: avoid; }
  .recolhivel > summary::after { display: none; }
}

/* ---------- Criar conta, termos e Minha conta ---------- */
.troca-tela { margin: 0; text-align: center; font-size: .9rem; color: var(--texto-suave); }
.aceite { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; line-height: 1.4; }
.aceite input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.cartao-login a, .dialogo-conta a { color: var(--accent); }
.nome-usuario { font-weight: 600; text-decoration: none; }
.nome-usuario:hover { text-decoration: underline; }
.dialogo-conta { max-height: min(86vh, 680px); overflow-y: auto; }
.dialogo-conta section { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--borda); }
.dialogo-conta h3 { margin: 0; font-size: 1rem; }
.dialogo-conta .btn-secundario, .dialogo-conta .btn-perigo { justify-self: start; }
.adm-parecido { font-size: .82rem; font-weight: 600; color: var(--atencao); }
/* Desafio da nutri (028): formulário e placar da nutri; convite, metas e ranking da paciente */
.form-desafio { display: grid; gap: 12px; margin: 8px 0 16px; padding: 14px; border: 1px solid var(--borda); border-radius: 12px; }
.form-desafio label:not(.aceite):not(.pts-meta) { display: grid; gap: 4px; font-weight: 600; }
.form-desafio fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.form-desafio legend { font-weight: 700; margin-bottom: 6px; color: var(--accent); }
.form-desafio input, .form-desafio textarea { font-size: 16px; }
.form-desafio textarea { font-family: inherit; }
.form-desafio [data-dsf="mais-meta"] { justify-self: start; }
.regra-form { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.regra-form .pts-meta { color: var(--texto-suave); font-size: .9rem; }
.nutri-regra { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; }
.nutri-regra:has(> .aceite input:not(:checked)) .nutri-regra-corpo { display: none; }
.nutri-regra-corpo { display: grid; gap: 8px; padding-left: 28px; }
.nutri-regra-corpo .chips .chip { padding: 5px 12px; font-size: .85rem; }
.faixas { display: grid; gap: 6px; }
.faixa, .teto-regra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.form-desafio .faixa input, .form-desafio .teto-regra input[type="number"] { width: 4.6em; flex: none; text-align: center; padding-left: 4px; padding-right: 4px; }
.nutri-regra[data-modo="fixa"] .faixa:not(:first-child),
.nutri-regra[data-modo="fixa"] [data-dsf="mais-faixa"],
.nutri-regra[data-modo="fixa"] [data-dsf="tirar-faixa"] { display: none; }
.nutri-regra [data-dsf="mais-faixa"] { justify-self: start; }
.teto-regra .aceite { margin: 0; }
.form-desafio .pts-meta { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-weight: 600; }
.form-desafio .pts-meta input { width: 4.2em; text-align: center; }
.form-desafio .aceite, .participantes .aceite { display: flex; flex-direction: row; align-items: flex-start; text-align: left; font-weight: 400; }
.form-desafio .aceite input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.form-desafio .aceite small { color: var(--texto-suave); }
.datas-desafio { display: flex; flex-wrap: wrap; gap: 12px; }
.meta-form { display: flex; gap: 8px; align-items: center; }
.meta-form input[type="text"] { flex: 1; min-width: 0; }
.pts-meta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.pts-meta input { width: 4em; }
.participantes-topo { display: flex; gap: 10px; align-items: center; }
.participantes-topo input { flex: 1; min-width: 0; }
.participantes { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px 2px; }
.participantes label[hidden] { display: none; }
.lista-desafios { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-desafios > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--borda); }
.lista-desafios > li .item-info { flex: 1; min-width: 180px; }
.placar-caixa { flex-basis: 100%; display: grid; gap: 8px; }
.btn-link.perigo { color: var(--alerta); justify-self: start; }
.placar-nutri { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.placar-nutri li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--campo); }
.placar-nutri li.eu { background: var(--accent-claro); }
.placar-nutri li.convidada { opacity: .6; }
.placar-nutri .pos { width: 2.2em; font-weight: 700; color: var(--accent); }
.placar-nutri .quem { flex: 1; }
.regras-desafio { margin: 4px 0; padding-left: 1.2em; display: grid; gap: 2px; }
.regras-desafio small { color: var(--texto-suave); }
.desafio-nutri { display: grid; gap: 8px; }
.desafio-nutri p { margin: 0; }
.desafio-nutri h3 { margin: 0; }
.desafio-nutri input[type="text"] { font-size: 16px; }
.divisor-desafio { border: 0; border-top: 1px solid var(--borda); margin: 16px 0; }
.pontos-desafio-nutri strong { font-size: 1.6rem; color: var(--accent); }
.metas-desafio { display: grid; gap: 6px; }
.meta-desafio { display: flex; flex-direction: row; align-items: center; text-align: left; font-weight: 400; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; cursor: pointer; }
.meta-desafio input { width: 20px; height: 20px; accent-color: var(--accent); }
.meta-desafio span { flex: 1; }
.meta-desafio small { color: var(--ok); font-weight: 700; }
#desafio-nutri h2 { margin-top: 0; }
/* Nutricionista: Meus pacientes e pedido de acompanhamento */
/* Aba Meus pacientes (só a conta de nutricionista; Conquistas e Pausa são da pessoa e somem) */
.so-nutri { display: none !important; }
.modo-nutri .abas-app .so-nutri { display: inline-flex !important; }
.modo-nutri .abas-app [data-aba="conquistas"], .modo-nutri .abas-app [data-aba="pausa"] { display: none !important; }
.aba-pacientes { display: none; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.na-aba-pacientes .aba-pacientes { display: grid; }
.na-aba-pacientes > :not(.abas-app):not(.aba-pacientes):not(.aviso):not(dialog) { display: none !important; }
.busca-paciente input { width: 100%; font-size: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lista-pacientes { max-height: 70vh; overflow-y: auto; }
.lista-pacientes .lista-dia li { gap: 8px; }
.lista-pacientes .btn-primario { padding: 8px 12px; font-size: .88rem; white-space: nowrap; }
.titulo-esperando { margin: 14px 0 4px; font-size: .95rem; }
.vendo-paciente {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--accent-claro); color: var(--texto);
}
.vendo-paciente[hidden] { display: none; }
.vendo-outra .recado { display: none !important; }
.form-pedir-nutri { display: flex; gap: 8px; flex-wrap: wrap; }
.form-pedir-nutri input { flex: 1 1 200px; }
.aviso-pacientes:empty { display: none; }
#dlg-pedido-nutri { max-width: 480px; }
#dlg-pedido-nutri h2 { margin-top: 0; font-size: 1.15rem; }
.pedido-texto { border-left: 3px solid var(--accent); padding-left: 10px; }
.botoes-pedido { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
/* Lançar pelo Telegram */
.dialogo-telegram { max-width: 460px; max-height: min(86vh, 680px); overflow-y: auto; }
.dialogo-telegram a:not(.btn-primario) { color: var(--accent); }
.corpo-telegram { display: grid; gap: 10px; margin: 8px 0 12px; }
.corpo-telegram .btn-primario { justify-self: start; text-decoration: none; display: inline-block; }
.passos-telegram { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.telegram-ok { margin: 0; }
.conta-email { margin: 0 0 4px; color: var(--texto-suave); }
.btn-perigo {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--alerta); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px;
}
.btn-perigo:disabled { opacity: .45; cursor: not-allowed; }
.dlg-metas-boas-vindas { margin: 0; grid-column: 1 / -1; }
.segmentado[hidden] { display: none; }

/* =====================================================================
   Gamificação: recado do dia, sequência, metas de atividade, pontos e desafio
   ===================================================================== */
.recado {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-claro); border: 1px solid var(--accent); border-radius: var(--raio);
  padding: 12px 16px; font-weight: 500;
}
.recado-texto { flex: 1; }
.recado-fechar {
  font-size: 1.2rem; line-height: 1; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  border: 0; background: none; color: var(--accent); cursor: pointer;
}
.recado-fechar:hover { background: var(--cartao); }

.sequencia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--fundo);
}
.seq-num { font-size: .95rem; }
.seq-num strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.3rem; }
.seq-semana { display: inline-flex; gap: 5px; }
.bolinha {
  width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: .68rem; font-weight: 700; border: 1px solid var(--borda); color: var(--texto-suave); background: var(--cartao);
}
.bolinha.ok { background: var(--ok); border-color: var(--ok); color: var(--sobre-accent); }
.bolinha.meio { background: linear-gradient(90deg, var(--ok) 50%, var(--cartao) 50%); border-color: var(--ok); color: var(--texto); }
.bolinha.folga { background: var(--accent-claro); border-color: var(--accent); color: var(--accent); }
.bolinha.falta { opacity: .55; }
.bolinha.futuro { border-style: dashed; }
.bolinha.hoje { outline: 2px solid var(--accent); outline-offset: 1px; }
.seq-info { font-size: .8rem; color: var(--texto-suave); margin-left: auto; }

.metas-atividade { display: grid; gap: 8px; margin-top: 12px; }
.metas-atividade .dica { margin: 0; }
.meta-ativ { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: .9rem; }
.meta-ativ .barra { grid-column: 1 / -1; height: 8px; }

#dlg-metas { max-height: min(90vh, 760px); overflow-y: auto; }
.metas-ativ-campos { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px 14px; margin: 4px 0 0; }
.metas-ativ-campos legend { font-weight: 600; padding: 0 6px; }
.metas-ativ-campos .dica { margin: 0 0 10px; }
.grade-ativ { display: grid; gap: 8px 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.grade-ativ input { width: 100%; min-width: 0; }

.nivel { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; }
.nivel-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.nivel-info .dica { margin: 0; }
.medalha {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  font: 700 1.2rem 'Bricolage Grotesque', sans-serif; color: #fff; border: 3px solid rgba(255, 255, 255, .5);
}
.medalha-bronze { background: #A0663A; }
.medalha-prata { background: #8E979E; }
.medalha-ouro { background: #C9962B; }
.medalha-diamante { background: #4F8FB8; }
.conquistas { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.conquistas li { display: flex; justify-content: space-between; color: var(--texto-suave); }
.conquistas li.feito { color: var(--ok); font-weight: 600; }

.desafio { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.desafio .dica { margin: 0; }
.desafio .chips { margin-top: 0; }
.acoes-desafio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.acoes-desafio .sair { color: var(--texto-suave); }
/* Sem desafio: as duas opções grandes, lado a lado (empilhadas em tela estreita) */
.opcoes-desafio { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.opcao-desafio {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 14px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit;
}
.opcao-desafio:hover { border-color: var(--accent); }
.opcao-desafio .emoji { font-size: 1.5rem; line-height: 1; }
.opcao-desafio strong { color: var(--accent); font-size: 1rem; }
.opcao-desafio small { color: var(--texto-suave); font-size: .82rem; }
/* Conquistas: o desafio vem primeiro (era fácil não achar, lá embaixo dos pontos) */
.aba-conquistas #desafio { order: -1; }
/* ---------- Pódio da semana ---------- */
.titulo-ranking { margin: 4px 0 0; font-weight: 600; font-size: .9rem; color: var(--texto-suave); }
.podio-fechamento, .podio-caixa { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent); background: var(--accent-claro); }
.podio-fechamento .btn-primario { justify-self: start; }
.podio-titulo { margin: 0; font-weight: 700; color: var(--accent); }
.podio-titulo small { font-weight: 400; color: var(--texto-suave); margin-left: 4px; }
.podio-faltando { margin: 0; font-size: .88rem; font-weight: 600; color: var(--alerta); }
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-top: 6px; }
.podio-lugar { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.podio-medalha { font-size: 1.8rem; line-height: 1; }
.lugar-1 .podio-medalha { font-size: 2.3rem; animation: pulo 1.2s ease-in-out 2; }
.podio-apelido { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.podio-lugar.eu .podio-apelido { color: var(--accent); }
.podio-pontos { font-size: .8rem; color: var(--texto-suave); }
.podio-degrau {
  width: 100%; margin-top: 4px; border-radius: 10px 10px 0 0; background: var(--accent); color: #fff;
  font-weight: 800; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
}
.lugar-1 .podio-degrau { height: 74px; }
.lugar-2 .podio-degrau { height: 52px; opacity: .85; }
.lugar-3 .podio-degrau { height: 36px; opacity: .7; }
.podio-frase { margin: 0; text-align: center; font-weight: 600; }
.podio-caixa .btn-link { justify-self: center; }
@keyframes pulo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.confete { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1000; }
.confete i {
  position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .9;
  animation: cair linear forwards;
}
@keyframes cair { to { transform: translate(var(--vento), 105vh) rotate(var(--giro)); } }
@media (prefers-reduced-motion: reduce) { .lugar-1 .podio-medalha { animation: none; } }

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.ranking li:last-child { border-bottom: 0; }
.ranking li.eu { font-weight: 700; color: var(--accent); }
.ranking .pos { width: 28px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ranking .apelido { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.convite { margin: 0; font-size: .9rem; }
.codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: .12em; font-size: 1.05rem; color: var(--accent); }
.form-desafio { display: grid; gap: 10px; }
.form-desafio input { width: 100%; min-width: 0; }
.selo-nivel { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--texto-suave); }
.medalha.mini { width: 22px; height: 22px; font-size: .7rem; border-width: 2px; }

/* ---------- Abas "Meu dia" e "Conquistas" ---------- */
.abas-app {
  display: flex; gap: 4px; padding: 4px; width: fit-content;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px;
}
.abas-app button {
  font: inherit; font-weight: 600; border: 0; background: none; color: var(--texto-suave);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.abas-app button[aria-selected="true"] { background: var(--accent); color: var(--sobre-accent); }
.aba-conquistas {
  display: none; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.na-aba-conquistas .aba-conquistas { display: grid; }
.na-aba-conquistas > :not(.abas-app):not(.aba-conquistas):not(.recado):not(.aviso):not(dialog) { display: none !important; }
/* Aba Evolução: só o que é dela (peso; depois, avaliação física) */
.aba-evolucao { display: none; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.na-aba-evolucao .aba-evolucao { display: grid; }
.na-aba-evolucao > :not(.abas-app):not(.aba-evolucao):not(.aviso):not(dialog) { display: none !important; }
/* "Como funcionam os pontos": regra dos degraus, à direita, em letra menor */
.conquistas .degrau { font-size: .8rem; text-align: right; color: var(--texto-suave); max-width: 65%; }
/* Aba Pausa: calma, centralizada, sem nada piscando */
.aba-pausa { display: none; max-width: 520px; margin: 0 auto; }
.na-aba-pausa .aba-pausa { display: block; }
.na-aba-pausa > :not(.abas-app):not(.aba-pausa):not(.aviso):not(dialog) { display: none !important; }
.aba-pausa .cartao { padding: 0; overflow: hidden; }
.pausa-topo { text-align: center; padding: 22px 20px 6px; background: linear-gradient(180deg, var(--accent-claro), transparent); }
.pausa-topo h2 { margin: 0; }
.pausa-topo p { margin: 6px 0 0; color: var(--texto-suave); }
.respiro { display: grid; justify-items: center; gap: 12px; padding: 10px 20px 8px; }
.respiro-texto { margin: 0; min-height: 2.6em; display: grid; place-items: center; text-align: center;
  font: 700 1.25rem/1.3 'Bricolage Grotesque', sans-serif; color: var(--accent); }
/* Palco de tamanho fixo: a bolinha cresce/encolhe por dentro sem empurrar nada */
.respiro-palco { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.respiro-guia { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--accent-claro); }
.respiro-bola {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0%, transparent 45%), radial-gradient(circle, var(--accent) 0%, var(--accent-escuro, var(--accent)) 100%);
  box-shadow: 0 10px 40px rgba(140, 59, 92, .35);
  transform: scale(.55); transition: transform 1s ease-in-out;
}
.respiro-bola.inspira, .respiro-bola.segura { transform: scale(1); }
.respiro-bola.solta { transform: scale(.55); }
.respiro-seg { position: relative; z-index: 1; color: #fff; font: 800 3.2rem/1 'Bricolage Grotesque', sans-serif; text-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.respiro-pontos { display: flex; gap: 8px; }
.respiro-pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-claro); transition: background .4s; }
.respiro-pontos i.feito { background: var(--accent); }
.respiro-conta { margin: 0; font-size: .85rem; color: var(--texto-suave); text-align: center; }
.btn-respirar { min-width: 220px; }
.pausa-titulo { margin: 20px 20px 8px; font-size: 1rem; }
.pausa-ideias { margin: 0 20px 4px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pausa-ideias li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--fundo); line-height: 1.4; }
.ideia-emoji { font-size: 1.4rem; line-height: 1.1; flex-shrink: 0; }
.aba-pausa [data-pausa="outras"] { margin: 0 20px; }
.pausa-ajuda { margin: 16px 20px 20px; padding-top: 12px; border-top: 1px solid var(--borda); }
.pausa-ajuda a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .respiro-bola { transition: none !important; transform: scale(.8) !important; } }
#desafio .desafio { margin-top: 8px; padding-top: 0; border-top: 0; }
.btn-convidar { display: block; text-align: center; text-decoration: none; background: #1F9E5B; }
.btn-compartilhar-ranking { width: 100%; }

/* Termos por cima do app */
.dialogo-termos[open] { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; width: min(760px, calc(100vw - 16px));
  height: min(88vh, 900px); max-height: none; padding: 14px; }
.quadro-termos { width: 100%; height: 100%; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }

/* Cartão Intestino */
/* Pergunta comprida: ela quebra em 2 linhas e a etiqueta fica à direita, como nos outros cartões */
.topo-intestino { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 12px; }
.topo-intestino h2 { flex: 1; min-width: 0; }
.topo-intestino .status { flex-shrink: 0; margin-top: 2px; }
.contar-mais { margin-top: 12px; }
.contar-mais summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .92rem; }
.contar-mais summary small { color: var(--texto-suave); font-weight: 400; }
.contar-mais-corpo { display: grid; gap: 8px; margin-top: 10px; }
.contar-mais-corpo .rotulo-campo { margin: 0; font-size: .88rem; font-weight: 600; }
.contar-mais-corpo .rotulo-campo small { font-weight: 400; color: var(--texto-suave); }
.contar-mais-corpo textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; font-size: 16px; }
.dica-intestino { margin: 12px 0 0; font-size: .85rem; }
.notas-intestino { margin-top: 16px; }
.dialogo-ranking[open] { display: grid; gap: 12px; width: min(420px, calc(100vw - 24px)); padding: 18px; }
.previa-ranking { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 12px; background: var(--accent-claro); aspect-ratio: 9 / 16; }
.dialogo-ranking .acoes { flex-wrap: wrap; }
.btn-convidar:hover { background: #17834A; }
.aviso-convite { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-claro); color: var(--accent); font-weight: 600; font-size: .9rem; }

.icone-aba { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.abas-app button { display: inline-flex; align-items: center; gap: 8px; }

/* No celular as abas viram a barra de navegação, presa na borda de baixo (como nos apps):
   fundo sólido, de ponta a ponta; a página rola acima dela e nada passa por trás */
@media (max-width: 760px) {
  .abas-app {
    position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; width: auto;
    display: flex; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 0; border: 0; border-top: 1px solid var(--borda);
    background: var(--cartao); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    transition: transform .2s ease;
  }
  .abas-app button {
    flex: 1; flex-direction: column; justify-content: center; gap: 3px;
    padding: 8px 4px; border-radius: 12px; font-size: .75rem; font-weight: 600;
    background: none; color: var(--texto-suave);
  }
  .abas-app .icone-aba { width: 26px; height: 26px; }
  /* Aba aberta: ícone e nome na cor do app (sem caixa colorida) */
  .abas-app button[aria-selected="true"] { background: none; color: var(--accent); }
  .abas-app button[aria-selected="true"] .icone-aba { stroke-width: 2.2; }
  /* Só sai da frente com o teclado aberto (senão subiria junto e cobriria a busca) */
  .abas-escondidas .abas-app { transform: translateY(100%); }
  /* A página termina acima da barra: o último cartão nunca fica escondido */
  .conteudo { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .aviso { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}


.conta-semana li { color: var(--texto); }
.conta-semana li.total { border-top: 1px solid var(--borda); padding-top: 6px; margin-top: 2px; font-weight: 700; color: var(--accent); }
.explica-pontos { display: grid; gap: 8px; font-size: .9rem; }
.explica-pontos p { margin: 0; }
.explica-pontos .conquistas li { color: var(--texto); gap: 12px; }

/* ---------- Administração (só a administradora) ---------- */
.btn-admin { padding: 6px 12px; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; }
.adm-contador {
  background: var(--alerta); color: #fff; border-radius: 999px;
  min-width: 20px; padding: 0 6px; font-size: .75rem; line-height: 20px; text-align: center;
}
.adm h2 { margin-bottom: 8px; }
.adm-numeros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.adm-numero { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.adm-numero strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2rem; line-height: 1.1; color: var(--accent); }
.adm-numero span { font-size: .85rem; color: var(--texto-suave); }
.adm-numero.atencao strong { color: var(--atencao); }
.adm-numero.destaque { background: var(--accent-claro); border-color: var(--accent); }
.adm-aguardando { border-color: var(--accent); }

.adm-graficos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.adm-grafico { width: 100%; height: auto; display: block; }
.adm-grafico text { font: 600 11px 'Public Sans', sans-serif; text-anchor: middle; }
.adm-valor { fill: var(--texto); }
.adm-eixo { fill: var(--texto-suave); font-weight: 400 !important; }
.adm-linha-base { stroke: var(--borda); }

.adm-cabeca { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.adm-cabeca h2 { margin: 0; }
.adm-cabeca .segmentado button { padding: 6px 14px; font-size: .85rem; }

.adm-lista { display: flex; flex-direction: column; gap: 10px; }
.adm-pessoa {
  display: grid; gap: 10px 16px; align-items: center;
  grid-template-columns: minmax(180px, 1.2fr) 3fr auto;
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--campo);
}
.adm-quem { display: flex; flex-direction: column; min-width: 0; }
.adm-quem .dica { margin: 0; overflow-wrap: anywhere; }
.adm-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px 12px; margin: 0; }
.adm-info dt { font-size: .75rem; color: var(--texto-suave); }
.adm-info dd { margin: 0; font-size: .9rem; font-weight: 500; }
.adm-situacao { border-radius: 999px; padding: 1px 8px; font-size: .8rem; font-weight: 600; background: var(--ok-claro); color: var(--ok); }
.adm-situacao.aguardando { background: var(--atencao-claro); color: var(--atencao); }
.adm-situacao.pendente { background: var(--alerta-claro); color: var(--alerta); }
.adm-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.adm-acoes button { padding: 7px 12px; font-size: .85rem; }
.btn-perigo-leve {
  font: inherit; font-weight: 600; border-radius: 10px; cursor: pointer;
  background: none; color: var(--alerta); border: 1px solid var(--alerta-claro);
}
.btn-perigo-leve:hover { border-color: var(--alerta); }
@media (max-width: 760px) {
  .adm-pessoa { grid-template-columns: 1fr; }
  .adm-acoes { justify-content: flex-start; }
}

.adm-form-incluir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.adm-form-incluir label { flex: 1 1 240px; }
.adm-incluir .erro { margin-top: 6px; }
.adm-aviso { background: var(--ok-claro); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.adm-aviso p { margin: 0 0 10px; }
.adm-aviso .adm-acoes { justify-content: flex-start; }
.adm-sub { font-size: .95rem; margin: 16px 0 8px; }
.adm-liberados { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-liberados li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.adm-liberados .dica { margin: 0; }
.usuario { flex-wrap: wrap; justify-content: flex-end; }

/* Conta criada: falta confirmar o e-mail */
.cartao-confirmar { text-align: center; border: 2px solid var(--accent); }
.cartao-confirmar .icone-grande { font-size: 3rem; line-height: 1; }
.cartao-confirmar p { margin: 0; }
.cartao-confirmar .email { color: var(--accent); font-size: 1.1rem; overflow-wrap: anywhere; }
.cartao-confirmar .passos {
  text-align: left; margin: 0; padding: 14px 14px 14px 34px;
  background: var(--accent-claro); border-radius: 12px; display: grid; gap: 6px;
}

/* Medida caseira ao lado da quantidade (g, colher de sopa, concha…) */
.seletor-medida {
  font: inherit; padding: 10px 8px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--campo); color: var(--texto); max-width: 190px;
}
.campo-gramas input { width: 80px; }

/* Resumo de quem ainda não cadastrou metas: totais do dia em destaque */
.resumo-sem-meta { display: grid; gap: 12px; justify-items: start; }
.total-kcal { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.total-kcal strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.total-kcal small { flex-basis: 100%; color: var(--texto-suave); font-size: .85rem; }
.totais-sem-meta {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.totais-sem-meta li { display: flex; flex-direction: column; background: var(--fundo); border-radius: 10px; padding: 8px 12px; }
.totais-sem-meta span { font-size: .8rem; color: var(--texto-suave); }
.resumo-sem-meta .dica { margin: 0; }

/* Editar refeição: "Ao salvar, uma cópia também vai para Janta." */
#ref-mudanca { color: var(--accent); font-weight: 600; }

/* ---------- Instalar no celular ---------- */
.aviso-instalar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 clamp(16px, 3vw, 40px) 16px; padding: 12px 16px;
  background: var(--accent-claro); border: 1px solid var(--accent); border-radius: 16px;
}
.aviso-instalar-texto { flex: 1 1 220px; line-height: 1.4; }
.aviso-instalar-botoes { display: flex; align-items: center; gap: 12px; }
.dialogo-instalar { max-width: 420px; }
.passos-instalar { padding-left: 22px; margin: 8px 0 16px; display: grid; gap: 12px; line-height: 1.5; }
.icone-compartilhar { width: 20px; height: 20px; vertical-align: -4px; color: #0A84FF; }
.corpo-instalar .btn-primario { width: 100%; margin: 12px 0 8px; }

/* Listas de opções e caixas de texto: mesma regra dos 16px (evita o zoom do iPhone) */
select, textarea { font-size: 16px; }

/* ---------- Aba Plano Alimentar (5.1.0) ---------- */
.aba-plano { display: none; gap: 16px; align-items: start; max-width: 760px; }
.na-aba-plano .aba-plano { display: grid; }
.na-aba-plano > :not(.abas-app):not(.aba-plano):not(.vendo-paciente):not(.aviso):not(dialog) { display: none !important; }
.sem-aba-plano .abas-app [data-aba="plano"] { display: none !important; }
@media (max-width: 760px) { .abas-app .rotulo-longo { display: none; } }
.plano-desde { margin-top: -4px; }
.btn-arquivo-plano { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; text-decoration: none; margin: 4px 0 12px; }
.btn-arquivo-plano small { color: var(--texto-suave); font-weight: 400; }
.plano-texto { line-height: 1.5; }
.plano-refeicao { margin: 18px 0 6px; padding-bottom: 4px; font-size: 1.05rem; color: var(--accent); border-bottom: 1px solid var(--borda); }
.plano-texto > :first-child { margin-top: 4px; }
.plano-itens { margin: 4px 0 8px; padding-left: 1.2em; display: grid; gap: 3px; }
.plano-linha { margin: 8px 0 2px; font-weight: 600; font-size: .92rem; }
.metas-do-plano { margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--fundo); display: grid; gap: 8px; }
.metas-do-plano h3 { margin: 0; font-size: .95rem; }
.metas-do-plano h3 small, .metas-plano-campos legend small { font-weight: 400; color: var(--texto-suave); }
.metas-do-plano ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.metas-do-plano li { display: flex; justify-content: space-between; gap: 8px; font-size: .92rem; }
.metas-do-plano .btn-primario { justify-self: start; }
.metas-do-plano p { margin: 0; }
.plano-acoes { margin-top: 16px; justify-content: space-between; }
.plano-acoes-vazio { margin-top: 12px; }
.plano-ocultar { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--borda); }
.plano-ocultar p { margin: 0 0 4px; }
.plano-ocultar .mini { font-size: .8rem; margin-top: 4px; }
.plano-escolha { display: grid; gap: 10px; margin-top: 12px; }
.plano-escolha .escolha-meta + .escolha-meta { background: transparent; box-shadow: none; border-width: 1px; }
.form-plano, .form-usar-metas { display: grid; gap: 12px; }
.form-plano textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; font-size: 16px; line-height: 1.45; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); color: var(--texto); }
.form-plano label small { font-weight: 400; }
.metas-plano-campos { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px 14px; margin: 0; display: grid; gap: 10px; }
.metas-plano-campos legend { font-weight: 600; padding: 0 6px; }
.metas-plano-campos .dica { margin: 0; }
.grade-metas-plano { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grade-metas-plano .campo-un { display: grid; grid-template-columns: 1fr 2.4em; align-items: center; gap: 6px; font-weight: 400; }
.grade-metas-plano input { width: 100%; min-width: 0; text-align: right; }
.check-linha { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.abas-ocultas { flex-basis: 100% !important; }
.abas-ocultas .chip { margin-left: 8px; }
.lista-pacientes .lista-dia li { flex-wrap: wrap; }
/* Plano novo da nutri ainda não aberto: bolinha na aba */
.abas-app [data-aba="plano"] { position: relative; }
.abas-app [data-aba="plano"].tem-novo::after { content: ''; position: absolute; top: 6px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--alerta); box-shadow: 0 0 0 2px var(--cartao); }
/* Plano: refeições em blocos, opções em botões, gramas em selo, + para adicionar ao dia */
.plano-bloco { padding: 4px 0 12px; }
.plano-bloco + .plano-bloco { border-top: 1px solid var(--borda); }
.plano-bloco .plano-refeicao { border-bottom: 0; margin-bottom: 8px; }
.plano-opcoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.plano-opcoes .chip[aria-selected="true"] { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }
.plano-itens:not(.simples) { list-style: none; padding: 0; gap: 6px; }
.plano-itens:not(.simples) li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--fundo); }
.plano-item-texto { flex: 1; min-width: 0; }
.plano-peso { flex-shrink: 0; font-weight: 700; font-size: .9rem; color: var(--accent); background: var(--accent-claro); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.plano-peso.estimado { font-weight: 600; color: var(--texto-suave); background: transparent; border: 1px dashed var(--borda); }
.plano-mais { flex-shrink: 0; font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.plano-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.plano-notas .plano-itens { padding-left: 1.2em; }
/* Nome de usuário (030) */
.dialogo-usuario[open] { width: min(420px, calc(100vw - 24px)); }
.form-usuario { display: grid; gap: 10px; }
.form-usuario input { font-size: 16px; }
.situacao-usuario { margin: 0; min-height: 1.4em; }
.ok-texto { color: var(--ok); font-weight: 600; }
.conta-usuario { margin: 0 0 8px; }
.tag-calculado { font-weight: 600; font-size: .72rem; color: var(--texto-suave); border: 1px dashed var(--borda); border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }

/* ---------- 5.2.0 · Programa da nutri, simulador de pontos, refeição livre ---------- */
.estilos-desafio { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.estilo-desafio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--campo); cursor: pointer; }
.estilo-desafio:has(input:checked) { border-color: var(--accent); background: var(--accent-claro); }
.estilo-desafio input { margin-top: 4px; accent-color: var(--accent); }
.estilo-desafio span { display: grid; gap: 2px; }
.estilo-desafio small { color: var(--texto-suave); }
.regra-extras { display: grid; gap: 6px; margin-top: 8px; }
.estilo-nota { margin-top: 6px; }
.btn-mini { padding: 4px 10px; font-size: .85rem; min-height: 0; }
.placar-nutri .quem small { display: block; color: var(--texto-suave); font-size: .8rem; }
.form-dar-pontos { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-claro); }
.dar-pontos-linha { display: grid; gap: 8px; grid-template-columns: minmax(70px, 90px) 1fr minmax(130px, 160px); }
@media (max-width: 480px) { .dar-pontos-linha { grid-template-columns: 1fr 1fr; } .dar-pontos-linha label:nth-child(2) { grid-column: 1 / -1; order: 3; } }
.form-mais-pessoas { display: grid; gap: 8px; margin-top: 8px; }
.foto-desafio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 2px; }
.btn-foto-desafio { cursor: pointer; }
.aviso-novo-desafio { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--ok-claro); color: var(--ok); }
.recado-desafio { margin: 6px 0; font-style: italic; }
.desafio-nutri .sair { margin-top: 8px; color: var(--texto-suave); }

.simulador { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--campo); border: 1px dashed var(--borda); }
.simulador .rotulo-campo { margin: 0; }
.sim-linha { display: grid; gap: 4px; }
.sim-linha input[type="range"] { width: 100%; accent-color: var(--accent); }
.sim-pts { font-weight: 700; color: var(--ok); font-size: .9rem; }
.sim-pts.zero { color: var(--texto-suave); font-weight: 600; }
.sim-check { display: flex; align-items: center; gap: 8px; }
.sim-check span { flex: 1; }
.sim-check small { color: var(--ok); font-weight: 700; }
.sim-total { margin: 0; font-size: 1.05rem; }
.sim-total strong { color: var(--accent); font-size: 1.3rem; }

.btn-livre { border: 1px solid var(--borda); background: var(--campo); border-radius: 999px; width: 34px; height: 34px; padding: 0; font-size: 1rem; cursor: pointer; opacity: .55; filter: grayscale(1); }
.btn-livre.ativo { opacity: 1; filter: none; border-color: var(--atencao); background: var(--atencao-claro); }
.selo-livre { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--atencao-claro); color: var(--atencao); }
.placar-caixa { min-width: 0; max-width: 100%; }
.placar-caixa .placar-nutri li { flex-wrap: wrap; }
.placar-caixa .placar-nutri .quem { min-width: 0; }
.form-dar-pontos label, .form-mais-pessoas label { display: grid; gap: 4px; min-width: 0; }
.form-dar-pontos input, .form-dar-pontos select, .form-mais-pessoas textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.form-dar-pontos select {
  font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--campo); color: var(--texto);
}
.form-desafio label.estilo-desafio:not(.aceite) { display: flex; flex-direction: row; font-weight: 400; }
.form-desafio .estilo-desafio input { width: auto; flex-shrink: 0; }
.foto-envio { display: grid; gap: 8px; padding: 12px; margin: 8px 0; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-claro); }
.foto-previa { width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; background: var(--campo); }
.rotulos-foto { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-rotulo input { position: absolute; opacity: 0; pointer-events: none; }
.chip-rotulo span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--campo); cursor: pointer; font-size: .9rem; }
.chip-rotulo input:checked + span { background: var(--accent); color: var(--sobre-accent); border-color: var(--accent); }
.chip-rotulo input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.foto-envio input[type="text"] { width: 100%; box-sizing: border-box; font-size: 16px; }
.fotos-hoje { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.fotos-hoje li { display: flex; gap: 8px; align-items: baseline; }
.fotos-hoje li > span:first-child { color: var(--texto-suave); min-width: 3em; }
.fotos-hoje li > span:nth-child(2) { flex: 1; }
.fotos-hoje li small { color: var(--ok); }
.fotos-hoje li.recusada small, .aviso-recusada { color: var(--alerta); }
.aviso-recusada { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--alerta-claro); font-size: .9rem; }
.foto-modo { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px 0 6px 28px; font-size: .9rem; }
.foto-modo input[type="number"] { width: 3.4em; padding: 4px; text-align: center; }
.form-desafio .foto-modo input[type="radio"] { width: auto; }
.dia-fotos { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.foto-nutri { margin: 0; display: grid; gap: 4px; font-size: .85rem; }
.foto-nutri img, .foto-enviada { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--campo); }
.foto-enviada { display: grid; place-items: center; color: var(--texto-suave); border: 1px dashed var(--borda); }
.foto-nutri figcaption { display: grid; gap: 2px; }
.foto-nutri.recusada img { opacity: .4; filter: grayscale(1); }
.aviso-sem-data { color: var(--atencao); }
.fotos-pessoa + .fotos-pessoa { margin-top: 12px; }
.modo-desafio { margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--campo); font-size: .9rem; }
.modo-desafio.modo-raiz { border-color: var(--alerta); background: var(--alerta-claro); }
.modo-desafio.modo-leve { border-color: var(--ok); background: var(--ok-claro); }
.modo-desafio .modo-titulo { margin: 0 0 4px; }
.modo-desafio ul { margin: 0 0 4px; padding-left: 18px; }
.aviso-modo { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--atencao-claro); color: var(--texto); }
.modos-desafio { display: grid; gap: 8px; }
.form-desafio .modos-desafio label.estilo-desafio:not(.aceite) { display: flex; flex-direction: row; font-weight: 400; }
.modos-desafio .estilo-desafio span small { display: block; }
.dialogo-camera { width: min(520px, calc(100vw - 16px)); max-width: none; padding: 14px; }
.dialogo-camera[open] { display: grid; gap: 10px; }
.cam-video { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 62vh; }
.cam-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-acoes { display: flex; gap: 8px; align-items: center; }
.cam-acoes .btn-primario { flex: 1; }
.checklist-fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.checklist-fotos .dica { flex-basis: 100%; }
.item-checklist { padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--borda); font-size: .85rem; color: var(--texto-suave); }
.item-checklist.feito { border-style: solid; border-color: var(--ok); background: var(--ok-claro); color: var(--ok); }
.exigidas-form { flex-basis: 100%; display: grid; gap: 6px; }
.reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.reacao { border: 1px solid var(--borda); background: var(--campo); border-radius: 999px; padding: 2px 8px; font-size: .9rem; cursor: pointer; }
.reacao.minha { border-color: var(--accent); background: var(--accent-claro); }
.reacao small { font-weight: 700; color: var(--texto); }
.comentarios { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: .82rem; }
.comentarios li { line-height: 1.35; }
.comentarios .btn-link { padding: 0 4px; }
.form-comentario { display: flex; gap: 4px; margin-top: 4px; }
.form-comentario input { flex: 1; min-width: 0; font-size: 16px; padding: 6px 8px; }
.mudar-regras form { margin-top: 8px; }
.form-desafio .mudar-regras label.estilo-desafio:not(.aceite), .mudar-regras label.estilo-desafio { display: flex; flex-direction: row; font-weight: 400; }
.mudar-regras .estilo-desafio span small { display: block; }
.mudar-regras input[type="radio"] { width: auto; }
.mural .grade-fotos { grid-template-columns: 1fr; gap: 18px; }
.mural .foto-nutri { min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.mural .foto-nutri img { aspect-ratio: 4 / 3; max-height: 420px; }
.grade-fotos > * { min-width: 0; }
.aviso-notificacoes { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  width: min(440px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--accent);
  box-shadow: var(--sombra-forte); display: grid; gap: 6px; }
.aviso-notificacoes p { margin: 0; }
.aviso-notificacoes .erro:empty { display: none; }
.form-criar-paciente { display: grid; gap: 8px; }
.form-criar-paciente label { display: grid; gap: 4px; font-weight: 600; }
.form-criar-paciente input { font-size: 16px; }
.resultado-paciente { display: grid; gap: 8px; margin: 10px 0; padding: 12px; border-radius: 12px; border: 1px solid var(--ok); background: var(--campo); }
.resultado-paciente .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.resultado-paciente a.btn-primario { text-decoration: none; }
.senha-provisoria { font-family: ui-monospace, monospace; font-size: 1.1rem; letter-spacing: .04em; }
.conta-notificacoes .aceite small { display: block; color: var(--texto-suave); }
.cartao-parceira { border-style: dashed; background: var(--campo); }
.parceira-corpo { display: grid; gap: 6px; font-size: .95rem; }
.parceira-corpo p { margin: 0; }
.parceira-corpo .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.codigo-parceira { font-family: ui-monospace, monospace; letter-spacing: .06em; color: var(--accent); }
.modo-nutri .cartao-parceira, .vendo-outra .cartao-parceira { display: none !important; }
.conferir-codigo form { display: flex; gap: 8px; flex-wrap: wrap; }
.conferir-codigo input { flex: 1; min-width: 160px; font-size: 16px; }
.lembrete-agua { display: grid; gap: 6px; margin-top: 4px; }
.agua-campos { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-left: 26px; }
.agua-campos label { display: flex; align-items: center; gap: 6px; }
.agua-campos select { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 10px; background: var(--campo); color: var(--texto); }
.agua-campos .conta-agua { flex-basis: 100%; }

/* ---------- 5.2.0 · Reorganização: Mural, Desafios enxuto, Plano fora da barra ---------- */
/* Aba Mural */
.aba-mural { display: none; max-width: 560px; margin: 0 auto; width: 100%; }
.na-aba-mural .aba-mural { display: block; }
.na-aba-mural > :not(.abas-app):not(.aba-mural):not(.aviso):not(dialog) { display: none !important; }
.modo-nutri .abas-app [data-aba="mural"] { display: none !important; }
#mural { display: grid; gap: 12px; }
#mural h2 { margin: 0; }
.btn-postar { width: 100%; }
.feed { display: grid; gap: 22px; }
.post { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
.post:last-child { border-bottom: 0; }
.post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--campo); }
.post-quem, .post-legenda { margin: 0; }
.post-legenda { font-size: .95rem; }
.comentarios-post summary { cursor: pointer; color: var(--texto-suave); font-size: .9rem; list-style: none; }
.comentarios-post summary::-webkit-details-marker { display: none; }
.comentarios-post[open] summary { margin-bottom: 6px; }
.apagar-post { justify-self: start; font-size: .85rem; }
.vazio-mural { text-align: center; padding: 24px 8px; }

/* Plano: sem botão na barra no celular (fica no menu e no cartão do Meu dia); a nutri mantém */
@media (max-width: 600px) { :not(.modo-nutri) > .abas-app [data-aba="plano"] { display: none !important; } }
.cartao-plano { position: relative; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--cartao); box-shadow: var(--sombra); }
.corpo-cartao-plano { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  padding: 12px 14px; border: 0; background: none; border-radius: var(--raio); }
.convite-plano { border-color: var(--accent); background: var(--accent-claro); }
.convite-plano .corpo-cartao-plano { padding-right: 40px; }
.fechar-convite-plano { position: absolute; top: 4px; right: 4px; }
.cartao-plano[hidden] { display: none; }
.cartao-plano .icone-plano { font-size: 1.4rem; }
.cartao-plano .texto-plano { flex: 1; display: grid; }
.cartao-plano small { color: var(--texto-suave); }
.cartao-plano .seta { font-size: 1.4rem; color: var(--accent); }
.selo-novo { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--sobre-accent); font-size: .75rem; font-weight: 700; }
.modo-nutri .cartao-plano { display: none !important; }

/* Pontos: resumo em 2 linhas */
.resumo-pontos { display: flex; align-items: center; gap: 12px; }
.resumo-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.resumo-info p { margin: 0; }
.barra.fina { height: 6px; }
.resumo-numeros { display: flex; gap: 12px; text-align: center; }
.resumo-numeros span { display: grid; }
.resumo-numeros strong { font-size: 1.15rem; color: var(--accent); }
.resumo-numeros small { color: var(--texto-suave); font-size: .75rem; }
.como-pontos { justify-self: start; text-align: left; }
#pontos { display: grid; gap: 10px; }
#pontos .sequencia { margin: 0; }

/* Desafio: posição, hoje, ranking curto */
.aba-conquistas #desafio { order: 0; }
.aba-conquistas #pontos { order: -1; }
.nome-desafio { margin: 0; font-size: 1.1rem; }
.selo-modo { font: inherit; font-size: .85rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--campo); cursor: pointer; white-space: nowrap; }
.selo-modo.modo-raiz { border-color: var(--alerta); background: var(--alerta-claro); color: var(--alerta); }
.selo-modo.modo-leve { border-color: var(--ok); background: var(--ok-claro); color: var(--ok); }
.posicao { margin: 8px 0 0; font-size: 1.05rem; }
.posicao + .dica { margin: 2px 0 0; }
.hoje-desafio { display: grid; gap: 6px; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--campo); border: 1px solid var(--borda); }
.hoje-desafio .rotulo-campo { margin: 0; }
.hoje-desafio .checklist-fotos { margin: 0; }
.hoje-desafio .btn-foto-desafio { justify-self: start; }
.ranking-curto li.pulo { justify-content: center; color: var(--texto-suave); padding: 0; min-height: 0; background: none; }
.mais-opcoes { margin-top: 10px; }
.mais-opcoes[open] { display: grid; gap: 8px; }
.chips-desafios { margin-bottom: 8px; }

/* Janela que sobe de baixo (regras, ranking completo, "como ganho pontos") */
.dialogo-folha { width: min(560px, 100vw); max-width: none; max-height: 88vh; padding: 0; overflow: hidden; }
.dialogo-folha[open] { display: flex; flex-direction: column; }
.dialogo-folha .cabeca-novidades { padding: 14px 16px 8px; }
.dialogo-folha .corpo-folha { overflow-y: auto; padding: 0 16px 20px; display: grid; gap: 12px; }
@media (max-width: 600px) {
  .dialogo-folha { margin: auto 0 0; width: 100vw; border-radius: 20px 20px 0 0; max-height: 85vh; padding-bottom: env(safe-area-inset-bottom); }
}
.regras-curtas { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .95rem; }
.pontos-sim .simulador { margin-top: 0; }

/* ---------- 5.2.0 · Desafios = cabeçalho + lista de cartões recolhíveis ---------- */
.ajuda { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--sobre-accent);
  font-size: .8rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
.btn-ajuda { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent);
  background: none; border: 0; padding: 4px 0; cursor: pointer; }
.acoes-cabecalho { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acoes-cabecalho button { padding-left: 8px; padding-right: 8px; }
.aba-conquistas #desafio, .aba-conquistas #desafio-nutri { background: none; border: 0; box-shadow: none; padding: 0; display: grid; gap: 10px; }
.titulo-lista-desafios { margin: 4px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.cartao-desafio { border-radius: var(--raio); border: 1px solid var(--borda); background: var(--cartao); box-shadow: var(--sombra); }
.cartao-desafio > summary { display: grid; gap: 4px; padding: 14px 40px 14px 16px; cursor: pointer; list-style: none; position: relative; }
.cartao-desafio > summary::-webkit-details-marker { display: none; }
.cartao-desafio > summary::after { content: '›'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--accent); transition: transform .15s; }
.cartao-desafio[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
.cd-nome { font-weight: 700; font-size: 1.05rem; }
.cd-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cd-pos { font-weight: 700; color: var(--accent); }
.cartao-desafio .selo-modo { cursor: default; }
.corpo-desafio { padding: 0 16px 16px; display: grid; gap: 8px; }
.corpo-desafio .hoje-desafio { margin: 0; }
.corpo-desafio .falta-pts, .corpo-desafio > .dica { margin: 0; }
.links-desafio { display: flex; flex-wrap: wrap; gap: 12px; }
.cartao-desafio .mais-opcoes { margin-top: 0; }
/* Balão da nutricionista parceira (topo) */
.btn-balao { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao);
  font-size: 1.2rem; cursor: pointer; box-shadow: var(--sombra); position: relative; }
.btn-balao::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.btn-balao[hidden] { display: none; }
@media (max-width: 600px) { .btn-balao { margin-right: 6px; } }
.dialogo-balao { width: min(380px, calc(100vw - 32px)); max-width: none; padding: 20px; margin: 72px 16px auto auto; position: fixed; }
.dialogo-balao[open] { display: grid; gap: 10px; }
.dialogo-balao p { margin: 0; }
.balao-titulo { font-weight: 700; font-size: 1.1rem; color: var(--accent); padding-right: 28px; }
.fechar-balao { position: absolute; top: 8px; right: 8px; }
/* Ajuda e sugestões */
.dialogo-ajuda .form-ajuda { display: grid; gap: 8px; }
.dialogo-ajuda textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--campo); color: var(--texto); }
.dialogo-ajuda .erro.ok { color: var(--ok); }
.lista-ajuda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-ajuda li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--campo); display: grid; gap: 4px; }
.lista-ajuda p { margin: 0; }
.resposta-ajuda { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--ok-claro); }
.aguardando { color: var(--atencao); }
.btn-ajuda-topo { font: inherit; font-size: 1.05rem; background: none; border: 0; cursor: pointer; }
.btn-ajuda-topo[hidden] { display: none; }
.adm-lista-msg { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.adm-msg { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--campo); }
.adm-msg p { margin: 0; }
.adm-msg.atrasando { border-color: var(--alerta); }
.adm-form-resposta { display: grid; gap: 6px; }
.adm-form-resposta textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 8px; border-radius: 10px; border: 1px solid var(--borda); }
.adm-form-resposta button { justify-self: start; }
/* Desafios: uma coluna só, centralizada, também no computador */
.aba-conquistas { grid-template-columns: minmax(0, 640px); justify-content: center; }
.cartao-desafio.terminado { padding: 14px 16px; display: grid; gap: 6px; }
.cartao-desafio.terminado .dica, .cartao-desafio.terminado .podio-frase { margin: 0; }
.links-desafio { align-items: center; }
/* "Como ganho pontos": 3 passos + exemplo antes do simulador */
.passos-pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passos-pontos li { display: flex; gap: 10px; align-items: flex-start; }
.passos-pontos .num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--sobre-accent); font-weight: 700; }
.passos-pontos div { display: grid; gap: 2px; }
.passos-pontos small { color: var(--texto-suave); font-size: .9rem; line-height: 1.4; }
.exemplo-pontos { padding: 10px 12px; border-radius: 12px; background: var(--ok-claro); }
.exemplo-pontos p { margin: 0; }
.total-exemplo { margin-top: 4px !important; font-size: 1.05rem; color: var(--ok); }
.btn-convidar.carregando { opacity: .6; pointer-events: none; }
.convite-unico { display: grid; gap: 6px; }
.convite-unico .btn-link { justify-self: start; }
/* Marca da nutricionista */
.form-marca { display: grid; gap: 8px; }
.marca-linha { display: flex; gap: 14px; align-items: center; }
.marca-logo { width: 88px; height: 88px; flex-shrink: 0; border-radius: 50%; border: 2px dashed var(--borda); background: var(--campo); cursor: pointer;
  display: grid; place-items: center; overflow: hidden; text-align: center; color: var(--texto-suave); font-size: .85rem; }
.marca-logo img { width: 100%; height: 100%; object-fit: cover; }
.marca-nome { flex: 1; display: grid; gap: 4px; font-weight: 600; }
.marca-nome { min-width: 0; }
.marca-nome input { font-size: 16px; width: 100%; min-width: 0; box-sizing: border-box; }

/* Ranking surpresa (037) e modo do ranking no placar da nutri */
.aviso-surpresa { margin: 6px 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-claro); font-size: .92rem; }
.aviso-surpresa.forte { display: grid; gap: 4px; padding: 14px 16px; border: 2px dashed var(--accent); text-align: center; font-size: 1rem; }
.aviso-surpresa.forte strong { font-size: 1.15rem; }
.ranking-nutri { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between; margin: 10px 0; }
.ranking-nutri label { display: grid; gap: 4px; flex: 1 1 200px; min-width: 0; }
.ranking-nutri small { color: var(--ok, #2e7d32); }

/* ===== 5.2.0: ranking colorido (bolinha com a cor da pessoa; 1º/2º/3º em ouro, prata e bronze) ===== */
.avatar-rk { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--cor, var(--accent)); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 0 0 2px var(--cartao); }
.ranking li { padding: 8px 10px; border-bottom: 0; border-radius: 12px; }
.ranking li:nth-child(even):not(.top1):not(.top2):not(.top3):not(.eu):not(.pulo) { background: var(--campo); }
.ranking li.pulo, .placar-nutri li.pulo { background: none; justify-content: center; padding: 0; color: var(--texto-suave); }
.ranking li.top1, .placar-nutri li.top1 { background: linear-gradient(90deg, rgba(255, 196, 46, .32), rgba(255, 196, 46, .08)); }
.ranking li.top2, .placar-nutri li.top2 { background: linear-gradient(90deg, rgba(150, 168, 196, .34), rgba(150, 168, 196, .08)); }
.ranking li.top3, .placar-nutri li.top3 { background: linear-gradient(90deg, rgba(205, 127, 50, .30), rgba(205, 127, 50, .07)); }
.ranking li.eu, .placar-nutri li.eu { box-shadow: inset 0 0 0 2px var(--accent); }
.ranking li.top1 .pos, .ranking li.top2 .pos, .ranking li.top3 .pos { font-size: 1.15rem; }
.ranking { display: grid; gap: 4px; }

/* ===== Mural: cabeçalho do post com lixeira, emojis no comentário ===== */
.post-topo { display: flex; align-items: center; gap: 10px; }
.post-topo .post-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.post-topo .post-quem .dica { font-size: .8rem; margin: 0; }
.btn-lixeira { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda); background: var(--cartao);
  display: inline-grid; place-items: center; cursor: pointer; color: var(--texto-suave); padding: 0; }
.btn-lixeira:hover, .btn-lixeira:focus-visible { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-claro); }
.btn-lixeira.mini { width: 26px; height: 26px; border: 0; background: none; vertical-align: middle; margin-left: 2px; }
.icone-lixeira { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-lixeira.mini .icone-lixeira { width: 15px; height: 15px; }
.btn-emoji { flex-shrink: 0; width: 38px; border: 1px solid var(--borda); background: var(--campo); border-radius: 10px; font-size: 1.15rem; cursor: pointer; padding: 0; }
.btn-emoji[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-claro); }
.emojis-comentario { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-top: 6px; padding: 6px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); }
.emojis-comentario[hidden] { display: none; }
.emojis-comentario button { border: 0; background: none; font-size: 1.35rem; padding: 4px 0; border-radius: 8px; cursor: pointer; }
.emojis-comentario button:hover, .emojis-comentario button:focus-visible { background: var(--accent-claro); }

/* ===== Modo manutenção (038) ===== */
.faixa-manutencao { position: sticky; top: 0; z-index: 101; background: #3A2A30; color: #FFD36E; font-weight: 600; font-size: .85rem; text-align: center; padding: 6px 16px; }
.manutencao { text-align: center; }
.icone-manutencao { font-size: 3rem; margin: 0; }
.aviso-manutencao { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--alerta-claro); color: var(--alerta); font-weight: 600; text-align: center; }
.aviso-manutencao[hidden] { display: none; }
.adm-manutencao.ligada { border: 2px solid var(--alerta); }
.adm-manutencao form { display: grid; gap: 8px; }
.adm-manutencao h2 .status { vertical-align: middle; }

/* ===== Foto da refeição (Meu dia) e destinos da foto ===== */
.foto-refeicao { display: grid; gap: 8px; }
.foto-refeicao .foto-previa { max-height: 260px; width: 100%; object-fit: cover; border-radius: 12px; }
.destinos-foto { display: grid; gap: 6px; }
.destino { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--campo); cursor: pointer; font-weight: 400; }
.destino:has(input:checked) { border-color: var(--accent); background: var(--accent-claro); }
.destino input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.destino span { display: grid; gap: 2px; }
.destino small { color: var(--texto-suave); font-size: .82rem; }
.atalhos-foto { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.aviso-48h { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--accent-claro); font-size: .9rem; }
.ver-mais-fotos { width: 100%; margin-top: 12px; }
.post img:not([src]) { min-height: 180px; }
.post.sem-imagem img { display: none; }
.destinos-foto > label.destino, .foto-revisao .destinos-foto > label.destino { display: flex; flex-direction: row; align-items: flex-start; }
.destinos-foto > label.destino > input { flex-shrink: 0; }
.lista-liberados { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; margin-top: 6px; }
.lista-liberados label[hidden] { display: none; }
.liberados-manutencao { display: grid; gap: 6px; }
.montando-ranking { display: grid; place-items: center; aspect-ratio: 9 / 16; max-height: 58vh; border-radius: 12px; background: var(--accent-claro); color: var(--texto-suave); gap: 10px; align-content: center; }
.montando-ranking[hidden], .previa-ranking[hidden] { display: none; }
.lista-pacientes .lista-dia li .item-info { flex: 1 1 100%; min-width: 0; }
.lista-pacientes .lista-dia li .item-info small { overflow-wrap: anywhere; }
.regra-extras .extras-explica { display: none; }
.regra-extras:has([name="regra_extras"]:checked) .extras-explica { display: grid; gap: 4px; margin-top: 6px; }
/* Nutri: partes da aba Pacientes (Pacientes · Desafios · Mais) */
.sub-nutri { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--campo); border: 1px solid var(--borda); position: sticky; top: 6px; z-index: 5; }
.sub-nutri button { flex: 1; border: 0; background: none; padding: 10px 8px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.sub-nutri button[aria-current="true"] { background: var(--accent); color: var(--sobre-accent); }
.aba-pacientes section[hidden] { display: none !important; }
.adicionar-paciente > details > summary { list-style: none; display: block; text-align: center; cursor: pointer; }
.adicionar-paciente > details > summary::-webkit-details-marker { display: none; }
.adicionar-paciente > details[open] > summary { margin-bottom: 12px; }
/* Nutri que só acompanha: sem as abas da própria alimentação, a não ser vendo um paciente */
.sub-nutri { position: static; }
.sub-nutri button { white-space: nowrap; font-size: .9rem; padding: 10px 4px; }
.uso-nutri label.estilo-desafio { display: flex; flex-direction: row; font-weight: 400; }
.uso-nutri .estilo-desafio span small { display: block; }
.meta-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meta-form input[name="meta_texto"] { flex: 1 1 100%; min-width: 0; }

/* ===== 5.2.0: topo enxuto também no computador: nome do app + balão + bolinha (menu com o resto) ===== */
.topo-painel { position: relative; flex-wrap: nowrap; }
.btn-menu {
  display: inline-flex; position: relative; padding: 0; border: 0; background: none; cursor: pointer;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent); color: var(--sobre-accent);
  font: 700 1.1rem 'Bricolage Grotesque', sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
/* Bolinha de aviso: novidades não vistas ou contas aguardando aprovação */
.topo-painel:has(.btn-novidades.nao-vista, .adm-contador:not([hidden])) .btn-menu::after {
  content: ''; position: absolute; top: 0; right: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--alerta); border: 2px solid var(--fundo);
}
.topo-painel .usuario { display: none; }
.topo-painel.menu-aberto .usuario {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  position: absolute; z-index: 30; top: calc(100% - 6px); right: 16px; width: min(280px, calc(100vw - 32px));
  padding: 8px; border-radius: 16px; background: var(--cartao); border: 1px solid var(--borda);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}
.topo-painel .usuario .so-menu { display: inline; }
.topo-painel .usuario > button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 12px; margin: 0;
  border: 0; border-radius: 10px; background: none; color: var(--texto); text-decoration: none;
  font: inherit; font-size: .95rem; font-weight: 500; text-align: left; cursor: pointer;
}
.topo-painel .usuario > button:hover, .topo-painel .usuario > button:active { background: var(--accent-claro); }
.topo-painel .usuario > button[hidden] { display: none; }
/* O nome (Minha conta) vem primeiro, em destaque, com o nível ao lado */
.topo-painel .usuario .nome-usuario { order: -2; font-weight: 700; color: var(--accent); }
.topo-painel .usuario #selo-nivel-topo { order: -1; padding: 0 12px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.topo-painel .usuario .btn-sair { border-top: 1px solid var(--borda); border-radius: 0 0 10px 10px; margin-top: 4px; color: var(--texto-suave); }
.topo-painel .usuario .btn-novidades.nao-vista::after { position: static; margin-left: auto; }
.topo-painel .usuario #selo-nivel-topo { display: block; }
/* Medalha do nível na bolinha (no lugar do "Prata" escrito no topo) */
.btn-menu .avatar-nivel { position: absolute; right: -4px; bottom: -4px; }
.btn-menu .avatar-nivel[hidden] { display: none; }
.btn-menu .avatar-nivel .medalha.mini { width: 20px; height: 20px; font-size: .62rem; box-shadow: 0 0 0 2px var(--fundo); }
/* Foto de perfil na bolinha */
.avatar.com-foto { background-size: cover; background-position: center; color: transparent; }
.foto-perfil-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foto-perfil-previa { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--sobre-accent); display: grid; place-items: center;
  font: 700 1.3rem 'Bricolage Grotesque', sans-serif; background-size: cover; background-position: center; flex-shrink: 0; }
/* Como utilizar */
.dialogo-como-usar[open] { display: grid; gap: 14px; width: min(420px, calc(100vw - 24px)); padding: 22px; text-align: center; }
.como-usar-emoji { font-size: 3rem; margin: 0; }
.como-usar-corpo h2 { margin: 6px 0; }
.como-usar-corpo p { line-height: 1.5; }
.como-usar-pontos { display: flex; justify-content: center; gap: 6px; }
.como-usar-pontos span { width: 8px; height: 8px; border-radius: 50%; background: var(--borda); }
.como-usar-pontos span.ativo { background: var(--accent); width: 22px; border-radius: 999px; }
.dialogo-como-usar .acoes { justify-content: space-between; }
.dialogo-como-usar .acoes [hidden] { display: none; }
/* Balão da parceira: do tamanho do conteúdo (no iPhone esticava até o fim da tela) */
.dialogo-balao { inset: auto; top: 72px; right: 16px; margin: 0; height: fit-content; max-height: calc(100dvh - 96px); overflow-y: auto; }
.dialogo-balao[open] { align-content: start; gap: 12px; }
/* ===== Área da nutricionista: barra própria embaixo; a do app normal some ===== */
.abas-nutri { display: none !important; }
.modo-nutri .abas-app:not(.abas-nutri) { display: none !important; }
.modo-nutri .abas-nutri { display: flex !important; }
.abas-nutri button { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .abas-nutri button { flex-direction: column; gap: 3px; } }
/* Paciente aberto: nome em cima + Registros · Evolução · Plano */
.modo-nutri.vendo-outra > #vendo-paciente:not([hidden]) { display: grid !important; }
#vendo-paciente { gap: 10px; }
.vendo-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vendo-nome { font-size: 1.1rem; }
.vendo-abas { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--campo); border: 1px solid var(--borda); }
.vendo-abas button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.vendo-abas button[aria-selected="true"] { background: var(--accent); color: var(--sobre-accent); }
/* Nutri que também usa para si: faixa "Área da nutricionista · ← Voltar ao meu app" */
.volta-app { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--accent-claro); font-weight: 600; }
.volta-app[hidden] { display: none; }
/* Menu: bolinha grande com lápis (troca a foto) no topo do menu */
.topo-painel .usuario > .menu-perfil { order: -3; position: relative; width: auto; align-self: center; justify-content: center; padding: 6px; background: none; }
.menu-perfil .avatar-menu { display: inline-flex; width: 64px; height: 64px; font-size: 1.6rem; box-shadow: none; }
.menu-perfil .lapis-foto { position: absolute; right: calc(50% - 36px); bottom: 4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cartao); border: 1px solid var(--borda); display: grid; place-items: center; font-size: .85rem; color: var(--accent); }
.topo-painel .usuario .nome-usuario { justify-content: center; }
/* ===== 📷 Conferir fotos (nutri) ===== */
.abas-nutri button { position: relative; }
.contador-fotos { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--alerta); color: #fff; font-size: .68rem; font-weight: 700; display: inline-grid; place-items: center; }
.contador-fotos[hidden] { display: none; }
.fotos-conferir .chips { margin: 4px 0; }
.fila-fotos { display: grid; gap: 8px; margin-top: 8px; }
.paciente-fotos { border: 1px solid var(--borda); border-radius: 14px; background: var(--campo); }
.paciente-fotos > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 14px; cursor: pointer; align-items: center; }
.paciente-fotos > summary::-webkit-details-marker { display: none; }
.paciente-fotos .pf-nome { min-width: 0; overflow-wrap: anywhere; }
.paciente-fotos .pf-info { grid-column: 1; font-size: .82rem; color: var(--texto-suave); }
.paciente-fotos .status { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
.paciente-fotos[open] { background: var(--cartao); border-color: var(--accent); }
.pf-corpo { padding: 0 14px 14px; display: grid; gap: 6px; }
.grade-conferir { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.foto-conferir { margin: 0; display: grid; gap: 2px; }
.foto-conferir .foto-ampliar { padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto-conferir img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.foto-conferir figcaption { display: grid; font-size: .75rem; color: var(--texto-suave); }
.foto-conferir figcaption .btn-link { justify-self: start; padding: 2px 0; font-size: .78rem; }
.foto-conferir.recusada img { opacity: .35; filter: grayscale(1); }
.pf-corpo .acoes { justify-content: stretch; }
.pf-corpo .acoes .btn-primario { flex: 1; }
.dialogo-foto-grande[open] { display: grid; padding: 8px; width: min(560px, calc(100vw - 16px)); max-width: none; }
.dialogo-foto-grande img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; }
.dialogo-foto-grande [data-fechar] { justify-self: end; }
/* Endereço novo (crnutri.crsol.com.br) */
.aviso-endereco { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-claro); font-size: .9rem; line-height: 1.45; }
.dialogo-endereco[open] { display: grid; gap: 10px; width: min(420px, calc(100vw - 24px)); padding: 22px; }
.dialogo-endereco h2, .dialogo-endereco .como-usar-emoji { text-align: center; margin: 0; }
.passos-endereco { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.dialogo-endereco .acoes { justify-content: space-between; flex-wrap: wrap; }
.dialogo-endereco { max-height: calc(100dvh - 32px); overflow-y: auto; }