/* Primeiras Comidinhas — mobile-first */
:root {
  --coral: #e07a5f;
  --coral-escuro: #c9603f;
  --verde: #81b29a;
  --verde-escuro: #5e8f77;
  --creme: #fdf6ec;
  --amarelo: #f4d58d;
  --marrom: #3d2c29;
  --cinza: #7a6f6b;
  --branco: #ffffff;
  --sombra: 0 2px 8px rgba(61, 44, 41, .10);
  --raio: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* garante que [hidden] vença qualquer display definido em classes (ex.: .tela-auth flex) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--creme);
  color: var(--marrom);
  line-height: 1.55;
}

/* espaço para a nav inferior — só no app do paciente */
#app-paciente { padding-bottom: 76px; }

/* ── Topo ── */
.topo {
  background: var(--branco);
  color: var(--marrom);
  padding: 10px 16px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--sombra);
  border-bottom: 3px solid var(--coral);
}
.topo-titulo { display: flex; align-items: center; gap: 10px; }
.logo { font-size: 1.5rem; }
.topo h1 { font-size: 1.25rem; font-weight: 700; }

/* logo no header */
.logo-topo-wrap { display: flex; align-items: center; line-height: 0; }
.logo-topo { height: 58px; width: auto; display: block; }

/* Faixa etária: vem da data de nascimento cadastrada pela nutri. Informativo,
   não clicável — a família não escolhe o perfil. */
.faixa-atual { margin-top: 10px; }
.faixa-atual-chip {
  background: #f4eee2;
  color: var(--cinza);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
}
.faixa-atual-chip b { color: var(--coral); }
.faixa-atual-aviso {
  margin: 8px 0 0;
  padding: 9px 12px;
  background: #fff6e6;
  border-left: 3px solid var(--coral);
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--cinza);
}

/* ── Conteúdo ── */
.conteudo { padding: 16px; max-width: 720px; margin: 0 auto; }

.secao-titulo { font-size: 1.15rem; margin: 18px 0 10px; display: flex; align-items: center; gap: 6px; }
.secao-sub { color: var(--cinza); font-size: .92rem; margin-bottom: 12px; }

.cartao {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.aviso {
  background: #fff3e6;
  border-left: 4px solid var(--amarelo);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .88rem;
  margin: 12px 0;
}

.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.tag-alergenico { background: #fde2e2; color: #b3261e; }
.tag-faixa { background: #e5f0ea; color: var(--verde-escuro); }

/* ── Busca e filtros ── */
.busca {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid #e8ded2;
  border-radius: var(--raio);
  font-size: 1rem;
  background: var(--branco);
  margin-bottom: 10px;
}
.busca:focus { outline: none; border-color: var(--coral); }

.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.chip {
  white-space: nowrap;
  border: 1.5px solid #e0d5c8;
  background: var(--branco);
  color: var(--marrom);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .85rem;
  cursor: pointer;
}
.chip.ativo { background: var(--verde); border-color: var(--verde); color: var(--branco); font-weight: 600; }

/* ── Alimento: avatar + pictograma de corte ── */
.alimento-topo { gap: 10px; }
.alimento-avatar { flex-shrink: 0; width: 48px; height: 48px; display: flex; }
.alimento-avatar svg { display: block; }
.alimento-nome { flex: 1; min-width: 0; }
.corte-pic {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 64px;
  padding: 4px 2px;
  background: #f4eee2;
  border-radius: 10px;
}
.corte-pic small { font-size: .62rem; font-weight: 600; color: var(--verde-escuro); line-height: 1.1; text-align: center; }

/* ── Acordeão (alimento / receita) ── */
.acordeao { border: none; background: none; width: 100%; text-align: left; cursor: pointer; }
.acordeao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--marrom); }
.acordeao-topo .seta { transition: transform .2s; color: var(--cinza); }
.cartao.aberto .seta { transform: rotate(180deg); }
.acordeao-corpo { display: none; margin-top: 10px; font-size: .92rem; }
.cartao.aberto .acordeao-corpo { display: block; }

.detalhe { margin-bottom: 8px; }
.detalhe b { color: var(--coral-escuro); }

/* ── Gerador de cardápio ── */
.btn-gerar {
  width: 100%;
  border: none;
  background: var(--coral);
  color: var(--branco);
  font-size: 1.02rem;
  font-weight: 700;
  padding: 13px 0;
  border-radius: var(--raio);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: background .15s, transform .08s;
}
.btn-gerar:hover { background: var(--coral-escuro); }
.btn-gerar:active { transform: scale(.98); }

.btn-historico {
  width: 100%; margin-top: 10px;
  border: 1.5px solid #e8ded2; background: var(--branco); color: var(--marrom);
  font-size: .92rem; font-weight: 700; padding: 11px 0; border-radius: var(--raio);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-historico:hover { border-color: var(--verde); background: #f6faf7; }

.menu-vazio { text-align: center; color: var(--cinza); margin-top: 14px; }
.menu-vazio-emoji { font-size: 2.4rem; display: block; margin-bottom: 6px; }
.menu-vazio p { font-size: .9rem; }

.menu-resultado { margin-top: 14px; animation: menu-surge .3s ease-out; }
@keyframes menu-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.menu-ref { border-left: 6px solid var(--verde); padding: 0; overflow: hidden; }
.menu-ref-cab {
  background: #e5f0ea;
  color: var(--verde-escuro);
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 16px;
}
.menu-slot {
  display: flex;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px dashed #eee3d5;
}
.menu-slot:last-of-type { border-bottom: none; }
.menu-slot-rot { min-width: 108px; font-size: .78rem; font-weight: 700; color: var(--cinza); flex-shrink: 0; }
.menu-slot-val { font-size: .92rem; color: var(--marrom); }
.menu-extra { padding: 8px 16px 12px; font-size: .8rem; color: var(--verde-escuro); }

/* ── Pratinho visual ── */
.prato-wrap { display: flex; flex-direction: column; align-items: center; margin: 16px 0; }
.prato {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: conic-gradient(
    var(--amarelo) 0 33%,
    #a3623b 33% 50%,
    var(--coral) 50% 67%,
    var(--verde) 67% 100%
  );
  border: 10px solid var(--branco);
  box-shadow: var(--sombra), inset 0 0 0 3px rgba(255,255,255,.5);
}
.legenda { margin-top: 14px; width: 100%; }
.legenda-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eee3d5; font-size: .9rem; }
.legenda-item:last-child { border-bottom: none; }
.legenda-cor { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; margin-top: 3px; }

/* ── Listas simples ── */
.lista-simples { list-style: none; }
.lista-simples li { padding: 7px 0 7px 24px; position: relative; font-size: .92rem; border-bottom: 1px dashed #eee3d5; }
.lista-simples li:last-child { border-bottom: none; }
.lista-simples li::before { content: "•"; color: var(--coral); font-weight: 700; position: absolute; left: 8px; }

.evitar-item b { color: #b3261e; }

/* ── Navegação inferior ── */
.nav-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--branco);
  display: flex;
  box-shadow: 0 -2px 10px rgba(61,44,41,.12);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
}
.nav-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 8px 2px 7px;
  font-size: .68rem;
  color: var(--cinza);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}
.nav-btn span { font-size: 1.25rem; }
.nav-btn.ativo { color: var(--coral-escuro); }
.nav-icone { position: relative; display: inline-block; }
/* badge estilo WhatsApp: quadrado arredondado vermelho, contorno branco,
   número branco em negrito, sobreposto ao canto superior direito do ícone */
.nav-badge {
  /* canto superior direito do ícone, fora dele — mesmo padrão do card */
  position: absolute; top: -6px; right: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px;
  background: #f5352c; color: #fff; font-size: .55rem; font-weight: 700;
  line-height: 1; letter-spacing: 0; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--branco), 0 1px 2px rgba(0,0,0,.18);
  font-variant-numeric: tabular-nums;
}

/* ── Telas maiores ── */
@media (min-width: 720px) {
  .topo { padding: 16px 24px; }
  .topo-titulo { max-width: 720px; margin: 0 auto; }
  .faixa-atual { max-width: 720px; margin: 10px auto 0; }
  .nav-btn { font-size: .78rem; }
}

/* ── Tela de login / cadastro ── */
.tela-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, var(--coral) 0%, var(--coral-escuro) 100%);
}
.auth-cartao {
  background: var(--branco);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(61, 44, 41, .28);
  padding: 28px 22px 24px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.logo-grande { font-size: 2.6rem; display: block; margin-bottom: 4px; }
.auth-titulo { font-size: 1.4rem; font-weight: 700; color: var(--marrom); }

/* logo no cartão de login — entrada + balanço suave */
.logo-login {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: -6px auto 2px;
  animation: pc-balancar 4s ease-in-out infinite;
}
.auth-cartao { animation: pc-surgir .45s ease-out both; }
.auth-cartao .selo-nutri { margin-bottom: 4px; }

@keyframes pc-surgir {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes pc-balancar {
  0%, 100% { transform: rotate(-1.3deg); }
  50%      { transform: rotate(1.3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-cartao, .logo-login { animation: none; }
}
.auth-sub { color: var(--cinza); font-size: .9rem; margin: 8px 0 18px; }
.auth-sub code { background: #f4eee2; padding: 1px 5px; border-radius: 5px; font-size: .82rem; }

.auth-abas {
  display: flex;
  gap: 6px;
  background: #f4eee2;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.auth-aba {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--cinza);
  font-size: .92rem;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.auth-aba.ativo { background: var(--branco); color: var(--coral-escuro); box-shadow: var(--sombra); }

.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-label { font-size: .84rem; font-weight: 600; color: var(--marrom); display: flex; flex-direction: column; gap: 5px; }
.auth-label small { font-weight: 400; color: var(--cinza); }
.auth-input {
  padding: 11px 13px;
  border: 2px solid #e8ded2;
  border-radius: var(--raio);
  font-size: 1rem;
  background: var(--branco);
  color: var(--marrom);
}
.auth-input:focus { outline: none; border-color: var(--coral); }
.auth-btn {
  margin-top: 4px;
  border: none;
  background: var(--coral);
  color: var(--branco);
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background .2s;
}
.auth-btn:hover { background: var(--coral-escuro); }
.auth-erro {
  margin-top: 14px;
  background: #fde2e2;
  color: #b3261e;
  font-size: .86rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
}
.auth-erro.auth-sucesso { background: #e5f0ea; color: var(--verde-escuro); }

.auth-rodape { margin-top: 18px; font-size: .84rem; color: var(--cinza); }
.auth-link-nutri {
  display: inline-block;
  margin-top: 10px;
  font-size: .8rem;
  color: var(--cinza);
  text-decoration: underline;
}
.auth-link-nutri:hover { color: var(--coral-escuro); }
/* "Esqueci minha senha" / "Voltar para entrar": botão com cara de link */
.auth-link-btn {
  display: block;
  margin: 12px auto 0;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: none;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--coral-escuro);
  text-decoration: underline;
  cursor: pointer;
}
.auth-link-btn:hover { color: var(--marrom); }
.auth-mostrar { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--cinza); cursor: pointer; }
.auth-mostrar input { width: 18px; height: 18px; accent-color: var(--coral); }
.senha-conta { color: var(--marrom); word-break: break-all; }
.auth-btn:disabled { opacity: .6; cursor: default; }
/* botão solto no cartão (avisos): mesma largura do botão de formulário */
.auth-cartao > .auth-btn { width: 100%; padding-inline: 16px; }

/* tela de login do painel admin — fundo verde da nutri */
.tela-auth-nutri { background: linear-gradient(160deg, var(--verde) 0%, var(--verde-escuro) 100%); }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 2px solid #e8ded2;
  background: var(--branco);
  color: var(--marrom);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn-google:hover { background: #faf5ec; border-color: var(--verde); }

/* ── Barra de usuário no header do paciente ── */
.btn-sair {
  margin-left: auto;
  border: 1.5px solid var(--coral);
  background: var(--branco);
  color: var(--coral-escuro);
  font-size: .8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.btn-sair:hover { background: var(--coral); color: var(--branco); }
.usuario-linha { font-size: .82rem; color: var(--cinza); margin-top: 6px; }

/* ── Painel da nutricionista ── */
.nutri-topo { border-bottom-color: var(--verde); }
.selo-nutri {
  display: inline-block;
  background: #e5f0ea;
  color: var(--verde-escuro);
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.btn-sair-nutri {
  margin-left: auto;
  border: 1.5px solid var(--verde);
  background: var(--branco);
  color: var(--verde-escuro);
  font-size: .8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.btn-sair-nutri:hover { background: var(--verde); color: var(--branco); }
.nutri-paciente { display: flex; flex-direction: column; gap: 10px; }
.nutri-avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: #e5f0ea;
  border-radius: 50%;
}
.nutri-resp { font-size: .84rem; color: var(--cinza); }
.nutri-email { font-size: .78rem; color: var(--cinza); word-break: break-all; }

/* status da conta do paciente */
.nutri-status {
  font-size: .82rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
.nutri-status-on  { background: #e5f0ea; color: var(--verde-escuro); }
.nutri-status-off { background: #fde2e2; color: #b3261e; }
.nutri-status-exp { background: #fff3e6; color: #a05a00; }

/* botões de ação do card */
.nutri-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.nutri-btn {
  border: 1.5px solid #e0d5c8;
  background: var(--branco);
  color: var(--marrom);
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.nutri-btn:hover { border-color: var(--verde); }
.nutri-btn:disabled { opacity: .5; cursor: default; }
.nutri-btn-desativar { border-color: #f0c4c4; color: #b3261e; }
.nutri-btn-desativar:hover { border-color: #b3261e; background: #fde2e2; }
.nutri-btn-reativar { border-color: var(--verde); color: var(--verde-escuro); }
.nutri-btn-reativar:hover { background: #e5f0ea; }
.nutri-btn-salvar { background: var(--verde); border-color: var(--verde); color: var(--branco); }
.nutri-btn-salvar:hover { background: var(--verde-escuro); }

/* aviso do envio do link de redefinição de senha */
.nutri-senha-msg {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.4;
  background: #fde2e2;
  color: #b3261e;
}
.nutri-senha-msg.nutri-senha-ok { background: #e5f0ea; color: var(--verde-escuro); }

/* editor de validade (calendário) */
.nutri-validade-editor {
  background: #faf5ec;
  border: 1.5px dashed #e0d5c8;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nutri-editor-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Painel admin: topo centralizado no desktop ── */
.nutri-conteudo { max-width: 1080px; }

@media (min-width: 900px) {
  .nutri-topo .topo-titulo,
  .nutri-topo .usuario-linha { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .nutri-topo .usuario-linha { margin-top: 6px; }
}

/* ═══ Área do paciente: alimentos, registro, diário, modal ═══ */

/* filtro dropdown + busca */
.filtros-barra { display: flex; gap: 8px; margin-bottom: 12px; }
.filtros-barra .busca { margin-bottom: 0; flex: 1; }
.select-filtro {
  border: 2px solid #e8ded2;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--marrom);
  font-size: .92rem;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  max-width: 46%;
}
.select-filtro:focus { outline: none; border-color: var(--coral); }

/* grade de alimentos */
.alim-grid { display: flex; flex-direction: column; gap: 8px; }
.alim-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 10px 12px; cursor: pointer; border: 2px solid transparent;
  transition: border-color .15s, transform .08s;
}
.alim-card:hover { border-color: var(--verde); }
.alim-card:active { transform: scale(.99); }
.alim-avatar { flex-shrink: 0; width: 44px; height: 44px; display: flex; }
.alim-avatar svg { display: block; width: 100%; height: 100%; }
.alim-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alim-nome { font-weight: 700; font-size: .98rem; }
.alim-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.alim-info-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid #e0d5c8; background: var(--creme); color: var(--cinza);
  font-size: 1rem; cursor: pointer; line-height: 1;
}
.alim-info-btn:hover { border-color: var(--coral); color: var(--coral-escuro); }
.alim-cta { flex-shrink: 0; font-size: .82rem; font-weight: 700; color: var(--verde-escuro); }

/* botão voltar */
.voltar-btn {
  border: none; background: none; color: var(--coral-escuro);
  font-size: .92rem; font-weight: 700; cursor: pointer; padding: 6px 0; margin-bottom: 4px;
}

/* formulário de registro */
.reg-form { display: flex; flex-direction: column; gap: 10px; }
.reg-form .cartao { display: flex; flex-direction: column; gap: 12px; }
.reg-label { font-size: .84rem; font-weight: 600; color: var(--marrom); display: flex; flex-direction: column; gap: 5px; }
.reg-label-txt { font-size: .88rem; font-weight: 700; color: var(--marrom); }
.reg-obrig { color: var(--coral); }
.reg-textarea { resize: vertical; font-family: inherit; }
.reg-select { max-width: 100%; height: 44px; }

.reg-linha-radio { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reg-radio-grupo { display: flex; gap: 6px; }
.reg-radio, .reg-chip, .reg-aceita-op { cursor: pointer; user-select: none; }
.reg-radio input, .reg-chip input, .reg-aceita-op input { position: absolute; opacity: 0; pointer-events: none; }
.reg-radio span {
  display: inline-block; border: 1.5px solid #e0d5c8; border-radius: 999px;
  padding: 7px 16px; font-size: .88rem; font-weight: 600; background: var(--branco);
}
.reg-radio input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--branco); }

.reg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-chip span {
  display: inline-block; border: 1.5px solid #e0d5c8; border-radius: 999px;
  padding: 7px 13px; font-size: .84rem; font-weight: 600; background: var(--branco);
}
.reg-chip input:checked + span { background: var(--coral); border-color: var(--coral); color: var(--branco); }

.reg-aceita { display: flex; gap: 8px; }
.reg-aceita-op { flex: 1; }
.reg-aceita-op span {
  display: block; text-align: center; border: 2px solid #e8ded2; border-radius: 12px;
  padding: 12px 4px; font-size: .9rem; font-weight: 700; background: var(--branco);
}
.reg-aceita-op input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, white); }
.reg-alerta { font-size: .78rem; color: #a05a00; background: #fff3e6; border-radius: 8px; padding: 8px 10px; }

/* recado geral da nutri no diário */
.recado-nutri {
  background: #e5f0ea; border-left: 4px solid var(--verde); border-radius: 8px;
  padding: 10px 12px; font-size: .9rem; margin-bottom: 12px;
}

/* cards do diário */
.diario-lista { display: flex; flex-direction: column; gap: 8px; }
.diario-topo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.diario-topo-info small { color: var(--cinza); font-size: .78rem; font-weight: 400; }
.diario-selo {
  flex-shrink: 0; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 18%, white); color: color-mix(in srgb, var(--c) 60%, black);
}
.diario-coments { margin-top: 10px; border-top: 1px dashed #eee3d5; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.coment-nutri {
  background: #eef5f1; border-radius: 10px; padding: 8px 10px; font-size: .86rem;
}
.coment-nutri small { display: block; color: var(--cinza); font-size: .72rem; margin-top: 2px; }
.coment-nutri.nova { border-left: 3px solid #f5352c; }

/* badge de "não lido" no canto superior direito do card (lado da família) */
.diario-card { position: relative; }
.diario-card-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px;
  background: #f5352c; color: #fff; font-size: .55rem; font-weight: 700;
  line-height: 1; box-shadow: 0 0 0 1.5px var(--branco), 0 1px 2px rgba(0,0,0,.18);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.diario-card.tem-resp-nova { border-left: 4px solid #f5352c; }

/* ═══ Notificação estilo WhatsApp (resposta da nutri) ═══ */
.notif-wa {
  position: fixed; top: 8px; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: center; padding: 0 10px;
  animation: notif-desce .32s cubic-bezier(.2,.8,.2,1);
}
.notif-wa.saindo { animation: notif-sobe .25s ease-in forwards; }
@keyframes notif-desce { from { transform: translateY(-110%); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes notif-sobe { from { transform: none; opacity: 1; } to { transform: translateY(-110%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .notif-wa { animation: none; }
  .notif-wa.saindo { animation: none; display: none; }
}
.notif-wa-cartao {
  width: 100%; max-width: 420px; background: var(--branco);
  border-radius: 16px; box-shadow: 0 6px 24px rgba(61,44,41,.22);
  padding: 10px 12px;
}
.notif-wa-app {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .7rem; color: var(--cinza); margin-bottom: 6px; font-weight: 600;
}
.notif-wa-corpo { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.notif-wa-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: #e5f0ea; display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.notif-wa-texto { flex: 1; min-width: 0; }
.notif-wa-texto b { display: block; font-size: .9rem; color: var(--marrom); }
.notif-wa-texto p {
  font-size: .84rem; color: var(--cinza); margin: 1px 0 0;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-wa-fechar {
  flex-shrink: 0; border: none; background: none; color: var(--cinza);
  font-size: .85rem; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.notif-wa-fechar:hover { background: var(--creme); }
.notif-wa-cta {
  display: block; margin: 8px 0 0 48px; border: none; background: none;
  color: var(--verde-escuro); font-weight: 700; font-size: .84rem; cursor: pointer;
  padding: 4px 0;
}
.notif-wa-cta:hover { color: var(--coral-escuro); }

/* itens clicáveis do cardápio */
.menu-item-link {
  border: none; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--verde-escuro); font-weight: 600; text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.menu-item-link:hover { color: var(--coral-escuro); }
.menu-slot-val i { color: var(--cinza); font-style: normal; }

/* modal flutuante */
.modal-fundo {
  position: fixed; inset: 0; z-index: 100; background: rgba(61, 44, 41, .5);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; animation: modal-fade .2s ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-cartao {
  background: var(--branco); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto; position: relative;
  animation: modal-sobe .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-sobe { from { transform: translateY(100%); } to { transform: none; } }
.modal-fechar {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--creme); color: var(--cinza); font-size: 1rem; cursor: pointer;
}
.modal-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 30px; }
.modal-cab .alim-avatar { width: 52px; height: 52px; }
.modal-cab h3 { font-size: 1.15rem; }
.modal-corte-pic { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.modal-corte-pic small { color: var(--verde-escuro); font-size: .74rem; font-weight: 600; }
.modal-registrar { margin-top: 14px; }

/* modal de confirmação (regerar cardápio) */
.modal-confirma { text-align: center; }
.confirma-emoji { font-size: 2.4rem; display: block; margin: 4px 0 8px; }
.modal-confirma h3 { font-size: 1.15rem; margin-bottom: 8px; }
.modal-confirma .detalhe { color: var(--cinza); }
.confirma-botoes { display: flex; gap: 10px; margin-top: 18px; }
.confirma-botoes button {
  flex: 1; padding: 12px 10px; border-radius: 999px; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.btn-confirma-nao { border: 1.5px solid #e8ded2; background: var(--branco); color: var(--marrom); }
.btn-confirma-sim { border: none; margin: 0; }

/* modal de histórico de cardápios: mini-calendário + drill-down do dia */
.modal-historico h3 { font-size: 1.15rem; }
.hist-sub { display: block; color: var(--cinza); font-size: .8rem; margin-top: 2px; }
.hist-vista[hidden] { display: none; }

.hist-cal-semana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin: 14px 0 6px; text-align: center;
}
.hist-cal-semana span { font-size: .72rem; font-weight: 800; color: var(--cinza); }

.hist-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hist-cal-vazia { aspect-ratio: 1; }
.hist-cal-dia {
  position: relative; aspect-ratio: 1; border: 1.5px solid #e8ded2; background: var(--branco);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: .86rem; color: var(--cinza); font-family: inherit;
}
.hist-cal-dia[disabled] { cursor: not-allowed; }
.hist-cal-dia.tem-dado {
  cursor: pointer; border-color: var(--verde); color: var(--marrom); font-weight: 700; background: #f2f8f4;
}
.hist-cal-dia.tem-dado:hover { background: var(--verde); color: var(--branco); }
.hist-cal-dia.eh-hoje { border-color: var(--coral); border-width: 2px; }
.hist-cal-num { line-height: 1; }
.hist-cal-ponto {
  position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--coral);
}
.hist-cal-dia.tem-dado:hover .hist-cal-ponto { background: var(--branco); }
.hist-cal-legenda {
  display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .78rem; color: var(--cinza);
}
.hist-cal-legenda .hist-cal-ponto { position: static; }

.hist-voltar {
  border: none; background: none; color: var(--verde-escuro); font-weight: 700; font-size: .9rem;
  padding: 4px 0 12px; cursor: pointer;
}
.hist-item-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hist-data { font-weight: 800; color: var(--marrom); font-size: .95rem; text-transform: capitalize; }
.hist-faixa { color: var(--verde-escuro); font-size: .76rem; font-weight: 700; white-space: nowrap; }

@media (min-width: 520px) {
  .modal-fundo { align-items: center; padding: 16px; }
  .modal-cartao { border-radius: 20px; }
}

/* ═══ Painel da nutri: detalhe do paciente ═══ */
.pac-detalhe-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pac-voltar {
  border: 1.5px solid var(--verde); background: var(--branco); color: var(--verde-escuro);
  font-size: .84rem; font-weight: 700; border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.pac-recado-form { display: flex; flex-direction: column; gap: 8px; }
.pac-coment-form { display: flex; gap: 6px; margin-top: 8px; }
.pac-coment-form input {
  flex: 1; border: 1.5px solid #e8ded2; border-radius: 999px; padding: 8px 12px; font-size: .88rem;
}
.pac-coment-form input:focus { outline: none; border-color: var(--verde); }
.pac-coment-form button {
  border: none; background: var(--verde); color: var(--branco); font-weight: 700;
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: .86rem;
}
.pac-sem-registros { text-align: center; color: var(--cinza); padding: 20px; }

/* ═══ Diário agrupado por status (lido/não-lido) ═══ */
.diario-filtros { display: flex; gap: 8px; margin: 4px 0 14px; }
.diario-filtro {
  border: 1.5px solid #e8ded2; background: var(--branco); color: var(--marrom);
  padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.diario-filtro.ativo { background: var(--verde); border-color: var(--verde); color: var(--branco); }

.diario-grupo { margin-bottom: 6px; }
.diario-grupo-tit {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .82rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--cinza); margin: 16px 0 8px;
}
.diario-cont { color: var(--coral-escuro); }
.diario-cont-lidos { color: var(--verde-escuro); }
.diario-toggle-lidos {
  border: 1.5px solid #e8ded2; background: var(--branco); color: var(--cinza);
  border-radius: 999px; padding: 4px 12px; font-size: .76rem; font-weight: 600; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.diario-grupo-lidos.recolhido .diario-card { display: none; }
.diario-grupo-vazio { text-align: center; color: var(--cinza); font-size: .88rem; padding: 10px 0; }

/* card colapsado */
.diario-card { padding: 12px 14px; cursor: pointer; transition: box-shadow .15s; }
.diario-card.diario-nao-lido { border-left: 4px solid var(--coral); }
.diario-card.diario-lido { opacity: .82; }
.diario-card:hover { box-shadow: var(--sombra); }
.diario-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.diario-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .98rem; }
.diario-card.diario-lido .diario-nome { color: var(--cinza); }
.diario-card.diario-lido .diario-nome b { font-weight: 600; }
.diario-novo {
  font-size: .66rem; font-weight: 800; letter-spacing: .04em; color: var(--branco);
  background: var(--coral); padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
}
.diario-1a {
  font-size: .7rem; font-weight: 700; color: var(--verde-escuro); background: #e5f0ea;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.diario-linha2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.diario-data { font-size: .78rem; color: var(--cinza); }
.diario-lido-btn {
  border: 1.5px solid #e8ded2; background: var(--branco); color: var(--cinza);
  border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.diario-lido-btn:hover { border-color: var(--verde); color: var(--verde-escuro); }
.diario-card.diario-lido .diario-lido-btn:hover { border-color: var(--coral); color: var(--coral-escuro); }
.diario-corpo { display: none; border-top: 1px dashed #eee3d5; margin-top: 10px; padding-top: 10px; cursor: default; }
.diario-card.aberto .diario-corpo { display: block; }
.diario-card.reg-perigo { border-left-color: #d9534f; }

/* ═══ Splash pós-login: "VOCÊ É INCRÍVEL" ═══ */
.splash-incrivel {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 28px; overflow: hidden;
  background: linear-gradient(165deg, var(--creme) 0%, #fbeed3 40%, #f7ddc2 100%);
  transition: opacity .55s ease;
}
.splash-incrivel.saindo { opacity: 0; pointer-events: none; }

.splash-coracao {
  font-size: 3rem; line-height: 1;
  animation: splash-batida 1.4s ease-in-out infinite;
}
.splash-ola {
  font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--verde-escuro);
  animation: splash-sobe .6s ease both;
}
.splash-frase {
  font-size: clamp(2.1rem, 10vw, 3.6rem); font-weight: 800; line-height: 1.08;
  color: var(--marrom); letter-spacing: .02em;
  animation: splash-pop .55s cubic-bezier(.2, 1.4, .4, 1) .15s both;
}
.splash-frase span {
  display: block;
  background: linear-gradient(90deg, var(--coral) 20%, var(--verde-escuro) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.splash-sub {
  max-width: 320px; font-size: .98rem; color: var(--cinza);
  animation: splash-sobe .6s ease .45s both;
}

/* emojis decorativos flutuando */
.splash-flutua {
  position: absolute; font-size: 1.6rem; opacity: .85; pointer-events: none;
  animation: splash-flutua 3.2s ease-in-out infinite;
}
.splash-flutua:nth-child(1) { top: 12%; left: 12%; animation-delay: 0s; }
.splash-flutua:nth-child(2) { top: 18%; right: 14%; animation-delay: .6s; }
.splash-flutua:nth-child(3) { bottom: 20%; left: 16%; animation-delay: 1.1s; }
.splash-flutua:nth-child(4) { bottom: 14%; right: 12%; animation-delay: 1.6s; }
.splash-flutua:nth-child(5) { top: 44%; left: 6%; animation-delay: .9s; }
.splash-flutua:nth-child(6) { top: 40%; right: 6%; animation-delay: 1.9s; }

@keyframes splash-pop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes splash-sobe {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes splash-batida {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.22); }
  24% { transform: scale(1); }
  36% { transform: scale(1.14); }
  48% { transform: scale(1); }
}
@keyframes splash-flutua {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-coracao, .splash-flutua { animation: none; }
  .splash-ola, .splash-frase, .splash-sub { animation-duration: .01s; animation-delay: 0s; }
}

/* ── Painel da nutri: idade / faixa do bebê ── */
.nutri-faixa {
  margin-top: 6px;
  font-size: .84rem;
  color: var(--cinza);
  background: #f4eee2;
  border-radius: 8px;
  padding: 6px 10px;
}
.nutri-faixa-vazia { background: #fff6e6; border-left: 3px solid var(--coral); }
.nutri-faixa-previa {
  margin: -2px 0 10px;
  font-size: .82rem;
  color: var(--cinza);
  min-height: 1.1em;
}
.nutri-faixa-erro { color: #c0392b; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   Plano alimentar semanal
   Duas apresentações, decididas por largura:
     • até 759 px  — um dia por vez (cartão AGORA + lista do dia)
     • 760 px +    — a semana em tabela, coluna do dia em destaque.
   A tabela rola dentro dela mesma: o cabeçalho dos dias gruda no topo
   do próprio contêiner e nunca encosta no conteúdo da página.
   ══════════════════════════════════════════════════════════════ */

/* a tabela precisa de mais largura que o limite de leitura das outras telas */
.conteudo-largo { max-width: 1560px; }

.plano-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plano-titulo { margin: 18px 0 6px; }
.plano-semana {
  margin-left: auto; font-size: .8rem; color: var(--cinza);
  font-variant-numeric: tabular-nums;
}

/* ── chips de dia ── */
.plano-chips { display: flex; gap: 5px; margin: 4px 0 2px; }
.plano-chip {
  flex: 1 1 0; min-width: 36px; min-height: 46px;
  border: 0; border-radius: 12px; background: #f6efe4; color: var(--cinza);
  font-size: .76rem; font-weight: 700; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: background .18s, color .18s, flex-grow .18s;
}
.plano-chip-data { font-size: .62rem; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.plano-chip[aria-selected="true"] { background: var(--coral); color: var(--branco); flex-grow: 1.6; }
.plano-chip[data-hoje="1"]:not([aria-selected="true"]) { box-shadow: inset 0 0 0 2px var(--verde); }

.plano-dia-cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 16px 0 12px; }
.plano-dia-cab h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em; }
.plano-selo {
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--verde); color: var(--branco); border-radius: 999px; padding: 3px 9px;
}
.plano-btn-hoje {
  margin-left: auto; font: inherit; font-size: .78rem; font-weight: 700; color: var(--coral-escuro);
  background: var(--branco); border: 1px solid #eee2d2;
  border-radius: 999px; padding: 7px 13px; min-height: 36px; cursor: pointer;
}

/* ── cartão AGORA ── */
.plano-agora {
  background: var(--coral); color: var(--branco); border-radius: 18px;
  padding: 18px 18px 20px; box-shadow: 0 8px 22px rgba(224, 122, 95, .28);
}
.tag-agora {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .9;
}
.plano-agora-tit { display: flex; align-items: baseline; gap: 9px; margin: 5px 0 12px; }
.plano-agora-tit h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.plano-agora-tit .hora { font-size: .92rem; opacity: .92; font-variant-numeric: tabular-nums; font-weight: 700; }
.plano-agora .itens li { color: var(--branco); font-size: 1.02rem; line-height: 1.45; padding-left: 17px; }
.plano-agora .itens li::before { background: var(--branco); opacity: .85; width: 6px; height: 6px; }
.plano-agora .obs { color: rgba(255, 255, 255, .86); }
.plano-agora-pe {
  display: flex; align-items: center; gap: 8px; margin-top: 15px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .28); font-size: .84rem;
}
.plano-agora-previa { background: var(--branco); color: var(--marrom); box-shadow: var(--sombra); }
.plano-agora-previa .itens li { color: var(--marrom); }
.plano-agora-previa .itens li::before { background: var(--verde); opacity: .65; }
.plano-agora-previa .tag-agora { color: var(--coral-escuro); }
.plano-agora-previa .plano-agora-pe { border-top-color: #eee2d2; }
.plano-agora-previa .obs { color: var(--cinza); }

/* ── lista de itens de comida (compartilhada) ── */
.plano .itens { display: grid; gap: 3px; list-style: none; }
.plano .itens li { font-size: .94rem; line-height: 1.4; padding-left: 15px; position: relative; }
.plano .itens li::before {
  content: ""; position: absolute; left: 2px; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--verde); opacity: .65;
}
.plano .obs { font-size: .78rem; color: var(--cinza); margin-top: 5px; line-height: 1.4; }
.plano-espelho {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde-escuro); margin-bottom: 4px;
}
.plano .itens-eco li { color: var(--cinza); }
.plano-vazio-cel { font-size: .82rem; color: #b3a79f; font-style: italic; }

/* ── dia em foco (celular) ── */
.plano-sub {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cinza); margin: 22px 0 9px;
}
.plano-refs { display: grid; gap: 9px; list-style: none; }
.plano-ref {
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 13px 15px; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start;
}
.plano-ref-hora { display: grid; gap: 2px; justify-items: start; padding-top: 2px; }
.plano-ref-hora .ic { font-size: 1.12rem; line-height: 1; }
.plano-ref-hora .h { font-size: .82rem; font-weight: 700; color: var(--cinza); font-variant-numeric: tabular-nums; }
.plano-ref h3 { font-size: .98rem; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 7px; }
.plano-ref[data-e="feita"] { background: #f7f2e9; box-shadow: none; }
.plano-ref[data-e="feita"] h3 { color: var(--verde-escuro); }
.plano-ref[data-e="feita"] .itens li { color: var(--cinza); }
.plano-ref[data-e="proxima"] { box-shadow: 0 0 0 2px var(--amarelo), var(--sombra); }
.plano-ok { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-escuro); }
.plano-prox {
  font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--amarelo); color: #6b520f; border-radius: 999px; padding: 2px 8px;
}

/* ── estado vazio ── */
.plano-sem { text-align: center; padding: 26px 22px; }
.plano-sem-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; }
.plano-sem h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.plano-sem p { color: var(--cinza); font-size: .92rem; }
.plano-sem p + p { margin-top: 10px; }

/* ── do plano ao diário ──────────────────────────────────────
   Desenho: docs/superpowers/specs/2026-10-03-plano-preparo-diario-design.md
   Visual da proposta A dos mockups. Fontes hospedadas no próprio site
   (CSP font-src 'self'); licença em assets/fontes/LEIA-ME.md. As cores do
   conceito D valem só dentro da folha e dos botões do plano. */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../assets/fontes/plus-jakarta-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("../assets/fontes/geist-mono-latin.woff2") format("woff2");
}

/* botão da refeição no plano (proposta A da correção de 03/10/2026):
   círculo de 32 px na linha do nome e do horário, sem ocupar altura. A
   área de toque tem 44 px (::after invisível em volta). Registrada troca o
   "+" por um ✓ verde no mesmo lugar. */
.plano-mais, .plano-registrado {
  position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0; transition: transform .12s, background .15s, border-color .15s;
}
.plano-mais::after, .plano-registrado::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.plano-mais { border: 1.5px solid #E9C3B5; background: #FFFFFF; color: #8E3D27; }
.plano-registrado { border: 0; background: #E5F0EA; color: #3F6F57; }
.plano-mais svg, .plano-registrado svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.plano-registrado svg { stroke-width: 2.6; }
.plano-mais:hover { background: #FBE9E3; border-color: #E0A48F; }
.plano-mais:active, .plano-registrado:active { transform: scale(.92); }
.plano-mais:focus-visible, .plano-registrado:focus-visible { outline: 3px solid #8E3D27; outline-offset: 3px; }

/* tabela da semana: dentro da linha do nome, sem aumentar a altura dela */
.plano-rot .plano-mais, .plano-rot .plano-registrado { align-self: center; margin: -6px 0 -6px 4px; }

/* lista do dia (celular): canto de cima do cartão */
.plano-ref.plano-ref-acao { position: relative; padding-right: 54px; }
.plano-ref-acao > .plano-mais, .plano-ref-acao > .plano-registrado { position: absolute; top: 10px; right: 12px; }

/* cartão AGORA (coral): mesmo círculo, em branco */
.plano-agora { position: relative; }
.plano-agora > .plano-mais, .plano-agora > .plano-registrado { position: absolute; top: 14px; right: 14px; }
.plano-agora > .plano-mais { border-color: transparent; }
.plano-agora > .plano-registrado { background: #FFFFFF; }
.plano-agora:has(> .plano-mais, > .plano-registrado) .plano-agora-tag { padding-right: 44px; }
@media (min-width: 760px) { .plano-agora:has(> .plano-mais, > .plano-registrado) { padding-right: 60px; } }

/* folha */
.folha-ref {
  --p: #BB563D; --p-d: #8E3D27; --p-soft: #FBE9E3; --acc: #E07A5F;
  --bg: #FBF7F1; --sf: #FFFFFF; --sk: #F4EDE3; --tx: #3D2C29; --tx2: #5E4F4A; --tx3: #77675F;
  --ln: #EDE4D8; --ln2: #DCCFC0; --ok: #3F6F57; --ok-soft: #E5F0EA; --wr: #8A5A00; --wr-soft: #FFF3D6;
  --er: #B23A2E; --er-soft: #FBE8E5;
  --f: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --m: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  font-family: var(--f); color: var(--tx); letter-spacing: -.003em;
  background: var(--sf); border-radius: 30px 30px 0 0; padding: 0;
  display: flex; flex-direction: column; overflow: hidden; max-height: 92vh;
  box-shadow: 0 -10px 40px -10px rgba(30, 18, 14, .35);
}
.folha-ref.cheia { height: 92vh; }
.folha-ref:focus { outline: none; }
.folha-ref button { font-family: var(--f); }
.folha-ref button:focus-visible, .folha-ref textarea:focus-visible { outline: 3px solid var(--p-d); outline-offset: 2px; }
.fr-i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }

.fr-cab { padding: 10px 18px 6px; flex: none; }
.fr-alca { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--ln2); margin: 0 auto 10px; }
.fr-cab-l { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.fr-cab-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fr-k { font: 500 11.5px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.fr-h { font: 700 21px/1.15 var(--f); letter-spacing: -.02em; margin: 0; }
.fr-h-g { font-size: 23px; }
.fr-pt { font: 650 14.5px/1.2 var(--f); }
.fr-ps { font-size: 12.5px; color: var(--tx3); }
.fr-ib {
  width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  color: var(--tx2); background: var(--sf); border: 1px solid var(--ln);
}
.fr-sp { flex: 1; }
.fr-acesa { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx3); }
.fr-acesa .fr-i { width: 15px; height: 15px; }

.fr-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 16px; display: grid; gap: 14px; align-content: start; }
.fr-barra { flex: none; display: grid; gap: 8px; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--sf); border-top: 1px solid var(--ln); }
.fr-bar2 { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.fr-btn {
  height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 650 16px/1 var(--f); width: 100%; border: 0; cursor: pointer;
}
.fr-btn .fr-i { width: 21px; height: 21px; }
.fr-btn.pr { background: var(--p); color: #fff; box-shadow: 0 6px 16px -6px rgba(187, 86, 61, .6); }
.fr-btn.se { background: var(--sf); color: var(--tx); box-shadow: inset 0 0 0 1.5px var(--ln2); }
.fr-btn.gh { background: transparent; color: var(--p-d); height: 46px; }
.fr-btn:disabled { background: var(--sk); color: #A99A8F; box-shadow: none; cursor: not-allowed; }
.fr-btn.se:disabled { background: var(--sf); color: #B7AAA0; box-shadow: inset 0 0 0 1.5px var(--ln); }
.fr-link { background: none; border: 0; height: 48px; font: 650 16px/1 var(--f); color: var(--tx2); cursor: pointer; }

.fr-fcs { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-fc { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border-radius: 999px; background: var(--sk); font: 600 14px/1 var(--f); }
.fr-av { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.fr-av svg { width: 26px; height: 26px; }

.fr-act {
  display: grid; grid-template-columns: 56px 1fr 20px; gap: 14px; align-items: center; width: 100%; min-height: 84px;
  padding: 14px 14px 14px 12px; border: 1.5px solid var(--ln); border-radius: 20px; background: var(--sf);
  color: var(--tx3); text-align: left; cursor: pointer;
}
.fr-act.off { cursor: default; background: var(--bg); }
.fr-ai { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--p-soft); color: var(--p-d); }
.fr-ai .fr-i { width: 26px; height: 26px; }
.fr-act.g .fr-ai { background: var(--ok-soft); color: var(--ok); }
.fr-ai.n { background: var(--sk); color: var(--tx2); }
.fr-act b { font: 700 17.5px/1.2 var(--f); color: var(--tx); display: block; letter-spacing: -.01em; }
.fr-act small { font-size: 13.5px; color: var(--tx3); }

.fr-thumb { width: 76px; height: 76px; border-radius: 16px; background: var(--sk); display: grid; place-items: center; overflow: hidden; flex: none; }
.fr-thumb .fr-prato { width: 72px; height: 72px; }
.fr-rc {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; width: 100%; padding: 12px;
  border: 1.5px solid var(--ln); border-radius: 20px; background: var(--sf); text-align: left; color: var(--tx); cursor: pointer;
}
.fr-rc.off { background: var(--sk); border-style: dashed; cursor: default; }
.fr-rc.off .fr-thumb { opacity: .55; }
.fr-rc b { font: 700 15.5px/1.25 var(--f); display: flex; gap: 6px; align-items: center; letter-spacing: -.01em; }
.fr-rc b .fr-i { width: 16px; height: 16px; }
.fr-meta { font: 500 12px/1.3 var(--m); color: var(--tx3); margin: 3px 0 8px; display: block; }
.fr-motivo { display: block; font-size: 13px; color: #6E4800; line-height: 1.4; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-ck { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px 0 6px; border-radius: 999px; font: 600 12px/1.2 var(--f); background: var(--ok-soft); color: var(--ok); }
.fr-ck .fr-i { width: 14px; height: 14px; stroke-width: 2.6; }
.fr-ck.need { background: #fff; color: var(--wr); box-shadow: inset 0 0 0 1.5px #E6C77F; }
.fr-ck.mute { background: var(--sk); color: var(--tx2); }

.fr-disc {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px; border-radius: 16px; border: 0;
  background: var(--sk); color: var(--tx); font: 600 14.5px/1.2 var(--f); text-align: left; cursor: pointer;
}
.fr-disc > span { flex: 1; }
.fr-disc small { font-weight: 500; color: var(--tx3); font-size: 12.5px; display: block; margin-top: 2px; }

.fr-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; align-items: flex-start; margin: 0; }
.fr-note .fr-i { width: 18px; height: 18px; margin-top: 1px; }
.fr-note.ok { background: var(--ok-soft); color: #2F5643; }
.fr-note.wr { background: var(--wr-soft); color: #6E4800; }
.fr-note.in { background: var(--sk); color: var(--tx2); }
.fr-note.nu { background: #F1ECF6; color: #4C3B66; }

/* Como preparar: receita na tela, linhas por alimento que abrem ao tocar */
.fr-fcs.pq { gap: 6px; }
.fr-fcs.pq .fr-fc { height: 32px; padding: 0 11px 0 3px; gap: 6px; font-size: 13px; }
.fr-fcs.pq .fr-av { width: 26px; height: 26px; }
.fr-fcs.pq .fr-av svg { width: 22px; height: 22px; }
.fr-fc.no { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ln2); color: var(--tx3); padding-left: 11px; }
.fr-sec { display: flex; justify-content: space-between; gap: 8px; font: 600 11px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); margin: 4px 0 -6px; }
.fr-sec em { font: 500 11.5px/1.3 var(--f); font-style: normal; letter-spacing: 0; text-transform: none; }
.fr-lst { border: 1px solid var(--ln); border-radius: 18px; background: var(--sf); }
.fr-li { border-bottom: 1px solid var(--ln); }
.fr-li:last-child { border-bottom: 0; }
.fr-lb {
  display: grid; grid-template-columns: 36px 1fr 20px; gap: 10px; align-items: center; width: 100%; min-height: 60px;
  padding: 10px 12px; background: none; border: 0; text-align: left; color: var(--tx); cursor: pointer;
}
.fr-lb.num { grid-template-columns: 22px 36px 1fr 20px; }
.fr-rcp .fr-lb { grid-template-columns: 1fr 20px; min-height: 48px; padding: 10px 14px; }
.fr-lb:focus-visible { outline: 3px solid var(--p-d); outline-offset: -3px; }
.fr-lb .fr-av { width: 36px; height: 36px; background: var(--sk); }
.fr-lb .fr-av svg { width: 30px; height: 30px; }
.fr-lb b { font: 700 15px/1.2 var(--f); display: block; }
.fr-lb small { display: block; font-size: 12.5px; color: var(--tx3); margin-top: 2px; line-height: 1.35; }
.fr-lb > .fr-i { color: var(--tx3); transition: transform .2s ease; }
.fr-li.open .fr-lb > .fr-i { transform: rotate(180deg); }
.fr-num { width: 22px; height: 22px; border-radius: 50%; background: var(--p-soft); color: var(--p-d); font: 700 12px/22px var(--m); text-align: center; }
.fr-dt { display: none; gap: 8px; padding: 0 12px 14px 58px; }
.fr-lb.num + .fr-dt { padding-left: 90px; }
.fr-rcp .fr-dt { padding: 0 14px 12px; }
.fr-li.open .fr-dt { display: grid; }
.fr-dt p { margin: 0; font-size: 13.5px; color: var(--tx2); line-height: 1.45; }
.fr-dt .fr-cut { font-size: 13px; }
.fr-semo { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1.5px dashed var(--ln2); font-size: 13.5px; color: var(--tx2); line-height: 1.4; margin: 0; }
.fr-semo .fr-i { width: 18px; height: 18px; color: var(--tx3); margin-top: 1px; }
.fr-rcp { border: 1px solid var(--ln); border-radius: 20px; background: var(--sf); display: grid; }
.fr-rcp-h { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 19px 19px 0 0; background: linear-gradient(180deg, #F6ECE1, #F1E4D5); }
.fr-rcp-h:last-child { border-radius: 19px; }
.fr-rcp-h .fr-thumb { width: 72px; height: 72px; background: rgba(255, 255, 255, .55); }
.fr-rcp-h .fr-thumb .fr-prato { width: 68px; height: 68px; }
.fr-rcp-h b { font: 700 17px/1.2 var(--f); letter-spacing: -.015em; display: block; }
.fr-rcp-h .fr-meta { margin: 4px 0 0; }
.fr-orig { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 8px; border-radius: 999px; font: 600 11.5px/1.1 var(--f); background: #fff; color: var(--tx2); box-shadow: inset 0 0 0 1px var(--ln2); }
.fr-orig.ok { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.fr-orig .fr-i { width: 13px; height: 13px; stroke-width: 2.6; }
.fr-rcp > .fr-li { border-top: 1px solid var(--ln); border-bottom: 0; }
.fr-rcp-b { padding: 4px 14px 14px; display: grid; gap: 8px; border-top: 1px solid var(--ln); }
.fr-rcp-b h6 { font: 600 11px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); margin: 10px 0 0; }
.fr-rcp-b ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--tx2); }
.fr-rcp-b ol li::marker { font: 600 12.5px var(--m); color: var(--p-d); }
.fr-dica { margin: 0; font-size: 13px; color: var(--tx3); }
.fr-foto { margin: 0; }
.fr-foto img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.fr-alts { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.fr-alt {
  flex: 0 0 82%; scroll-snap-align: start; display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center;
  padding: 10px; border: 1.5px solid var(--ln); border-radius: 16px; background: var(--sf); text-align: left; color: var(--tx); cursor: pointer;
}
.fr-alt:focus-visible { outline: 3px solid var(--p-d); outline-offset: 2px; }
.fr-alt .fr-thumb { width: 56px; height: 56px; }
.fr-alt .fr-thumb .fr-prato { width: 52px; height: 52px; }
.fr-alt b { font: 700 13.5px/1.25 var(--f); display: block; }
.fr-alt .fr-chips { margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .fr-lb > .fr-i { transition: none; } }
.fr-howto { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.fr-howto p { margin: 0; font-size: 14px; color: var(--tx2); }
.fr-howto .fr-row b { font: 700 15.5px/1.2 var(--f); }
.fr-row { display: flex; align-items: center; gap: 10px; }
.fr-cut { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; background: var(--sk); border-radius: 12px; padding: 8px 10px; font-size: 13.5px; }
.fr-cut-pic svg { width: 40px; height: 40px; display: block; }
.fr-mini { font-size: 13px !important; }

.fr-hero { height: 230px; flex: none; background: linear-gradient(180deg, #F3E7DA, #EFE0CF); display: grid; place-items: center; position: relative; }
.fr-hero .fr-prato { width: 200px; height: 200px; }
.fr-hero-b { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; }
.fr-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ln); border-radius: 18px; background: var(--sf); }
.fr-stats div { padding: 10px 12px; display: grid; gap: 2px; border-right: 1px solid var(--ln); min-width: 0; }
.fr-stats div:last-child { border-right: 0; }
.fr-stats small { font: 500 10.5px/1 var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); }
.fr-stats b { font: 650 14px/1.25 var(--f); overflow-wrap: anywhere; }
.fr-ings { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 2px 14px; }
.fr-ing { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ln); font-size: 14.5px; }
.fr-ing:last-child { border-bottom: 0; }
.fr-ing small { font: 500 11.5px/1.2 var(--m); color: var(--tx3); text-align: right; max-width: 96px; }
.fr-ing.ext small { color: var(--wr); }
.fr-ing .fr-av { width: 32px; height: 32px; background: var(--sk); }
.fr-mk { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--sk); color: var(--tx3); }
.fr-mk .fr-i { width: 16px; height: 16px; }

.fr-prog { display: flex; gap: 5px; }
.fr-prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--ln); }
.fr-prog i.on { background: var(--p); }
.fr-stepn { font: 600 13px/1 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--p-d); }
.fr-stepbig { font: 650 28px/1.25 var(--f); letter-spacing: -.025em; margin: 0; min-height: 4.2em; }

.fr-q { font: 700 20px/1.2 var(--f); letter-spacing: -.02em; margin: 2px 0 0; }
.fr-q em { font: 500 13px/1 var(--f); color: var(--tx3); font-style: normal; letter-spacing: 0; }
.fr-sub { font-size: 14px; color: var(--tx3); margin: 0; }
.fr-acs { display: grid; gap: 10px; }
.fr-ac {
  display: grid; grid-template-columns: 48px 1fr 24px; gap: 12px; align-items: center; width: 100%; min-height: 68px;
  padding: 10px 14px 10px 10px; border: 1.5px solid var(--ln); border-radius: 18px; background: var(--sf); text-align: left; color: var(--tx); cursor: pointer;
}
.fr-ac b { font: 700 16px/1.2 var(--f); display: block; }
.fr-ac small { font-size: 13px; color: var(--tx3); }
.fr-ac.sel { border-color: var(--p); background: #FFFBF9; }
.fr-fi { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; }
.fr-fi .fr-i { width: 30px; height: 30px; stroke-width: 1.8; }
.f-boa { background: var(--ok-soft); color: var(--ok); }
.f-par { background: var(--wr-soft); color: var(--wr); }
.f-rej { background: var(--er-soft); color: var(--er); }
.fr-rd { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ln2); display: grid; place-items: center; }
.fr-ac.sel .fr-rd { background: var(--p); box-shadow: none; color: #fff; }
.fr-rd .fr-i { width: 15px; height: 15px; stroke-width: 3; }

.fr-qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fr-qo {
  display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 82px; padding: 10px 4px;
  border: 1.5px solid var(--ln); border-radius: 16px; background: var(--sf); color: #B8A897;
  font: 600 12.5px/1.2 var(--f); text-align: center; cursor: pointer;
}
.fr-qo span { color: var(--tx); }
.fr-qo svg { width: 34px; height: 34px; }
.fr-qo.sel { border-color: var(--p); background: var(--p-soft); color: var(--p); }
.fr-qo.sel span { color: var(--p-d); }

.fr-cps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-cps-l { font-size: 13px; color: var(--tx3); }
.fr-cp {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--ln2); background: var(--sf); color: var(--tx); font: 600 13.5px/1 var(--f); cursor: pointer;
}
.fr-cp.sel { background: var(--tx); color: #fff; border-color: var(--tx); }
.fr-fl { font: 650 14px/1.2 var(--f); margin: 0; display: flex; gap: 6px; align-items: baseline; }
.fr-fl em { font: 500 12px/1 var(--f); color: var(--tx3); font-style: normal; }
.fr-ta { width: 100%; border: 1.5px solid var(--ln2); border-radius: 16px; padding: 12px 14px; min-height: 84px; font: 400 15px/1.45 var(--f); color: var(--tx); background: #fff; resize: vertical; }
.fr-ta:focus { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-soft); outline: none; }

.fr-pfbox { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 4px 14px; }
.fr-pfh, .fr-pf { display: grid; grid-template-columns: 1fr repeat(3, 48px); gap: 6px; align-items: center; }
.fr-pfh { font: 500 10px/1.15 var(--m); color: var(--tx3); text-align: center; text-transform: uppercase; letter-spacing: .03em; padding: 8px 0 4px; }
.fr-pfh span:first-child { text-align: left; }
.fr-pf { padding: 8px 0; border-top: 1px solid var(--ln); }
.fr-nm { display: flex; align-items: center; gap: 10px; font: 650 15px/1.2 var(--f); min-width: 0; overflow-wrap: anywhere; }
.fr-nm .fr-av { background: var(--sk); }
.fr-fb { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ln); color: var(--tx3); background: #fff; border: 0; cursor: pointer; }
.fr-fb .fr-i { width: 26px; height: 26px; }
.fr-fb.on.f-boa { background: var(--ok); color: #fff; box-shadow: none; }
.fr-fb.on.f-par { background: #C98A12; color: #fff; box-shadow: none; }
.fr-fb.on.f-rej { background: var(--er); color: #fff; box-shadow: none; }

.fr-okb { display: grid; justify-items: center; text-align: center; gap: 4px; padding-top: 14px; }
.fr-big { width: 88px; height: 88px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 12px var(--ok-soft); margin-bottom: 14px; }
.fr-big .fr-i { width: 44px; height: 44px; stroke-width: 2.6; }
.fr-sum { background: var(--sf); border: 1px solid var(--ln); border-radius: 20px; padding: 4px 16px; }
.fr-sum > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ln); font-size: 14.5px; }
.fr-sum > div:last-child { border-bottom: 0; }
.fr-sum span { color: var(--tx3); }
.fr-sum b { font-weight: 650; text-align: right; }
.fr-sum .fr-nm { color: var(--tx); }
.fr-strip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ok-soft); color: #2F5643; font: 600 14px/1.3 var(--f); }
.fr-strip .fr-i { width: 24px; height: 24px; }
.fr-strip small { display: block; font-weight: 500; font-size: 12.5px; color: #4F6E5E; }
.fr-mini-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--ln2); background: #fff; color: var(--tx); font: 600 13.5px/1 var(--f); cursor: pointer; }
.fr-mini-b .fr-i { width: 16px; height: 16px; }
.fr-trava { display: inline-flex; align-items: center; gap: 4px; color: var(--tx3); font-size: 12px; text-align: right; }
.fr-trava .fr-i { width: 14px; height: 14px; }
.fr-ajuda { font-size: 13px; color: var(--tx3); text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .plano-mais, .plano-registrado { transition: none; }
}

/* ══ tabela da semana (tablet e desktop) ══ */
@media (min-width: 760px) {
  .plano-chip { min-height: 52px; }
  .plano-dia-cab h3 { font-size: 1.45rem; }

  /* AGORA deitado: mesma cor e conteúdo, sem roubar altura da tabela */
  .plano-agora {
    display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
    align-items: center; gap: 12px 22px; padding: 16px 22px; border-radius: 16px;
  }
  .plano-agora-tit { margin: 4px 0 0; }
  .plano-agora-tit h2 { font-size: 1.28rem; }
  .plano-agora .itens { display: flex; flex-wrap: wrap; gap: 3px 22px; }
  .plano-agora .itens li { font-size: .96rem; }
  .plano-agora-pe {
    grid-column: 1 / -1; margin: 0; padding: 9px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .3);
  }
  .plano-agora-previa .plano-agora-pe { border-top-color: #eee2d2; }

  .plano-tab-rot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; }
  .plano-tab-rot h2 {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza);
  }
  .plano-dica { font-size: .76rem; color: var(--cinza); }

  /* a tabela rola dentro de si: o cabeçalho gruda aqui, não na página */
  .plano-tab-scroll {
    max-height: calc(100vh - 210px); overflow: auto;
    border-radius: var(--raio); padding: 0 10px 10px;
    background: rgba(255, 255, 255, .34); box-shadow: inset 0 0 0 1px #eee2d2;
    overscroll-behavior: contain;
  }
  .plano-tabela {
    display: grid; gap: 8px; min-width: min-content; align-items: start; padding-top: 10px;
    transition: grid-template-columns .18s ease;
  }

  /* faixa contínua atrás das pílulas: sem ela o conteúdo vaza pelos vãos */
  .plano-t-banda {
    grid-row: 1; grid-column: 1 / -1; z-index: 6;
    position: sticky; top: 0; height: 100%; margin-bottom: -1px;
    background: var(--creme); border-bottom: 1px solid #eee2d2;
  }
  .plano-t-cab {
    position: sticky; top: 0; z-index: 7; margin-bottom: 2px;
    background: var(--creme); border: 0; border-radius: 11px; cursor: pointer;
    padding: 9px 8px 10px; text-align: center; display: grid; gap: 1px;
    font: inherit; color: inherit; transition: background .18s;
  }
  .plano-t-cab .dn { font-size: .86rem; font-weight: 800; }
  .plano-t-cab .dd { font-size: .7rem; color: var(--cinza); font-variant-numeric: tabular-nums; }
  .plano-pt {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--verde); margin-left: 5px; vertical-align: middle;
  }
  .plano-t-cab-foco { background: var(--coral); color: var(--branco); padding: 11px 10px 12px; }
  .plano-t-cab-foco .dn { font-size: 1.02rem; }
  .plano-t-cab-foco .dd { color: rgba(255, 255, 255, .85); }
  .plano-t-cab-foco .plano-pt { background: var(--branco); }

  .plano-cel { padding: 10px 12px; border-radius: 11px; min-width: 0; }
  /* o rótulo mora dentro da célula, colado na comida */
  .plano-rot { display: flex; align-items: baseline; gap: 7px; }
  .plano-rot .h { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cinza); }

  .plano-cel-foco { background: var(--branco); box-shadow: var(--sombra); padding: 14px 16px 15px; }
  .plano-cel-foco .plano-rot {
    padding-bottom: 7px; border-bottom: 1px solid #eee2d2; margin-bottom: 9px;
  }
  .plano-cel-foco .plano-rot .ic { font-size: .98rem; line-height: 1; }
  .plano-cel-foco .plano-rot .n { font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
  .plano-cel-foco .plano-rot .h { font-size: .82rem; }
  .plano-cel-foco .itens li { font-size: .98rem; line-height: 1.42; padding-left: 16px; }

  /* colunas secundárias: só a abreviação, sem ícone e sem horário */
  .plano-cel-eco { border-top: 1px solid #eee2d2; border-radius: 0; padding: 9px 10px 10px; }
  .plano-cel-eco .plano-rot { gap: 5px; margin-bottom: 4px; }
  .plano-cel-eco .plano-rot .ic,
  .plano-cel-eco .plano-rot .h { display: none; }
  .plano-cel-eco .plano-rot .n {
    font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: #a89b93; white-space: nowrap;
  }
  .plano-cel-eco .itens li { font-size: .79rem; color: var(--cinza); padding-left: 12px; }
  .plano-cel-eco .itens li::before { width: 4px; height: 4px; top: .56em; }
  .plano-cel-eco .obs { font-size: .7rem; }
  .plano-cel-eco .plano-espelho { font-size: .6rem; }

  /* estados do dia de hoje */
  .plano-cel[data-e="feita"] .itens li { color: var(--cinza); }
  .plano-cel[data-e="feita"] .plano-rot .n { color: var(--verde-escuro); }
  .plano-cel-foco[data-e="agora"] { box-shadow: inset 0 0 0 2px var(--coral), var(--sombra); }
  .plano-cel-foco[data-e="agora"] .plano-rot .n,
  .plano-cel-foco[data-e="agora"] .plano-rot .h { color: var(--coral-escuro); }
  .plano-cel-eco[data-e="agora"] {
    box-shadow: inset 0 0 0 2px var(--coral); border-radius: 11px; border-top: 0;
  }
  .plano-cel-eco[data-e="agora"] .plano-rot .n { color: var(--coral-escuro); }
  .plano-cel-foco[data-e="proxima"] .plano-rot .n { color: #8a6d23; }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .plano-tab-scroll { max-height: calc(100vh - 190px); }
}
@media (prefers-reduced-motion: reduce) {
  .plano-tabela, .plano-chip, .plano-t-cab { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Editor do plano alimentar (painel da nutri)
   Mesma grade da tela da família, mas cada célula é um textarea com
   um alimento por linha — o formato mais rápido de preencher e o
   único que aceita colar texto de fora sem retrabalho.
   ══════════════════════════════════════════════════════════════ */

.nutri-btn-plano { background: #eef5f1; color: var(--verde-escuro); font-weight: 700; }
.nutri-acoes-topo { margin-top: 10px; }

.pe-conteudo { max-width: 1700px; }

.pe-barra {
  display: grid; gap: 12px; align-items: end;
  background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px 18px; margin: 14px 0 12px;
}
.pe-semana { margin: 0; max-width: 260px; }
.pe-ajuda { font-size: .86rem; color: var(--cinza); line-height: 1.5; max-width: 74ch; }
.pe-ajuda b { color: var(--marrom); }
.pe-versao {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .05); color: var(--cinza); font-size: .74rem; letter-spacing: .02em;
}
.pe-barra-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
/* alergias do "Sugerir": linha inteira da barra, caixas lado a lado */
.pe-alergias {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px;
  border: 1px solid rgba(0, 0, 0, .08); border-radius: var(--raio); padding: 8px 12px 10px; margin: 0;
}
.pe-alergias legend { font-size: .86rem; color: var(--marrom); padding: 0 4px; }
.pe-alergias legend small { color: var(--cinza); font-size: .78rem; }
.pe-alergia { display: inline-flex; align-items: center; gap: 5px; font-size: .88rem; cursor: pointer; }
.pe-salvar { width: auto; padding: 11px 26px; margin: 0; }
@media (min-width: 900px) {
  .pe-barra { grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; }
}

/* rolagem lateral própria: 8 colunas não cabem em tela nenhuma sem isso */
.pe-scroll {
  overflow-x: auto; padding-bottom: 10px; overscroll-behavior-x: contain;
}
.pe-grade {
  display: grid;
  grid-template-columns: 104px repeat(7, minmax(190px, 1fr));
  gap: 8px; min-width: min-content; align-items: start;
}

.pe-canto { position: sticky; left: 0; z-index: 3; background: var(--creme); }
.pe-cab {
  position: sticky; top: 0; z-index: 2;
  background: #f2e9dc; border-radius: 10px; padding: 8px 6px;
  display: grid; gap: 1px; text-align: center;
}
.pe-cab-dia { font-size: .84rem; font-weight: 800; }
.pe-cab-data { font-size: .7rem; color: var(--cinza); font-variant-numeric: tabular-nums; }

.pe-hora {
  position: sticky; left: 0; z-index: 2;
  background: var(--creme); display: grid; gap: 1px; justify-items: end;
  text-align: right; padding: 10px 8px 0 0;
}
.pe-hora-ic { font-size: 1.05rem; line-height: 1.1; }
.pe-hora-h { font-size: .76rem; font-weight: 800; color: var(--cinza); font-variant-numeric: tabular-nums; }
.pe-hora-n { font-size: .68rem; color: var(--cinza); font-weight: 600; line-height: 1.25; }

.pe-cel {
  background: var(--branco); border-radius: 10px; box-shadow: var(--sombra);
  padding: 8px; display: grid; gap: 6px;
}
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pe-txt {
  width: 100%; font: inherit; font-size: .88rem; line-height: 1.45;
  color: var(--marrom); background: #fdfaf5;
  border: 1px solid var(--linha, #eee2d2); border-radius: 8px; padding: 8px 9px;
  resize: vertical; min-height: 82px;
}
.pe-obs {
  width: 100%; font: inherit; font-size: .76rem; color: var(--cinza);
  background: transparent; border: 0; border-bottom: 1px dashed #e3d6c4;
  border-radius: 0; padding: 3px 2px;
}
.pe-txt:focus, .pe-obs:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
.pe-txt:disabled, .pe-obs:disabled { background: #f4efe7; color: #a89b93; cursor: not-allowed; }

.pe-cel-acoes { display: flex; gap: 6px; align-items: center; }
.pe-repete {
  flex: 1; min-width: 0; font: inherit; font-size: .72rem; font-weight: 600; color: var(--cinza);
  background: #f6efe4; border: 0; border-radius: 7px; padding: 5px 6px; cursor: pointer;
}
.pe-todos {
  font: inherit; font-size: .7rem; font-weight: 700; color: var(--verde-escuro);
  background: #eef5f1; border: 0; border-radius: 7px; padding: 5px 9px;
  cursor: pointer; white-space: nowrap; min-height: 28px;
}
.pe-todos:hover { background: #e0ece5; }
.pe-repete:focus-visible, .pe-todos:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }

/* célula que repete outra refeição do mesmo dia */
.pe-cel-repete { background: #f6f1e8; box-shadow: inset 0 0 0 1px #e3d6c4; }
.pe-cel-repete .pe-repete { background: var(--verde); color: var(--branco); }

@media (max-width: 899px) {
  .pe-grade { grid-template-columns: 88px repeat(7, minmax(170px, 1fr)); }
  .pe-barra { padding: 14px; }
}

/* ── diário editável (projeto 2) — app da família ── */
.reg-acoes { display: flex; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #eee3d5; }
.reg-acoes button { flex: 1; border-radius: 10px; padding: 9px 8px; font-size: .88rem; font-weight: 600; cursor: pointer; background: var(--branco); }
.reg-btn-editar { border: 1.5px solid var(--verde); color: var(--verde-escuro); }
.reg-btn-editar:hover { background: #e5f0ea; }
.reg-btn-excluir { border: 1.5px solid #f0c4c4; color: #b3261e; }
.reg-btn-excluir:hover { background: #fde2e2; }
.reg-trava { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: #f3efe9; color: var(--cinza); font-size: .8rem; }
.reg-form-aviso { font-size: .82rem; background: #eef6f1; color: var(--verde-escuro); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }

/* ── diário editável (projeto 2) — painel da nutri ── */
.selo-editado { font-size: .72rem; font-weight: 700; background: #fff3cd; color: #8a6100; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.diario-card.diario-excluido { background: #f4f1ee; border-left: 4px solid #b3261e; }
.diario-card.diario-excluido .diario-nome b { color: var(--cinza); text-decoration: line-through; }
.selo-excluido { display: inline-block; font-size: .74rem; font-weight: 700; color: #b3261e; background: #fde2e2; border-radius: 10px; padding: 2px 8px; margin-top: 6px; }
.versoes { margin-top: 10px; border: 1px solid #f0e2c2; background: #fffaf0; border-radius: 10px; padding: 8px 10px; }
.versoes-tit { font-size: .8rem; font-weight: 700; color: #8a6100; margin-bottom: 6px; }
.versao { font-size: .82rem; padding: 6px 0; border-top: 1px dashed #f0e2c2; }
.versao:first-of-type { border-top: none; }
.versao small { display: block; color: var(--cinza); font-size: .74rem; }
.versao .antes { text-decoration: line-through; color: #b3261e; }
.versao .depois { color: var(--verde-escuro); font-weight: 600; }
.removidos { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; color: var(--cinza); margin: 10px 0; padding: 8px 10px; border: 1px dashed #d9cfc4; border-radius: 10px; }
.removidos button { border: none; background: none; color: var(--verde-escuro); font-weight: 600; cursor: pointer; }
.sem-coment { font-size: .8rem; color: var(--cinza); margin-top: 8px; }

/* ── aviso de privacidade e ciência (projeto 4) ── */
.tela-ciencia { min-height: 100vh; background: var(--creme); }
.ciencia { max-width: 560px; margin: 0 auto; padding: 18px 16px 0; }
.ciencia h2 { font-size: 1.3rem; margin-bottom: 6px; }
.ciencia .sub { color: var(--cinza); font-size: .92rem; margin-bottom: 14px; }
.ciencia-resumo { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ciencia-resumo li { display: flex; gap: 10px; font-size: .9rem; line-height: 1.4; }
.ciencia-resumo li span:first-child { font-size: 1.2rem; }
.ciencia-ler { display: inline-block; margin-top: 14px; border: none; background: none; padding: 0; color: var(--verde-escuro); font-weight: 700; text-decoration: underline; font-size: .95rem; cursor: pointer; }
/* celular: caixa e botão presos no rodapé, ao alcance do polegar */
.ciencia-rodape { position: sticky; bottom: 0; margin: 18px -16px 0; background: var(--branco); border-top: 1px solid #eee3d5;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px rgba(61,44,41,.06); }
.ciencia-check { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.4; margin-bottom: 12px; cursor: pointer; }
.ciencia-check input { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; accent-color: var(--coral); }
.ciencia-rodape .btn-gerar { width: 100%; margin: 0; }
.ciencia-rodape .btn-gerar:disabled { opacity: .45; cursor: default; }
@media (min-width: 600px) {
  .ciencia { padding-top: 40px; }
  .ciencia-centro { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 26px 30px; }
  .ciencia-rodape { position: static; margin: 18px 0 0; padding: 0; border: none; box-shadow: none; background: none; }
}
.aviso-fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(61,44,41,.45); display: flex; align-items: center; justify-content: center; }
.aviso-folha { background: var(--branco); width: 100%; height: 100%; display: flex; flex-direction: column; }
@media (min-width: 720px) { .aviso-folha { width: 680px; height: auto; max-height: 88vh; border-radius: var(--raio); overflow: hidden; } }
.aviso-cab { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #eee3d5; }
.aviso-cab b { font-size: 1.05rem; }
.aviso-fechar { border: none; background: #f3efe9; border-radius: 20px; padding: 6px 12px; font-weight: 600; cursor: pointer; }
.aviso-texto { overflow-y: auto; padding: 14px 18px 24px; font-size: .88rem; line-height: 1.55; }
.aviso-texto h4 { font-size: .94rem; margin: 14px 0 2px; color: var(--coral-escuro); }
.aviso-versao { font-size: .76rem; color: var(--cinza); }
.aviso-pendente { background: #fff3cd; border-radius: 4px; padding: 0 3px; }
.btn-privacidade { border: none; background: none; color: var(--verde-escuro); font-weight: 600; font-size: .8rem; cursor: pointer; padding: 0; text-decoration: underline; }
/* painel */
.aviso-entregue { display: flex; gap: 10px; align-items: flex-start; background: #eef6f1; border-radius: 10px; padding: 10px; font-size: .84rem; margin: 6px 0 12px; cursor: pointer; }
.aviso-entregue input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--verde); }
.aviso-entregue button { border: none; background: none; padding: 0; color: var(--verde-escuro); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit; }
.selo-nunca { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: 10px; padding: 2px 8px; background: #fff3cd; color: #8a6100; }
.selo-nunca.vermelho { background: #fde2e2; color: #b3261e; }
.selo-ciencia { font-size: .76rem; color: var(--verde-escuro); font-weight: 600; }
.rodape-aviso { text-align: center; font-size: .78rem; color: var(--cinza); margin-top: 14px; }

/* ── Seletor de criança (projeto 5a: várias crianças por responsável) ── */
.seletor-criancas { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.seletor-crianca {
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px;
  border: 2px solid var(--coral); background: var(--branco); color: var(--marrom);
  font-size: 1rem; cursor: pointer;
}
.seletor-crianca:hover, .seletor-crianca:focus-visible { background: var(--creme); outline: none; }
.seletor-crianca small { color: var(--cinza); }

/* ── Painel: responsáveis dentro do cartão da criança (projeto 5a) ── */
.nutri-resps { margin-top: 12px; border-top: 1px dashed #eadfd3; padding-top: 10px; }
.nutri-resps-tit { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); margin-bottom: 6px; }
.nutri-resp-item { padding: 8px 0; border-bottom: 1px solid #f3ebe1; }
.nutri-resp-item:last-child { border-bottom: 0; }

/* ── Assistente do convite (projeto 5b, Proposta 1) ── */
.convite { text-align: left; }
.convite-progresso { display: flex; gap: 6px; margin-bottom: 10px; }
.convite-progresso span { flex: 1; height: 6px; border-radius: 3px; background: #eadfd3; }
.convite-progresso span.feito { background: var(--coral); }
.convite-passo { font-size: .78rem; color: var(--cinza); margin: 0 0 2px; }
.convite-erro { color: #b3261e; font-size: .8rem; min-height: 1em; margin: 2px 0 0; }
.convite-crianca { position: relative; border: 2px solid #f0e6da; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.convite-tirar { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--cinza); cursor: pointer; font-size: .8rem; }
.convite-idade { font-size: .8rem; color: var(--verde-escuro); margin: 4px 0 0; }
.convite-ligado { background: #fff7e6; border-radius: 10px; padding: 10px; font-size: .9rem; }
.convite-botoes { display: flex; gap: 8px; margin-top: 14px; }
.convite-botoes .auth-btn { flex: 1; margin: 0; }
.convite-resumo p { margin: 4px 0; }
.convite-email { font-size: 1.05rem; font-weight: 700; }
.convite-lista { list-style: none; padding: 0; margin: 8px 0 0; }

/* ── Painel: convites (projeto 5b) ── */
.convite-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f3ebe1; font-size: .9rem; }
.convite-item:last-child { border-bottom: 0; }
.chip-convite { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; margin-left: 4px; }
.chip-convite.aberto { background: #fff3cd; color: #7a5a00; }
.chip-convite.usado { background: #d8efe2; color: #22553b; }
.chip-convite.expirado { background: #eee; color: #666; }
.convite-gerado { margin-top: 12px; border: 2px dashed var(--verde); border-radius: 12px; padding: 12px; }
.convite-link { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.convite-wa { display: inline-flex; align-items: center; justify-content: center; background: #25d366; color: #08331a; text-decoration: none; width: auto; padding: 10px 14px; margin: 0; }
.convite-wa:hover { background: #1fb457; }
.convite-compartilhar { min-width: 42px; }
.convite-qr { max-width: 240px; margin: 10px auto 0; }
.convite-qr svg { width: 100%; height: auto; }
.dica-outro-filho { text-align: center; font-size: .82rem; color: var(--cinza); margin: 14px 0 4px; }

/* ── Painel: lista + ficha (Proposta B, 03/10/2026) ── */
.painel-b { max-width: 1280px; }
.painel-mb { display: grid; gap: 16px; }
.painel-mb > * { min-width: 0; }
.painel-lista { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); display: flex; flex-direction: column; min-height: 0; }
.painel-lista-topo { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 0; }
.painel-lista-topo .painel-busca { flex: 1 1 100%; min-width: 0; margin: 0; font-size: .95rem; padding: 9px 12px; }
.painel-lista-topo .painel-chips { width: 100%; margin: 0; padding-bottom: 4px; }
.painel-chips .chip { padding: 5px 10px; font-size: .8rem; }
.painel-itens { overflow-y: auto; padding: 4px 0 8px; }
.painel-fam { border-top: 1px solid #f3ebe1; padding: 6px 0 4px; }
.painel-fam-cab { display: flex; align-items: center; gap: 6px; padding: 2px 14px 4px; font-size: .74rem; color: var(--cinza); }
.painel-fam-cab i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; background: var(--cor); }
.painel-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; border: 0; border-left: 4px solid transparent; background: none; text-align: left; color: var(--marrom); font-size: .92rem; cursor: pointer; }
.painel-item:hover { background: #fbf6ef; }
.painel-item.sel { background: #fdeee8; border-left-color: var(--coral); }
.painel-item .nutri-avatar { width: 34px; height: 34px; font-size: 1.1rem; }
.painel-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.painel-item-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-item-txt small { color: var(--cinza); font-size: .78rem; }
.painel-item.painel-apagado { opacity: .45; }
.painel-item-sem { border-top: 1px solid #f3ebe1; margin-top: 4px; }
.painel-ponto { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.painel-ponto.on { background: #4fb07c; }
.painel-ponto.off { background: #d0574a; }
.painel-seta { color: var(--cinza); }
.painel-nada, .painel-vazio-total { padding: 12px 14px; margin: 0; }
.painel-voltar { border: 0; background: none; color: var(--coral-escuro); font-weight: 700; font-size: .95rem; padding: 2px 0 10px; cursor: pointer; }
.painel-irmaos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: var(--branco); border-radius: 12px; border-left: 5px solid var(--cor); box-shadow: var(--sombra); padding: 6px 8px; margin-bottom: 10px; }
.painel-irmaos span { font-size: .74rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; }
.painel-aba-irmao { border: 0; background: #f6efe6; color: var(--marrom); border-radius: 9px; padding: 6px 12px; font-weight: 700; font-size: .86rem; cursor: pointer; }
.painel-aba-irmao.sel { background: var(--marrom); color: var(--branco); }
.painel-gaveta-fundo { position: fixed; inset: 0; background: rgba(61, 44, 41, .35); z-index: 40; }
.painel-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; background: var(--creme); z-index: 41; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: -6px 0 20px rgba(0, 0, 0, .15); }
.painel-gaveta #convite-gerar { width: 100%; }
.painel-fechar { position: sticky; top: 0; float: right; z-index: 1; width: 34px; height: 34px; margin-top: 8px; border: 0; border-radius: 50%; background: var(--branco); box-shadow: var(--sombra); cursor: pointer; }

/* celular: lista OU ficha */
@media (max-width: 759px) {
  .painel-mb.com-ficha .painel-lista { display: none; }
  .painel-mb:not(.com-ficha) .painel-fichas { display: none; }
}
/* tablet e PC: lista fixa ao lado, rolando sozinha */
@media (min-width: 760px) {
  .painel-mb { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .painel-lista { position: sticky; top: calc(var(--topo-h, 120px) + 12px); max-height: calc(100vh - var(--topo-h, 120px) - 28px); }
  .painel-voltar { display: none; }
}
@media (min-width: 1100px) {
  .painel-mb { grid-template-columns: 340px minmax(0, 1fr); }
}

/* ── Painel: consultas, atenção e mapa (03/10/2026) ──
   docs/superpowers/specs/2026-10-03-consultas-atencao-mapa-design.md */

/* largura estável: o espaço da barra de rolagem fica reservado, e a barra
   (fina, na cor do app) não empurra o conteúdo quando aparece ou some */
html { scrollbar-gutter: stable; }
.painel-itens { scrollbar-gutter: stable; }
html, .painel-itens { scrollbar-width: thin; scrollbar-color: #d8cdc1 transparent; }
.painel-itens::-webkit-scrollbar, html::-webkit-scrollbar { width: 8px; }
.painel-itens::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: #d8cdc1; border-radius: 4px; }
.painel-itens::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: transparent; }

/* filtros: 4 colunas iguais, nome em cima e número embaixo */
.painel-lista-topo .painel-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; overflow: visible; }
.painel-chips .chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px; border-radius: 10px; font-size: .74rem; line-height: 1.2; min-width: 0; white-space: normal; text-align: center; }
.painel-chips .chip b { font-size: .92rem; }
.painel-chips .chip-atencao { border-color: #f0c4b8; color: #b04a33; font-weight: 700; }
.painel-chips .chip-atencao.ativo { background: #b04a33; border-color: #b04a33; color: var(--branco); }

/* linha da lista: sinais e consulta */
.painel-item-txt small.painel-atraso { color: #b04a33; font-weight: 700; }
.painel-sinais { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 96px; }
.sinal { font-size: .7rem; font-weight: 800; border-radius: 7px; padding: 1px 5px; line-height: 1.4; white-space: nowrap; }
.sinal-reacao, .sinal-atrasado { background: #fde2dd; color: #9c3a26; }
.sinal-novos { background: #e2ecfb; color: #2f5ea8; }
.sinal-parado { background: #efe9e2; color: #5f544e; }
.sinal-vence { background: #fff1cc; color: #7a5600; }
.sinal-nunca { background: #f1e6f8; color: #6d3f8f; }

/* cabeçalho e abas da ficha */
.ficha-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; margin-bottom: 10px; }
.ficha-cab .nutri-avatar { width: 50px; height: 50px; font-size: 1.7rem; }
.ficha-cab-txt { flex: 1 1 160px; min-width: 0; }
.ficha-cab-txt h2 { font-size: 1.2rem; margin: 0; }
.ficha-cab-txt small { color: var(--cinza); font-size: .82rem; }
.ficha-cab-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nutri-btn-ver { border-color: var(--verde); color: var(--verde-escuro); }
.ficha-abas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 2px solid #eadfd3; margin-bottom: 12px; }
.ficha-aba { border: 0; background: none; padding: 9px 4px; font-weight: 700; font-size: .9rem; color: var(--cinza); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; min-width: 0; white-space: nowrap; }
.ficha-aba.sel { color: var(--marrom); border-bottom-color: var(--coral); }
.ficha-aba-curto { display: none; }
.ficha-aba-n { display: inline-block; background: #b04a33; color: var(--branco); border-radius: 999px; font-size: .68rem; padding: 0 6px; margin-left: 4px; }
.ficha-tit { font-size: .98rem; margin: 0 0 8px; }
.ficha-tit small { color: var(--cinza); font-weight: 400; font-size: .8rem; }
.ficha-duas { display: grid; gap: 10px; }
.ficha-duas > .cartao { margin-bottom: 0; }
.ficha-painel > .cartao, .ficha-painel > .ficha-duas, .ficha-painel [data-async] > .cartao { margin-bottom: 10px; }
.ficha-cheio { width: 100%; margin-top: 10px; }
.ficha-nada { margin: 0; }

/* precisa de atenção */
.ficha-alerta { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed #eadfd3; }
.ficha-alerta:first-of-type { border-top: 0; }
.ficha-alerta-txt { flex: 1; min-width: 0; font-size: .88rem; }
.ficha-alerta-txt small { display: block; color: var(--cinza); }
.ficha-alerta .nutri-btn { flex: 0 0 170px; }

/* consultas */
.ficha-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ficha-data { background: #faf5ec; border-radius: 12px; padding: 10px 12px; }
.ficha-data small { display: block; font-size: .72rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .05em; }
.ficha-data b { font-size: 1.05rem; }
.ficha-data em { display: block; font-style: normal; font-size: .8rem; color: var(--cinza); }
.ficha-data-atraso { background: #fde8e3; }
.ficha-data-atraso em { color: #9c3a26; font-weight: 700; }
.ficha-form { display: flex; flex-direction: column; gap: 10px; }
.ficha-anotacao { resize: vertical; min-height: 110px; font: inherit; }
.ficha-consulta { border-top: 1px dashed #eadfd3; padding: 10px 0; }
.ficha-consulta:first-of-type { border-top: 0; }
.ficha-consulta-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ficha-consulta-cab small { color: var(--cinza); }
.ficha-priv { font-size: .7rem; background: #efe9e2; color: #5f544e; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.ficha-editar { margin-left: auto; min-width: 44px; }
.ficha-anotacao-txt { white-space: pre-line; font-size: .9rem; margin: 6px 0 0; overflow-wrap: anywhere; }

/* grades de ações com colunas iguais; a ação que encerra fica separada */
.ficha-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ficha-grade .nutri-btn { width: 100%; }
.ficha-larga { grid-column: 1 / -1; }
.ficha-perigo { margin-top: 4px; padding-top: 12px; border-top: 1px dashed #f0c4c4; }
.ficha-perigo .nutri-btn { width: 100%; }
.painel-ficha .nutri-resp-item .nutri-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.painel-ficha .nutri-resp-item .nutri-acoes .nutri-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ficha-perigo-resp { border-top: 0; padding-top: 8px; margin-top: 0; }
.ficha-perigo-resp:empty { display: none; }
.painel-ficha .nutri-resp-item .nutri-acoes .nutri-btn { width: 100%; }

/* mapa da introdução */
.mapa-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mapa-topo .secao-sub { flex: 1 1 200px; margin: 0; }
.mapa-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--cinza); margin-bottom: 10px; }
.mapa-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1.5px solid; }
.mapa-grupo { margin-bottom: 12px; }
.mapa-grupo h4 { font-size: .86rem; margin: 0 0 6px; }
.mapa-grupo h4 small { color: var(--cinza); font-weight: 400; }
.mapa-alims { display: flex; flex-wrap: wrap; gap: 6px; }
.al { border: 1.5px solid transparent; border-radius: 9px; padding: 4px 9px; font-size: .82rem; font-weight: 600; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; color: var(--marrom); }
.al-x { font-size: .72rem; font-weight: 800; opacity: .8; }
.al-boa { background: #e3f3ea; border-color: #b9e0c9; }
.al-parcial { background: #fbf1d3; border-color: #efd88f; }
.al-rej { background: #fbe2dd; border-color: #f1b9ae; }
.al-sem { background: #eef0f2; border-color: #d5d9de; }
.al-nunca { background: var(--branco); border: 1.5px dashed #d8cdc1; color: var(--cinza); font-weight: 400; }
.al-reacao, .al-com-reacao { box-shadow: 0 0 0 2px #b04a33 inset; }
.al-sel { outline: 2px solid var(--marrom); outline-offset: 1px; }
.mapa-detalhe { background: #fff7ef; border-left: 4px solid var(--coral); border-radius: 10px; padding: 8px 12px; font-size: .86rem; margin-top: 8px; overflow-wrap: anywhere; }
.mapa-nota { font-size: .8rem; margin: 6px 0 0; }
.barra-g { display: flex; align-items: center; gap: 8px; font-size: .82rem; margin: 6px 0; }
.barra-g-nome { flex: 0 0 44%; min-width: 0; }
.barra-g-trilho { flex: 1; height: 10px; background: #f1ebe3; border-radius: 5px; overflow: hidden; display: flex; }
.barra-g-trilho i { display: block; height: 100%; }
.barra-g-trilho .al-boa { background: #4fb07c; }
.barra-g-trilho .al-parcial { background: #e3b53b; }
.barra-g-trilho .al-rej { background: #d0574a; }
.barra-g-trilho .al-sem { background: #b9c0c8; }
.barra-g-n { flex: 0 0 38px; text-align: right; color: var(--cinza); font-size: .76rem; }

/* foco visível para quem usa teclado */
.painel-b button:focus-visible, .painel-gaveta button:focus-visible { outline: 3px solid #2f5ea8; outline-offset: 2px; }

/* telas de toque: alvos de pelo menos 44 px */
@media (pointer: coarse) {
  .painel-b .nutri-btn, .ficha-aba, .painel-chips .chip, .painel-aba-irmao, .painel-item { min-height: 44px; }
  .al { min-height: 38px; }
}

@media (min-width: 1100px) {
  .ficha-duas { grid-template-columns: 1fr 1fr; }
  .ficha-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ficha-grade-3 .ficha-larga { grid-column: auto; }
  .ficha-perigo .nutri-btn { width: auto; min-width: 260px; }
  .painel-ficha .nutri-resp-item .nutri-acoes { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .painel-ficha .nutri-resp-item .nutri-acoes .nutri-btn:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 1099px) {
  .ficha-aba-longo { display: none; }
  .ficha-aba-curto { display: inline; }
}
@media (max-width: 519px) {
  .ficha-cab-botoes { flex: 1 1 100%; }
  .ficha-alerta { flex-wrap: wrap; }
  .ficha-alerta .nutri-btn { flex: 1 1 100%; }
  .ficha-datas { grid-template-columns: 1fr 1fr; }
  .barra-g-nome { flex-basis: 40%; }
}

/* app da família: retorno marcado pela nutri (03/10/2026) */
.proxima-consulta { margin: 8px auto 0; max-width: 720px; text-align: center; font-size: .88rem; color: var(--verde-escuro); background: #e5f0ea; border-radius: 999px; padding: 6px 14px; }

/* conteúdo do app: recado para todas as famílias e foto do corte no modal */
.recado-geral { margin: 6px 0 0; padding: 8px 12px; border-radius: 10px; background: #F1ECF6; color: #4C3B66; font-size: .9rem; }
.modal-foto { margin: 8px 0 0; }
.modal-foto img { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 12px; }
.detalhe-rev { font-size: .8rem; color: var(--cinza); margin: 6px 0 0; }

/* ── Central de conteúdo (painel da nutricionista) ─────────────────────
   Visual do mockup aprovado "Central de conteúdo A+C" (tokens do conceito D,
   os mesmos da folha da refeição). docs/superpowers/specs/2026-10-03-central-de-conteudo-design.md */
.central {
  --p: #BB563D; --p-d: #8E3D27; --p-soft: #FBE9E3; --bg: #FBF7F1; --sf: #FFFFFF; --sk: #F4EDE3;
  --tx: #3D2C29; --tx2: #5E4F4A; --tx3: #77675F; --ln: #EDE4D8; --ln2: #DCCFC0;
  --ok: #3F6F57; --ok-soft: #E5F0EA; --wr: #8A5A00; --wr-soft: #FFF3D6; --er: #B23A2E; --er-soft: #FBE8E5; --nu: #4C3B66; --nu-soft: #F1ECF6;
  --f: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --m: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  font: 14px/1.45 var(--f); color: var(--tx); background: var(--bg); min-height: 100vh; position: relative;
}
.central *, .central *::before, .central *::after { box-sizing: border-box; }
.central button, .central input, .central select, .central textarea { font-family: var(--f); color: var(--tx); }
.central button { cursor: pointer; }
.central :focus-visible { outline: 3px solid var(--p-d); outline-offset: 1px; }
.central .ct-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ct-topo { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: var(--sf); border-bottom: 3px solid #81B29A; position: sticky; top: 0; z-index: 6; flex-wrap: wrap; }
.ct-volta, .ct-volta2 { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ln2); background: var(--sf); border-radius: 10px; padding: 8px 12px; font: 600 13.5px/1 var(--f); min-height: 40px; }
.ct-volta2 { border: 0; padding: 0; min-height: 32px; color: var(--p-d); width: max-content; }
.ct-topo-t { display: grid; gap: 2px; flex: 1; min-width: 160px; }
.ct-topo-t h1 { margin: 0; font: 700 19px/1.15 var(--f); letter-spacing: -.015em; }
.ct-k { font: 600 10.5px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.ct-status { font-size: 12.5px; color: var(--tx2); background: var(--sk); border-radius: 999px; padding: 6px 12px; }
.ct-status.erro { background: var(--er-soft); color: var(--er); }
.ct-corpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.ct-corpo.sel { grid-template-columns: 220px minmax(0, 1fr) 380px; }
.ct-nav { border-right: 1px solid var(--ln); background: var(--sf); padding: 12px 8px; display: grid; align-content: start; gap: 2px; position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow: auto; }
.ct-nav button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 10px; font: 600 13.5px/1.2 var(--f); color: var(--tx2); text-align: left; min-height: 40px; }
.ct-nav button span { flex: 1; }
.ct-nav button[aria-current="true"] { background: var(--p-soft); color: var(--p-d); }
.ct-nav hr { border: 0; border-top: 1px solid var(--ln); margin: 8px 4px; }
.ct-nav .ct-pub em { font: 600 11px/1 var(--m); font-style: normal; background: var(--nu); color: #fff; padding: 3px 7px; border-radius: 999px; }
.ct-main { padding: 18px 22px 40px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ct-tit { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ct-tit h2 { margin: 0; font: 700 21px/1.2 var(--f); letter-spacing: -.015em; }
.ct-tit span { color: var(--tx3); font-size: 13px; }
.central h3 { font: 700 14.5px/1.2 var(--f); margin: 8px 0 0; }
.ct-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-busca { flex: 1; min-width: 180px; position: relative; }
.ct-busca .ct-i { position: absolute; left: 10px; top: 11px; color: var(--tx3); }
.central .ct-busca input[type=search] { padding-left: 34px; }
.ct-btn:disabled { opacity: .45; cursor: not-allowed; }
.central input[type=text], .central input[type=search], .central input[type=date], .central select, .central textarea {
  width: 100%; border: 1.5px solid var(--ln2); border-radius: 10px; background: var(--sf); padding: 9px 10px; font-size: 14px; line-height: 1.4; min-height: 40px;
}
.ct-bar input, .ct-bar select { width: auto; flex: 1; min-width: 140px; }
.central textarea { resize: vertical; }
.ct-btn { min-height: 40px; padding: 0 14px; border-radius: 12px; border: 0; font: 650 14px/1 var(--f); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; width: max-content; }
.ct-btn.pr { background: var(--p); color: #fff; }
.ct-btn.se { background: var(--sf); box-shadow: inset 0 0 0 1.5px var(--ln2); }
.ct-btn.gh { background: transparent; color: var(--p-d); padding: 0 6px; }
.ct-btn.perigo { color: var(--er); }
.ct-btn.perigo-pr { background: var(--er); color: #fff; }
.ct-btn .ct-i { width: 16px; height: 16px; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--ln2); background: var(--sf); font: 600 12.5px/1 var(--f); white-space: nowrap; }
.ct-chip[aria-pressed="true"] { background: var(--tx); color: #fff; border-color: var(--tx); }
.ct-chip b { font: 600 11px/1 var(--m); opacity: .75; }
.ct-chip button { border: 0; background: none; padding: 0; display: grid; color: var(--tx3); }
.ct-chip.fixo { background: var(--sk); border-color: var(--sk); }
.ct-chips, .ct-syn { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-st { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px/1.1 var(--f); padding: 4px 8px; border-radius: 999px; white-space: nowrap; border: 0; }
.ct-st .ct-i { width: 13px; height: 13px; }
.ct-st.ok { background: var(--ok-soft); color: var(--ok); }
.ct-st.no { background: var(--er-soft); color: var(--er); }
.ct-st.fora { background: var(--sk); color: var(--tx2); }
.ct-st.al { background: var(--wr-soft); color: var(--wr); }
.ct-st.rasc { background: var(--nu-soft); color: var(--nu); }
.ct-st.sug { background: var(--sf); color: var(--p-d); box-shadow: inset 0 0 0 1.5px var(--ln2); }
.ct-av { width: 30px; height: 30px; border-radius: 50%; background: var(--sk); display: grid; place-items: center; flex: none; }
.ct-av svg { width: 26px; height: 26px; }
.ct-info { font-size: 13px; color: var(--tx2); background: var(--sk); border-radius: 10px; padding: 9px 11px; margin: 0; }
.ct-vazio { color: var(--tx3); padding: 18px 4px; margin: 0; }
.ct-de { font-size: 12px; color: var(--tx3); }
.ct-mono { font: 500 12.5px/1 var(--m); color: var(--tx2); font-variant-numeric: tabular-nums; }
.ct-rasc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--nu-soft); color: var(--nu); border-radius: 12px; padding: 10px 12px; font: 600 13.5px/1.3 var(--f); }
.ct-rasc span { flex: 1; }
.ct-pend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ct-pc { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; text-align: left; background: var(--sf); border: 1.5px solid var(--ln); border-radius: 16px; padding: 14px; width: 100%; }
.ct-pc > :not(.ct-pc-ic) { grid-column: 2; }
.ct-pc-ic { grid-row: 1 / span 5; grid-column: 1; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.ct-pc-ic.r { background: var(--er-soft); color: var(--er); }
.ct-pc-ic.w { background: var(--wr-soft); color: var(--wr); }
.ct-pc-ic.n { background: var(--nu-soft); color: var(--nu); }
.ct-pc-ic.g { background: var(--ok-soft); color: var(--ok); }
.ct-pc-n { font: 600 26px/1 var(--m); font-variant-numeric: tabular-nums; }
.ct-pc-t { font: 700 14.5px/1.25 var(--f); }
.ct-pc small { font-size: 12.5px; color: var(--tx3); line-height: 1.35; }
.ct-barra { display: block; height: 5px; border-radius: 3px; background: var(--ln); margin-top: 8px; overflow: hidden; }
.ct-barra i { display: block; height: 100%; background: var(--ok); }
.ct-pc-cta { display: inline-flex; align-items: center; gap: 4px; font: 650 13px/1 var(--f); color: var(--p-d); margin-top: 10px; }
.ct-pc-cta .ct-i { width: 15px; height: 15px; }
.ct-pc.zero { opacity: .6; }
.ct-ini2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-ini2 > div { display: grid; gap: 8px; align-content: start; }
.ct-atal { display: grid; gap: 6px; }
.ct-atal button { display: flex; align-items: center; gap: 8px; background: var(--sf); border: 1.5px solid var(--ln); border-radius: 12px; padding: 10px 12px; font: 650 13.5px/1.2 var(--f); text-align: left; min-height: 44px; }
.ct-atal button .ct-i { color: var(--p-d); }
.ct-tb { border: 1px solid var(--ln); border-radius: 14px; background: var(--sf); overflow: hidden; }
.ct-h, .ct-rw { display: grid; grid-template-columns: minmax(150px, 1.6fr) minmax(90px, 1fr) 64px minmax(80px, .9fr) 122px; gap: 10px; align-items: center; padding: 8px 12px; }
.ct-h.ct-h4, .ct-rw.ct-h4 { grid-template-columns: minmax(160px, 2fr) minmax(100px, 1fr) minmax(90px, 1fr) minmax(130px, 1.2fr); }
.ct-h { font: 600 10.5px/1.2 var(--m); letter-spacing: .07em; text-transform: uppercase; color: var(--tx3); background: var(--bg); border-bottom: 1px solid var(--ln); }
.ct-rw { width: 100%; border: 0; border-bottom: 1px solid var(--ln); background: none; text-align: left; font-size: 13.5px; min-height: 48px; }
.ct-rw:last-child { border-bottom: 0; }
button.ct-rw:hover { background: #FDFAF6; }
.ct-rw[aria-current="true"] { background: var(--p-soft); }
.ct-nm { display: flex; align-items: center; gap: 8px; font-weight: 650; min-width: 0; }
.ct-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-grp { color: var(--tx2); font-size: 12.5px; }
.ct-lnk { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 0; font: 600 13px/1.2 var(--f); color: var(--p-d); text-align: left; }
.ct-lnk small { color: var(--tx3); font-weight: 500; }
.ct-drw { border-left: 1px solid var(--ln); background: var(--sf); display: flex; flex-direction: column; position: sticky; top: 64px; height: calc(100vh - 64px); min-width: 0; }
.ct-drw-h { padding: 14px 16px 0; display: grid; gap: 10px; }
.ct-r { display: flex; gap: 10px; align-items: center; }
.ct-drw-h h3 { margin: 0; font: 700 18px/1.2 var(--f); flex: 1; }
.ct-x { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ln); background: var(--sf); display: grid; place-items: center; flex: none; }
.ct-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--ln); overflow-x: auto; }
.ct-abas button { border: 0; background: none; padding: 10px; font: 600 12.5px/1 var(--f); color: var(--tx3); border-bottom: 2.5px solid transparent; white-space: nowrap; min-height: 40px; }
.ct-abas button[aria-selected="true"] { color: var(--p-d); border-bottom-color: var(--p); }
.ct-drw-c { flex: 1; overflow: auto; padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.ct-drw-f { border-top: 1px solid var(--ln); padding: 10px 16px; display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ct-fld { display: grid; gap: 5px; }
.ct-fld > span { font: 600 12px/1.2 var(--f); color: var(--tx2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.central .ct-fld > span select { width: auto; min-height: 30px; padding: 3px 6px; font-size: 12px; }
.ct-fld small { font-size: 11.5px; color: var(--tx3); }
.ct-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct-tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ct-fila { display: flex; align-items: center; gap: 8px; background: var(--er-soft); color: var(--er); border-radius: 10px; padding: 8px 10px; font: 600 12.5px/1.3 var(--f); margin: 0; }
.ct-cortes { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.ct-cortes button { border: 1.5px solid var(--ln2); background: var(--sf); border-radius: 10px; padding: 4px 2px 6px; display: grid; justify-items: center; gap: 2px; font: 600 10.5px/1.1 var(--f); color: var(--tx2); min-height: 44px; }
.ct-cortes button svg { width: 34px; height: 34px; }
.ct-cortes button[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.ct-foto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ct-foto img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; background: var(--sk); }
.ct-fam { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 14px; display: grid; gap: 8px; }
.ct-fam b { font: 700 15px/1.2 var(--f); }
.ct-fam p { margin: 0; font-size: 13.5px; color: var(--tx2); }
.ct-fam.vaz p { color: var(--tx3); }
.ct-cut { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; background: var(--sk); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.ct-cut svg { width: 40px; height: 40px; display: block; }
.ct-teste { display: grid; gap: 6px; background: var(--bg); border: 1px dashed var(--ln2); border-radius: 12px; padding: 10px; }
.ct-teste output { font-size: 13px; color: var(--tx2); }
.ct-confirma { display: grid; gap: 8px; background: var(--nu-soft); color: var(--nu); border-radius: 12px; padding: 12px; font-size: 13.5px; }
.ct-lista-cf { display: grid; gap: 8px; }
.ct-cf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 12px 14px; }
.ct-cf b { font: 700 14.5px/1.25 var(--f); }
.ct-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; grid-row: span 3; grid-column: 2; }
.central .ct-acts select { width: auto; max-width: 230px; }
.ct-abre { font-size: 13px; color: var(--tx2); }
.ct-abre strong { color: var(--tx); }
.ct-rec { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ct-rec-l { display: grid; gap: 10px; }
.ct-rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ct-rcard { border: 1.5px solid var(--ln); background: var(--sf); border-radius: 14px; padding: 10px 12px; text-align: left; display: grid; gap: 4px; }
.ct-rcard b { font: 700 13.5px/1.25 var(--f); }
.ct-rcard small { font: 500 11.5px/1.2 var(--m); color: var(--tx3); }
.ct-rcard[aria-current="true"] { border-color: var(--p); background: var(--p-soft); }
.ct-form { display: grid; gap: 10px; }
.ct-estreito { max-width: 560px; }
.ct-alims { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-alims .ct-st { gap: 6px; padding: 3px 6px 3px 3px; }
.ct-alims .ct-st .ct-av { width: 22px; height: 22px; }
.ct-alims .ct-st .ct-av svg { width: 18px; height: 18px; }
.ct-alims .ct-st button { border: 0; background: none; padding: 0 2px; font: 600 11px/1 var(--f); color: inherit; text-decoration: underline; }
.ct-prev { position: sticky; top: 80px; border: 1px solid var(--ln); border-radius: 22px; background: var(--sf); overflow: hidden; }
.ct-prev-h { padding: 12px 14px 8px; display: grid; gap: 4px; }
.ct-prev-h b { font: 700 17px/1.2 var(--f); }
.ct-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.ct-stats div { padding: 8px 12px; display: grid; gap: 2px; }
.ct-stats div + div { border-left: 1px solid var(--ln); }
.ct-stats small { font: 500 10px/1 var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); }
.ct-sec { font: 600 10.5px/1 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); padding: 10px 14px 0; }
.ct-prev ol, .ct-prev ul { margin: 0; padding: 10px 14px 12px 30px; font-size: 13px; color: var(--tx2); display: grid; gap: 4px; }
.ct-dica { margin: 0; padding: 0 14px 14px; font-size: 12.5px; color: var(--tx3); }
.ct-grid { overflow: auto; border: 1px solid var(--ln); border-radius: 12px; background: var(--sf); max-height: 70vh; }
.ct-grid table { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 960px; width: 100%; }
.ct-grid th, .ct-grid td { border-bottom: 1px solid var(--ln); border-right: 1px solid var(--ln); padding: 0 10px; height: 40px; text-align: left; vertical-align: middle; }
.ct-grid th { position: sticky; top: 0; background: var(--bg); z-index: 2; font: 600 10.5px/1.2 var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--tx3); white-space: nowrap; }
.ct-grid th:first-child, .ct-grid td:first-child { position: sticky; left: 0; background: var(--sf); z-index: 1; }
.ct-grid th:first-child { z-index: 3; background: var(--bg); }
.ct-grid .c { text-align: center; padding: 0; width: 70px; }
.ct-grid tr.gr td { background: var(--sk); font: 700 12px/1 var(--f); height: 30px; color: var(--tx2); }
.ct-grid td.tx { max-width: 240px; color: var(--tx2); }
.ct-grid td.tx div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; border-radius: 6px; padding: 4px; }
.ct-grid td.tx div:focus { white-space: normal; background: var(--p-soft); color: var(--tx); }
.ct-grid td.tx.vaz div { color: var(--er); font-style: italic; }
.ct-grid td.tx.mud div { background: var(--nu-soft); }
.ct-fx { width: 100%; height: 39px; border: 0; background: none; display: grid; place-items: center; }
.ct-fx i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ln2); display: block; }
.ct-fx.on i { background: var(--ok); border-color: var(--ok); }
.ct-fx.ini i { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ct-grid-s table { min-width: 860px; }
.ct-grid-s td { font-size: 12.5px; height: auto; padding: 6px 8px; vertical-align: top; }
.ct-mont { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.ct-refs { display: grid; gap: 8px; }
.ct-ref { background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.ct-ref h4 { margin: 0; font: 700 14px/1.2 var(--f); }
.ct-var { display: grid; gap: 4px; }
.ct-var small { font: 500 11px/1.2 var(--m); color: var(--tx3); }
.ct-partes { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-parte { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ln2); border-radius: 999px; padding: 2px 4px 2px 10px; font: 600 12.5px/1 var(--f); background: var(--bg); min-height: 32px; }
.ct-parte.fixa { padding-right: 10px; color: var(--tx2); }
.ct-parte button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--sk); font: 700 14px/1 var(--f); }
.ct-sorteio { background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.ct-sorteio .ct-r { justify-content: space-between; flex-wrap: wrap; }
.ct-linhas { display: grid; gap: 8px; }
.ct-linha { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr) auto; gap: 8px; align-items: center; }
.ct-linha .ct-rot { font: 600 13px/1.2 var(--f); text-transform: capitalize; }
label.ct-linha { grid-template-columns: 120px minmax(0, 1fr); }
.ct-cartao { background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; padding: 10px 12px; }
.ct-check { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 40px; }
.ct-check input { width: 20px; height: 20px; }
.ct-pubs { display: grid; gap: 8px; }
.ct-pubrow { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.ct-hist { display: grid; border-left: 2px solid var(--ln); margin-left: 6px; padding-left: 14px; }
.ct-hist > div { padding: 8px 0; font-size: 13px; color: var(--tx2); display: grid; gap: 4px; justify-items: start; border-bottom: 1px solid var(--ln); }
.ct-hist b { font: 600 12px/1.3 var(--m); color: var(--tx3); }
.ct-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--tx); color: #fff; padding: 12px 16px; border-radius: 12px; font: 600 13.5px/1.3 var(--f); z-index: 20; max-width: min(92vw, 520px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
@media (max-width: 1100px) {
  .ct-corpo.sel { grid-template-columns: 220px minmax(0, 1fr); }
  .ct-drw { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); z-index: 15; height: 100vh; box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .35); }
  .ct-rec, .ct-mont { grid-template-columns: 1fr; }
  .ct-prev { position: static; }
}
@media (max-width: 760px) {
  .ct-corpo, .ct-corpo.sel { grid-template-columns: 1fr; }
  .ct-nav { position: sticky; top: 0; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ln); padding: 8px; max-height: none; z-index: 5; }
  .ct-nav button { width: auto; white-space: nowrap; }
  .ct-nav hr { display: none; }
  .ct-topo { position: static; }
  .ct-main { padding: 14px; }
  .ct-drw { width: 100vw; }
  .ct-pend, .ct-ini2, .ct-duas, .ct-tres { grid-template-columns: 1fr; }
  .ct-h, .ct-rw { grid-template-columns: minmax(0, 1fr) 44px 122px; }
  .ct-h > :nth-child(2), .ct-rw > :nth-child(2), .ct-h > :nth-child(4), .ct-rw > :nth-child(4) { display: none; }
  .ct-h.ct-h4, .ct-rw.ct-h4 { grid-template-columns: minmax(0, 1fr) auto; }
  .ct-h.ct-h4 > :nth-child(3), .ct-rw.ct-h4 > :nth-child(3) { display: none; }
  .ct-h.ct-h4 > :nth-child(4), .ct-rw.ct-h4 > :nth-child(4) { display: block; }
  .ct-cf { grid-template-columns: 1fr; }
  .ct-acts { grid-row: auto; grid-column: 1; justify-content: flex-start; }
  .ct-linha, label.ct-linha { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .central * { transition: none !important; } }

/* modelos de semana no editor do plano */
.pe-modelos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pe-modelos select, .pe-modelos input { width: auto; min-width: 180px; flex: 1; }

/* ── tempo real (docs/superpowers/specs/2026-10-05-tempo-real-design.md) ── */
/* sem conexão: faixa discreta abaixo do topo */
.aviso-conexao { margin: 8px auto 0; max-width: 720px; text-align: center; font-size: .86rem; color: #6b4a12; background: #fbf0d9; border-radius: 999px; padding: 6px 14px; }
/* o que chegou com o app aberto pisca de leve */
.chegou { animation: pc-chegou 1.6s ease-out; }
@keyframes pc-chegou {
  from { box-shadow: 0 0 0 3px rgba(129, 178, 154, .55); background-color: #eef6f1; }
  to   { box-shadow: 0 0 0 3px rgba(129, 178, 154, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chegou { animation: none; }
}
/* só para leitor de tela */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Início da família, topo e barra ──────────────────────────────────
   Visual aprovado em 05/10/2026: versão híbrida com o visual do modelo 02
   (artifact "Nova Home da Família"). Tokens do conceito D, os mesmos da
   folha da refeição e da Central; fontes hospedadas em assets/fontes.
   docs/superpowers/specs/2026-10-05-inicio-familia-design.md */

/* topo: menu da conta no lugar da linha "Olá · Privacidade · Trocar" */
.conta { margin-left: auto; position: relative; }
.btn-conta {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #EDE4D8; background: #F4EDE3;
  color: #5E4F4A; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.btn-conta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-conta[aria-expanded="true"] { background: #FBE9E3; color: #8E3D27; border-color: #E9C3B5; }
.btn-conta:focus-visible { outline: 3px solid #8E3D27; outline-offset: 2px; }
.menu-conta {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px;
  background: #FFFFFF; border: 1px solid #EDE4D8; border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 40px -16px rgba(61, 44, 41, .35); display: grid; gap: 2px;
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.menu-conta .usuario-linha { margin: 0 0 4px; padding: 8px 12px 10px; border-bottom: 1px solid #EDE4D8; font-size: .88rem; color: #5E4F4A; }
.menu-conta-item {
  text-align: left; border: 0; background: none; padding: 12px; min-height: 44px; border-radius: 10px;
  font: 600 15px/1.2 "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; color: #3D2C29; cursor: pointer;
}
.menu-conta-item:hover, .menu-conta-item:focus-visible { background: #F4EDE3; outline: none; }
.menu-conta-sair { color: #B23A2E; }

/* barra: ícones de traço, aba ativa com pílula, cor e peso */
.nav-btn { font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 11px; color: #77675F; gap: 4px; padding: 8px 2px 8px; }
.nav-btn .nav-icone { width: 56px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 1.25rem; }
.nav-btn .nav-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn.ativo { color: #8E3D27; font-weight: 700; }
.nav-btn.ativo .nav-icone { background: #FBE9E3; }
.nav-btn.ativo .nav-icone svg { stroke-width: 2.2; }
.nav-btn:focus-visible { outline: 3px solid #8E3D27; outline-offset: -3px; border-radius: 12px; }
.nav-btn .nav-badge { top: -3px; right: 6px; font-size: .6rem; }
.nav-inferior { border-top: 1px solid #EDE4D8; box-shadow: none; }
@media (min-width: 720px) { .nav-btn { font-size: 11.5px; } }

/* tablet: trilho lateral; computador: barra lateral */
@media (min-width: 760px) {
  #app-paciente { padding-bottom: 0; padding-left: 88px; }
  .nav-inferior {
    top: 0; bottom: 0; right: auto; width: 88px; flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: 100px 0 calc(16px + env(safe-area-inset-bottom)); border-top: 0; border-right: 1px solid #EDE4D8;
  }
  .nav-btn { flex: none; padding: 6px 2px; }
}
@media (min-width: 1100px) {
  #app-paciente { padding-left: 232px; }
  .nav-inferior { width: 232px; padding: 110px 16px 16px; gap: 4px; }
  .nav-btn { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; }
  .nav-btn .nav-icone { width: 32px; }
  .nav-btn.ativo { background: #FBE9E3; }
}

/* Alimentos: atalho para o Pratinho, que saiu da barra */
.cartao-link {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.cartao-link small { display: block; color: var(--cinza); font-size: .82rem; }
.cartao-link .seta { font-size: 1.4rem; color: var(--cinza); }

/* ── tela Início ── */
.conteudo-inicio { max-width: 1040px; }
.inicio {
  --p: #BB563D; --p-d: #8E3D27; --p-soft: #FBE9E3; --bg: #FBF7F1; --sf: #FFFFFF; --sk: #F4EDE3;
  --tx: #3D2C29; --tx2: #5E4F4A; --tx3: #77675F; --ln: #EDE4D8; --ln2: #DCCFC0;
  --ok: #3F6F57; --ok-soft: #E5F0EA; --wr: #8A5A00; --wr-soft: #FFF3D6; --nu: #4C3B66; --nu-soft: #F1ECF6;
  --f: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --m: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --sh1: 0 1px 2px rgba(61, 44, 41, .05), 0 6px 18px -10px rgba(61, 44, 41, .18);
  font: 15px/1.45 var(--f); color: var(--tx); letter-spacing: -.003em;
  display: grid; gap: 20px; padding: 4px 0 12px;
}
.inicio h1, .inicio h2, .inicio h3, .inicio p, .inicio ol { margin: 0; padding: 0; }
.inicio ol { list-style: none; }
:where(.inicio) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
.inicio :focus-visible { outline: 3px solid var(--p-d); outline-offset: 2px; }
.inicio .in-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.inicio .in-av { display: block; flex: none; }
.inicio .in-k { font: 500 11px/1.3 var(--m); letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }

/* criança e saudação */
.in-topo { display: flex; align-items: center; gap: 12px; }
.in-mono {
  width: var(--s); height: var(--s); border-radius: 50%; background: #EAF3DD; color: #2F5A45; flex: none;
  display: grid; place-items: center; font: 800 calc(var(--s) * .42)/1 var(--f); position: relative;
}
.in-mono svg { position: absolute; right: -2%; top: -6%; width: 38%; height: 38%; }
.in-nm { display: grid; min-width: 0; }
.in-nm b { font-size: 16.5px; line-height: 1.2; }
.in-nm small { font: 500 12px/1.4 var(--m); color: var(--tx3); }
.in-saud h1 { font: 800 26px/1.15 var(--f); letter-spacing: -.025em; text-wrap: balance; }
.in-saud h1 em { display: block; font-style: normal; color: var(--p-d); }
.in-saud p { color: var(--tx3); font-size: 14px; margin-top: 4px; }

/* colunas: uma no celular, duas a partir de 760 px */
.inicio, .in-cols { grid-template-columns: minmax(0, 1fr); }
.in-cols { display: grid; gap: 20px; }
.in-col { display: grid; gap: 14px; align-content: start; min-width: 0; }

/* avisos */
.in-als { display: grid; gap: 8px; }
.in-al { display: flex; align-items: center; gap: 11px; border-radius: 16px; padding: 10px 12px; font-size: 13.5px; line-height: 1.35; }
.in-al > span:nth-child(2) { flex: 1; }
.in-al .ib { width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .7); display: grid; place-items: center; flex: none; }
.in-al .ib .in-i { width: 18px; height: 18px; }
.in-al > .in-i { width: 17px; height: 17px; opacity: .7; }
.in-al[role="button"] { cursor: pointer; }
.in-al-nu { background: var(--nu-soft); color: var(--nu); }
.in-al-wr { background: var(--wr-soft); color: #6B4600; }

/* próxima refeição */
.in-agora {
  background: var(--p); color: #FFFFFF; border-radius: 26px; padding: 18px 18px 16px; position: relative; overflow: hidden;
  box-shadow: 0 22px 40px -22px rgba(142, 61, 39, .75); display: grid; gap: 14px;
}
.in-agora::after { content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.in-agora .in-k { color: rgba(255, 255, 255, .9); display: flex; align-items: center; gap: 8px; }
.in-agora .in-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFE2A8; box-shadow: 0 0 0 4px rgba(255, 226, 168, .25); }
.in-agora h2 { font: 800 28px/1.05 var(--f); letter-spacing: -.025em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.in-agora h2 span { font: 600 16px/1 var(--m); opacity: .92; }
.in-avs { display: flex; flex-wrap: wrap; padding-left: 8px; row-gap: 6px; }
.in-avs .in-av { margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--p); background: #FAF1E3; }
.in-itxt { font-size: 14.5px; color: rgba(255, 255, 255, .95); line-height: 1.5; }
.in-ag-obs { font-size: 13px; color: rgba(255, 255, 255, .86); margin-top: -8px; }
.in-bts { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; position: relative; z-index: 1; }
.in-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 52px; padding: 0 12px;
  border-radius: 14px; font: 650 14.5px/1 var(--f); white-space: nowrap; min-width: 0;
  transition: transform .12s, background .15s;
}
.in-b .in-i { width: 19px; height: 19px; }
.in-b:active { transform: scale(.97); }
.in-b-w { background: #FFFFFF; color: var(--p-d); }
.in-b-gw { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.in-b-gw:hover { background: rgba(255, 255, 255, .1); }
.in-b-pr { background: var(--p); color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba(187, 86, 61, .8); }
.in-b-se { background: var(--sf); color: var(--tx); box-shadow: inset 0 0 0 1.5px var(--ln2); }
.in-b-sm { height: 44px; font-size: 14px; border-radius: 12px; }
.in-agora :focus-visible { outline-color: #FFFFFF; }
.in-ag-pe { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; color: rgba(255, 255, 255, .92); }
.in-ag-pe .in-i { width: 17px; height: 17px; }

/* cartões brancos */
.in-card { background: var(--sf); border-radius: 22px; padding: 16px; box-shadow: var(--sh1); }
.in-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.in-hd h3 { font: 750 16px/1.2 var(--f); }
.in-hd small { font: 500 12px var(--m); color: var(--tx3); }
.in-hd-l { display: flex; gap: 10px; align-items: center; }
.in-anel { width: 30px; height: 30px; }
.in-lnk { color: var(--p-d); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; }
.in-lnk .in-i { width: 16px; height: 16px; }

/* hoje: tira (celular) */
.in-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 5px; margin-top: 12px; }
.in-sg {
  border-radius: 12px; padding: 8px 2px 7px; text-align: center; background: var(--sk); color: var(--tx3);
  display: grid; justify-items: center; gap: 3px; min-height: 64px;
}
.in-sg b { font: 600 11.5px/1 var(--m); color: var(--tx2); }
.in-sg small { font-size: 10.5px; line-height: 1.15; }
.in-sg .in-i { width: 15px; height: 15px; stroke-width: 2.6; }
.in-sg.st-reg { background: var(--ok-soft); color: var(--ok); }
.in-sg.st-reg b { color: var(--ok); }
.in-sg.st-prox { background: var(--p-soft); color: var(--p-d); box-shadow: inset 0 0 0 1.5px var(--p); }
.in-sg.st-prox b { color: var(--p-d); }
.in-sg .vz { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .55; }
.in-sg.st-prox .vz { opacity: 1; background: radial-gradient(circle, var(--p) 0 3px, transparent 3.5px); }

/* hoje: lista com horário (telas largas) */
.in-tl { margin-top: 10px; }
.in-tl li { position: relative; }
.in-tl li > button { display: grid; grid-template-columns: 50px 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; width: 100%; }
.in-tl .h { font: 600 13px/20px var(--m); color: var(--tx2); }
.in-tl .pt { width: 14px; height: 14px; border-radius: 50%; margin: 3px 4px; box-shadow: inset 0 0 0 2px var(--ln2); background: var(--sf); position: relative; z-index: 1; }
.in-tl li::before { content: ""; position: absolute; left: 70px; top: 0; bottom: 0; width: 2px; background: var(--ln); }
.in-tl li:first-child::before { top: 18px; }
.in-tl li:last-child::before { bottom: calc(100% - 18px); }
.in-tl .st-reg .pt { background: var(--ok); box-shadow: none; }
.in-tl .st-prox .pt { background: var(--p); box-shadow: 0 0 0 4px var(--p-soft); }
.in-tl .tx b { font-size: 14.5px; display: block; line-height: 20px; }
.in-tl .tx small { font-size: 12.5px; color: var(--tx3); display: block; }
.in-tl .tg { font: 650 11.5px/1 var(--f); padding: 5px 8px; border-radius: 999px; background: var(--sk); color: var(--tx3); white-space: nowrap; }
.in-tl .st-reg .tg { background: var(--ok-soft); color: var(--ok); }
.in-tl .st-prox .tg { background: var(--p-soft); color: var(--p-d); }

/* recado da nutricionista */
.in-recado { background: var(--nu-soft); color: var(--nu); border-radius: 22px; padding: 16px; display: grid; gap: 8px; }
.in-recado .in-k { color: var(--nu); }
.in-recado > p:not(.in-k):not(.in-ass) { font-size: 14.5px; line-height: 1.5; white-space: pre-line; }
.in-ass { font-size: 13px; font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.in-ass .in-lnk { color: var(--nu); }
.in-rec-resp { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 11px 12px; font-size: 13.5px; width: 100%; }
.in-rec-resp > span { flex: 1; }
.in-rec-resp .in-i { width: 18px; height: 18px; }

/* descobertas e aceitação */
.in-desc-l { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.in-desc-l > span:last-child { font: 650 14px/1.3 var(--f); }
.in-big { font: 800 40px/0.9 var(--f); letter-spacing: -.04em; color: var(--p-d); font-variant-numeric: tabular-nums; }
.in-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--ok-soft); color: var(--ok); font: 650 12px/1 var(--f); padding: 6px 9px; border-radius: 999px; margin-top: 4px; }
.in-pill .in-i { width: 13px; height: 13px; stroke-width: 2.4; }
.in-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.in-mini > div { background: var(--bg); border-radius: 16px; padding: 10px 6px; display: grid; justify-items: center; gap: 4px; text-align: center; align-content: start; }
.in-mini b { font-size: 13.5px; line-height: 1.2; }
.in-mini small { font-size: 11.5px; color: var(--tx3); line-height: 1.25; text-wrap: balance; }
.in-mini .wr { background: var(--wr-soft); }
.in-mini .wr small { color: #6B4600; }
.in-barra { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 12px 0 10px; }
.in-barra i { display: block; }
.in-leg { display: grid; gap: 6px; }
.in-leg div { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tx2); }
.in-leg div b { margin-left: auto; font: 600 13.5px var(--m); color: var(--tx); }
.in-leg .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.in-leg .in-i { width: 18px; height: 18px; }

/* consulta, dica e recado geral */
.in-consulta { display: flex; gap: 12px; align-items: center; }
.in-consulta b { display: block; font-size: 16px; }
.inicio .ibx { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--sk); color: var(--p-d); }
.in-dica { display: flex; gap: 12px; align-items: center; width: 100%; }
.in-dica .ibx { background: var(--wr-soft); color: var(--wr); }
.in-dica .tx { flex: 1; display: grid; gap: 2px; }
.in-dica small { color: var(--tx3); font-size: 12.5px; }
.in-dica b { font-size: 15px; }
.in-dica .tx > span { font-size: 13.5px; color: var(--tx2); }
.in-dica > .in-i { color: var(--tx3); }
.in-geral { display: flex; gap: 10px; align-items: flex-start; background: var(--nu-soft); color: var(--nu); border-radius: 14px; padding: 11px 13px; font-size: 13px; line-height: 1.4; }
.in-geral .in-i { width: 17px; height: 17px; margin-top: 1px; }

/* vazios, dia completo e carregando */
.in-vazio { background: var(--sf); border-radius: 24px; padding: 22px 20px; box-shadow: var(--sh1); display: grid; gap: 10px; justify-items: start; }
.in-vazio h3 { font: 750 19px/1.25 var(--f); letter-spacing: -.01em; }
.in-vazio p:not(.in-k) { color: var(--tx2); font-size: 14.5px; max-width: 40ch; }
.in-vazio .in-b { margin-top: 6px; }
.in-vazio-pt { background: transparent; box-shadow: none; border: 1.5px dashed var(--ln2); }
.in-semente { width: 56px; height: 56px; border-radius: 18px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.in-semente .in-i { width: 28px; height: 28px; stroke-width: 1.7; }
.in-fim { background: var(--ok-soft); border-radius: 24px; padding: 20px; display: grid; gap: 12px; justify-items: start; }
.in-fim h3 { font: 750 18px/1.25 var(--f); margin-top: 4px; }
.in-fim p:not(.in-k) { color: var(--tx2); font-size: 14px; }
.in-fim .in-semente { background: #FFFFFF; }
.in-sk { border-radius: 22px; background: linear-gradient(90deg, #F4EDE3 0%, #FAF5EE 50%, #F4EDE3 100%); background-size: 200% 100%; }

@media (min-width: 760px) {
  .in-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .in-saud h1 { font-size: 30px; }
}
/* computador: o Início ocupa toda a largura ao lado da barra lateral,
   e o topo (logo e conta) acompanha */
@media (min-width: 1100px) {
  .conteudo.conteudo-inicio { max-width: none; padding: 24px 40px; }
  #app-paciente:has(.conteudo-inicio) .topo-titulo { max-width: none; padding: 0 16px; }
  .inicio { gap: 24px; }
  .in-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
  .in-saud h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .in-sk { animation: in-brilho 1.6s ease-in-out infinite; }
  .in-agora .in-k::before { animation: in-pulso 2.4s ease-in-out infinite; }
  @keyframes in-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  @keyframes in-pulso { 50% { box-shadow: 0 0 0 7px rgba(255, 226, 168, .06); } }
}

/* ── Recado para todas as famílias (Início) ───────────────────────────
   Visual aprovado em 06/10/2026: cartão da proposta B enquanto é novo;
   depois de "Entendi", a linha lilás de antes, que abre ao tocar.
   docs/superpowers/specs/2026-10-06-recado-familias-design.md */
.in-rg {
  border-radius: 24px; padding: 16px 18px; position: relative; overflow: hidden; color: #3A2C52;
  background: linear-gradient(140deg, #EFE6F8 0%, #F6F0FB 55%, #FDF1E6 100%);
  box-shadow: inset 0 0 0 1px #E3D7EF, 0 14px 30px -22px rgba(76, 59, 102, .55); display: grid; gap: 10px;
}
.in-rg::after { content: "\201C"; position: absolute; right: 16px; top: 34px; font: 800 120px/1 var(--f); color: rgba(76, 59, 102, .09); pointer-events: none; }
.in-rg-quem { display: flex; gap: 10px; align-items: center; position: relative; z-index: 1; }
.in-rg-av { width: 40px; height: 40px; border-radius: 50%; background: #4C3B66; color: #FFFFFF; display: grid; place-items: center; font: 800 16px/1 var(--f); flex: none; }
.in-rg-quem b { display: block; font-size: 14.5px; line-height: 1.2; }
.in-rg-quem small { font: 500 11px/1.3 var(--m); letter-spacing: .06em; text-transform: uppercase; color: #6B5A86; }
.in-rg-novo { margin-left: auto; font: 700 11px/1 var(--f); color: #8E3D27; background: #FBE9E3; padding: 6px 9px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: center; }
.in-rg-novo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #BB563D; }
.in-rg > p { font: 500 16.5px/1.5 var(--f); position: relative; z-index: 1; white-space: pre-line; overflow-wrap: anywhere; }
.in-rg-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.in-rg-bts { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 1; }
.in-rg-mais { font: 700 14px/1 var(--f); color: #4C3B66; display: inline-flex; gap: 4px; align-items: center; min-height: 44px; }
.in-rg-mais .in-i { width: 16px; height: 16px; }
.in-rg-ok { margin-left: auto; height: 44px; padding: 0 20px; border-radius: 12px; background: #4C3B66; color: #FFFFFF; font: 650 14.5px/1 var(--f); }
.inicio .in-rg-ok { color: #FFFFFF; }
.in-rg-ok:active { transform: scale(.97); }
.inicio .in-rg :focus-visible { outline-color: #4C3B66; }
.in-geral-bt { width: 100%; text-align: left; cursor: pointer; align-items: center; min-height: 44px; }
.in-geral-bt > span { flex: 1; overflow-wrap: anywhere; }
.in-geral-bt > .in-i:last-child { opacity: .7; }

/* Central: recado com período e histórico */
.ct-per { border: 0; margin: 0; padding: 0; }
.ct-per legend { font: 600 12px/1.2 var(--f); color: var(--tx2); padding: 0; margin-bottom: 4px; }
.ct-rec-datas .ct-fld { flex: 1; min-width: 150px; }
.ct-rec-erro { margin: 0; font-size: 13px; color: var(--er); background: var(--er-soft); border-radius: 10px; padding: 9px 11px; }
.ct-recs > .ct-rec { padding: 10px 0; font-size: 13.5px; color: var(--tx2); display: grid; gap: 6px; justify-items: start; border-bottom: 1px solid var(--ln); }
.ct-rec-t { color: var(--tx); white-space: pre-line; overflow-wrap: anywhere; }
.ct-rec .ct-confirma { justify-self: stretch; }

/* ── Topo do painel da nutricionista ──────────────────────────────────
   Tokens do conceito D (os mesmos da Central e do Início): logo, selo do
   painel, ações à direita (Conteúdo do app, Convidar família) e a conta
   (iniciais, primeiro nome, Sair). No celular os botões ficam só ícone. */
.nt {
  background: #FFFFFF; color: #3D2C29; padding: 10px 24px; border-bottom: 1px solid #EDE4D8;
  box-shadow: 0 1px 2px rgba(61, 44, 41, .04), 0 8px 20px -16px rgba(61, 44, 41, .25);
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.nt-barra { gap: 14px; min-height: 52px; }
.nt .logo-topo { height: 48px; }
.nt-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.nt-selo {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: #E5F0EA; color: #2F5A45; font-size: 13px; font-weight: 650; line-height: 1.2; white-space: nowrap;
}
.nt-selo .nt-i { width: 16px; height: 16px; }
.nt-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nt-bt {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  font: 650 14px/1 "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.nt-bt-pri { border: 1px solid #BB563D; background: #BB563D; color: #FFFFFF; }
.nt-bt-pri:hover { background: #8E3D27; border-color: #8E3D27; }
.nt-bt-sec { border: 1px solid #DCCFC0; background: #FFFFFF; color: #3D2C29; }
.nt-bt-sec:hover { background: #F4EDE3; border-color: #CDBDAA; }
.nt-bt-sec .nt-i { color: #8E3D27; }
.nt-conta { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid #EDE4D8; }
.nt-av {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #E5F0EA; color: #2F5A45; font: 750 13px/1 "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .02em;
}
.nt-nome { display: grid; line-height: 1.2; max-width: 140px; }
.nt-nome small { font-size: 11.5px; color: #77675F; }
.nt-nome b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-sair {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 0; background: none; color: #5E4F4A; cursor: pointer;
  font: 600 13.5px/1 "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.nt-sair:hover { background: #FBE8E5; color: #B23A2E; }
.nt-bt:focus-visible, .nt-sair:focus-visible { outline: 3px solid #8E3D27; outline-offset: 2px; }
@media (min-width: 900px) { .nutri-topo.nt .topo-titulo { max-width: 1280px; } }
@media (max-width: 899px) { .nt-selo span { display: none; } .nt-selo { padding: 8px; } }
@media (max-width: 759px) {
  .nt { padding: 8px 12px; }
  .nt-barra { gap: 8px; }
  .nt .logo-topo { height: 40px; }
  .nt-selo, .nt-nome { display: none; }
  .nt-bt span, .nt-sair span { display: none; }
  .nt-bt { width: 40px; padding: 0; justify-content: center; }
  .nt-sair { width: 36px; padding: 0; justify-content: center; }
  .nt-conta { padding-left: 8px; gap: 6px; }
}

/* ── Cozinha do plano e Dicas da nutri ──────────────────────
   Desenho: docs/superpowers/specs/2026-10-06-cozinha-dicas-recomendacoes-design.md
   Visual do mockup aprovado (mockups/cozinha-plano.html): tokens do
   conceito D, como o Início e a folha da refeição. */
.cozinha, .cz-folha, .dicas, .dc-folha {
  --p: #BB563D; --p-d: #8E3D27; --p-soft: #FBE9E3; --bg: #FBF7F1; --sf: #FFFFFF; --sk: #F4EDE3;
  --tx: #3D2C29; --tx2: #5E4F4A; --tx3: #77675F; --ln: #EDE4D8; --ln2: #DCCFC0;
  --ok: #3F6F57; --ok-soft: #E5F0EA; --wr: #8A5A00; --wr-soft: #FFF3D6;
  --f: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --m: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  font: 15px/1.45 var(--f); color: var(--tx); letter-spacing: -.003em;
}
.cozinha, .dicas { display: grid; gap: 14px; padding: 4px 0 12px; }
.cozinha h2, .cozinha h3, .cozinha p, .cz-folha h3, .cz-folha p, .dicas h2, .dicas h3, .dicas h4, .dicas p, .dc-folha h3, .dc-folha p { margin: 0; }
.cozinha ul, .cz-folha ul, .dicas ul { list-style: none; margin: 0; padding: 0; }
:where(.cozinha, .cz-folha, .dicas, .dc-folha) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
:where(.cozinha, .cz-folha, .dicas, .dc-folha) :focus-visible { outline: 3px solid var(--p-d); outline-offset: 2px; }
.cz-i, .dc-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.cz-av { display: block; flex: none; }
.cz-mono { font-family: var(--m); font-variant-numeric: tabular-nums; }

.cz-topo { display: grid; gap: 2px; }
.cz-topo h2, .dicas h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.cz-origem { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 12.5px; font-weight: 700; }
.cz-origem .cz-i { width: 15px; height: 15px; }

.cz-seg { display: grid; grid-template-columns: 1fr 1fr; background: #F1E8DC; border-radius: 12px; padding: 3px; }
.cz-seg button { text-align: center; padding: 9px 6px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--tx3); min-height: 40px; }
.cz-seg button[aria-selected="true"] { background: var(--sf); color: var(--tx); box-shadow: 0 1px 2px rgba(61, 44, 41, .12); }

.cz-resumo { display: flex; gap: 14px; align-items: center; background: var(--tx); color: #FBF7F1; border-radius: 16px; padding: 14px 16px; }
.cz-n { font: 600 32px/1 var(--m); }
.cz-resumo div { display: grid; line-height: 1.3; }
.cz-resumo small { font-size: 12.5px; opacity: .8; }

.cz-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 2px; }
.cz-h h3 { font-size: 15px; font-weight: 750; }
.cz-h small { font-size: 12px; color: var(--tx3); font-weight: 600; }
.cz-lista, .cz-refs { display: grid; gap: 8px; }

.cz-base { display: flex; align-items: center; gap: 10px; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 6px 10px 6px 12px; }
.cozinha .cz-caixa { width: 26px; height: 26px; border-radius: 8px; border: 1.6px solid var(--ln2); background: var(--sf); display: grid; place-items: center; color: transparent; flex: none; position: relative; }
.cz-caixa::after { content: ""; position: absolute; inset: -9px; }
.cz-caixa .cz-i { width: 15px; height: 15px; stroke-width: 2.8; }
.cozinha .cz-caixa[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.cz-base-abrir { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0; }
.cz-base-abrir span { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.cz-base-abrir small { color: var(--tx3); font-size: 12.5px; }
.cz-base-abrir > .cz-i { color: var(--tx3); width: 16px; height: 16px; }
.cz-base.feito b { text-decoration: line-through; color: var(--tx3); }

.cz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cozinha .cz-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ln2); background: var(--sf); font-weight: 600; font-size: 13.5px; }
.cz-chip .cz-i { width: 14px; height: 14px; stroke-width: 2.6; }
.cozinha .cz-chip[aria-pressed="true"] { background: var(--tx); border-color: var(--tx); color: #fff; }

.cz-ref { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.cz-quando { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx3); font-weight: 650; }
.cz-ref > b { font-size: 15px; line-height: 1.35; }
.cz-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 7px; white-space: nowrap; }
.cz-tag.ok { background: var(--ok-soft); color: var(--ok); }
.cz-tag.wr { background: var(--wr-soft); color: var(--wr); }
:where(.cozinha, .cz-folha) .cz-acao { display: inline-flex; align-items: center; gap: 3px; color: var(--p-d); font-weight: 700; font-size: 13.5px; min-height: 32px; width: fit-content; }
.cz-acao .cz-i { width: 14px; height: 14px; }
.cz-nota { color: var(--tx2); font-size: 14px; background: var(--sf); border: 1px dashed var(--ln2); border-radius: 14px; padding: 12px 14px; }
.cz-rodape { display: flex; gap: 6px; align-items: flex-start; color: var(--tx3); font-size: 12.5px; }
.cz-rodape .cz-i { width: 14px; height: 14px; margin-top: 2px; }

.cz-vazio { background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 20px 18px; display: grid; gap: 8px; justify-items: start; }
.cz-vazio h3 { font-size: 17px; font-weight: 750; }
.cz-vazio p { color: var(--tx2); font-size: 14px; }
.cz-semente { width: 40px; height: 40px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }

/* folhas (por cima, como a folha da refeição) */
.cz-folha, .dc-folha {
  background: var(--bg); width: 100%; max-width: 480px; border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto;
  display: grid; gap: 12px; align-content: start; animation: modal-sobe .28s cubic-bezier(.2,.8,.2,1);
}
.cz-pega { width: 40px; height: 4px; border-radius: 2px; background: var(--ln2); justify-self: center; }
.cz-folha-cab { display: flex; align-items: center; gap: 12px; }
.cz-folha-cab > div { flex: 1; display: grid; }
.cz-folha-cab h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.cz-folha-cab small { color: var(--tx3); font-size: 12.5px; }
:where(.cz-folha, .dc-folha) .cz-x { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ln); background: var(--sf); display: grid; place-items: center; flex: none; }
.cz-orient { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.cz-orient b { font: 600 11px/1.3 var(--m); letter-spacing: .09em; text-transform: uppercase; color: var(--ok); }
.cz-orient p { font-size: 14.5px; }
.cz-orient small { color: var(--tx3); font-size: 12px; }
.cz-dias li { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--ln); font-size: 14px; }
.cz-dias li:last-child { border-bottom: 0; }
.cz-dias .cz-mono { width: 38px; color: var(--tx3); font-size: 12.5px; }
.cz-dias .cz-acao { margin-left: auto; }
:where(.cz-folha, .dc-folha) .cz-btn { min-height: 48px; border-radius: 12px; background: var(--p); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
:where(.cz-folha, .dc-folha) .cz-btn.se { background: var(--sf); color: var(--tx); box-shadow: inset 0 0 0 1.5px var(--ln2); }

/* Dicas da nutri */
.dc-guias { display: grid; gap: 8px; }
.dicas .dc-guia { display: flex; align-items: center; gap: 12px; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 10px 12px; min-height: 56px; }
.dc-guia > span:nth-child(2) { display: grid; flex: 1; line-height: 1.3; }
.dc-guia small { color: var(--tx3); font-size: 12.5px; }
.dc-guia > .dc-i { color: var(--tx3); width: 16px; height: 16px; }
.dc-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.dc-ic .dc-i { width: 17px; height: 17px; }
.dc-ic.g { background: var(--p-soft); color: var(--p); }
.dc-ic.t-texturas { background: #FDEEDB; color: #A8641F; }
.dc-ic.t-recusa { background: var(--ok-soft); color: var(--ok); }
.dc-ic.t-alergenicos { background: var(--p-soft); color: var(--p); }
.dc-ic.t-seguranca { background: var(--wr-soft); color: var(--wr); }
.dc-ic.t-agua { background: #E4EEF6; color: #3A6A8F; }
.dc-ic.t-rotina { background: #F1ECF6; color: #4C3B66; }

.dc-hero { background: var(--tx); color: #FBF7F1; border-radius: 18px; padding: 16px; display: grid; gap: 8px; }
.dc-de { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .9; }
.dc-av { width: 28px; height: 28px; border-radius: 50%; background: #E07A5F; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.dc-hero h3 { font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.dicas .dc-ler { color: #F7C3B3; font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; width: fit-content; }
.dc-ler .dc-i { width: 14px; height: 14px; }

.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dicas .dc-chip { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ln2); background: var(--sf); font-weight: 600; font-size: 13px; }
.dicas .dc-chip[aria-pressed="true"] { background: var(--tx); border-color: var(--tx); color: #fff; }

.dc-lista { display: grid; gap: 8px; }
.dc-item { display: flex; align-items: center; gap: 4px; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 4px 6px 4px 10px; }
.dc-item-abrir { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; min-width: 0; }
.dc-item-abrir > .dc-item-tx { display: grid; flex: 1; line-height: 1.3; min-width: 0; text-align: left; }
/* Novo 🔥: 7 dias depois de publicar, pequeno, sem esticar
   docs/superpowers/specs/2026-10-07-dicas-escrever-historico-design.md */
.dc-novo { display: inline-flex; align-items: center; flex: none; width: fit-content; align-self: center; border-radius: 999px; padding: 1px 7px; background: #FFE6DC; color: #A33A1F; font: 700 10.5px/1.5 "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; }
.dc-hero .dc-novo, .dc-folha .dc-novo { justify-self: start; }
.dc-item-abrir b { font-size: 14px; }
.dc-item-abrir small { color: var(--tx3); font-size: 12px; }
.dicas .dc-salvar { width: 44px; height: 44px; display: grid; place-items: center; color: var(--tx3); border-radius: 10px; flex: none; }
.dc-salvar[aria-pressed="true"] { color: var(--p-d); }
.dc-salvar[aria-pressed="true"] .dc-i { fill: currentColor; }
.dc-nota { color: var(--tx2); font-size: 14px; background: var(--sf); border: 1px dashed var(--ln2); border-radius: 14px; padding: 12px 14px; }

.dc-folha-cab { display: flex; align-items: center; gap: 10px; }
.dc-folha-cab small { flex: 1; color: var(--tx3); font-size: 12.5px; }
.dc-folha h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.dc-texto { display: grid; gap: 10px; font-size: 15px; color: var(--tx2); }
.dc-folha .cz-btn[aria-pressed="true"] .dc-i { fill: currentColor; }

/* barra de baixo com "Dicas da nutri": rótulo em até 2 linhas */
.nav-btn { line-height: 1.15; text-align: center; }
/* celular (barra de baixo): "Dicas"; tablet e computador: "Dicas da nutri" */
.nav-longo { display: none; }
@media (min-width: 760px) {
  .nav-curto { display: none; }
  .nav-longo { display: inline; }
}

/* Central: abas de Receitas, Recomendações da IA e Dicas da nutri
   docs/superpowers/specs/2026-10-06-cozinha-dicas-recomendacoes-design.md */
.ct-st.nu { background: var(--nu-soft); color: var(--nu); }
.ct-rabas { display: inline-flex; gap: 4px; background: var(--sk); border-radius: 12px; padding: 3px; width: fit-content; max-width: 100%; }
.ct-rabas button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; font: 650 13px/1.2 var(--f); color: var(--tx2); cursor: pointer; white-space: nowrap; min-height: 36px; }
.ct-rabas button[aria-selected="true"] { background: var(--sf); color: var(--tx); box-shadow: 0 1px 2px rgba(61, 44, 41, .12); }
.ct-rabas em { font: 600 11px/1 var(--m); font-style: normal; background: var(--nu); color: #fff; border-radius: 999px; padding: 2px 7px; margin-left: 4px; }

.ct-ia { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.ct-ia-l { display: grid; gap: 10px; }
.ct-aviso-ia { display: flex; gap: 8px; background: var(--nu-soft); color: #3b2d50; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; margin: 0; }
.ct-aviso-ia .ct-i { color: var(--nu); width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ct-iai { display: grid; gap: 5px; text-align: left; border: 1px solid var(--ln); background: var(--sf); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.ct-iai[aria-current="true"] { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-soft); }
.ct-iai b { font: 700 13.5px/1.3 var(--f); }
.ct-iai small { font-size: 12px; color: var(--tx3); }
.ct-iai .ct-st { width: fit-content; }
.ct-ia-f { display: grid; gap: 12px; background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 16px 18px; }
.ct-ia-f .ct-st { width: fit-content; }
.ct-ia-f h3 { margin: 0; font: 750 20px/1.2 var(--f); letter-spacing: -.015em; }
.ct-ia-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--tx3); font-size: 12.5px; }
.ct-porque { margin: 0; font-size: 13px; color: var(--tx2); background: var(--sk); border-radius: 10px; padding: 10px 12px; }
.ct-porque b { color: var(--tx); }
.ct-caixa { border: 1px solid var(--ln); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; background: var(--bg); }
.ct-caixa h4 { margin: 0; font: 600 11px/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.ct-caixa ul, .ct-caixa ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; }
.ct-cks { display: grid; gap: 7px; }
.ct-ck { display: flex; gap: 8px; font-size: 13px; align-items: flex-start; }
.ct-ck i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ct-ck i .ct-i { width: 12px; height: 12px; stroke-width: 2.6; }
.ct-ck span { display: grid; }
.ct-ck small { color: var(--tx3); font-size: 12px; }
.ct-ck.ok i { background: var(--ok-soft); color: var(--ok); }
.ct-ck.wr i { background: var(--wr-soft); color: var(--wr); }
.ct-ck.er i { background: var(--er-soft); color: var(--er); }
.ct-bloqueio { display: grid; gap: 6px; justify-items: start; background: var(--wr-soft); color: #5e4510; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.ct-ia-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-ia-f .ct-dica { padding: 0; }
.ct-ia-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--ln); padding-top: 14px; }
.ct-ia-acoes > span { display: flex; flex-wrap: wrap; gap: 8px; }
#ct-prevdica p { margin: 0; padding: 0 14px 10px; font-size: 13px; color: var(--tx2); }
#ct-prevdica .ct-info { margin: 0 14px 10px; padding: 8px 10px; }

/* Dicas da nutri: texto rico, imagens e perfil de idade
   docs/superpowers/specs/2026-10-07-dicas-texto-rico-design.md */
.dc-texto h4 { font-size: 16px; font-weight: 800; color: var(--tx); line-height: 1.3; margin-top: 4px; }
.dc-texto ul, .dc-texto ol { padding-left: 22px; display: grid; gap: 4px; }
.dc-texto blockquote { border-left: 3px solid var(--p); background: var(--sk); padding: 8px 12px; border-radius: 0 10px 10px 0; font-style: italic; }
.dc-texto a { color: var(--p-d); font-weight: 600; text-decoration: underline; overflow-wrap: anywhere; }
/* imagem: sempre a largura da tela, altura proporcional */
.dc-fig { display: grid; gap: 6px; }
.dc-fig img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--sk); }
.dc-fig figcaption { font-size: 12.5px; color: var(--tx3); text-align: center; }

.ct-dfxs { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-dfx { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border: 1px solid var(--ln2); border-radius: 999px; padding: 4px 13px 4px 9px; background: var(--sf); font: 600 12.5px/1.2 var(--f); cursor: pointer; }
.ct-dfx input { width: 16px; height: 16px; margin: 0; accent-color: var(--ok); }
.ct-dfx.todas { border-style: dashed; }
.ct-dfx:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }

.ct-ed { border: 1px solid var(--ln2); border-radius: 12px; background: var(--sf); overflow: hidden; }
.ct-ed:focus-within { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-soft); }
.ct-ed-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--ln); background: var(--bg); }
.central .ct-ed-bt { min-height: 34px; min-width: 34px; padding: 0 9px; border: 0; border-radius: 8px; background: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 600 13px/1 var(--f); }
.central .ct-ed-bt:hover { background: var(--sk); }
.central .ct-ed-bt.img { color: var(--p-d); }
.ct-ed-bt .ct-i { width: 16px; height: 16px; }
.ct-ed-sep { width: 1px; background: var(--ln); margin: 5px 3px; }
.ct-ed-extra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--ln); background: var(--p-soft); font-size: 13px; color: var(--tx); }
.ct-ed-extra p { flex-basis: 100%; }
.central .ct-ed-extra input[type=url] { flex: 1; min-width: 200px; min-height: 36px; border: 1px solid var(--ln2); border-radius: 10px; padding: 6px 10px; font-size: 13.5px; background: var(--sf); }
.ct-ed-erro { flex-basis: 100%; color: var(--er); font-weight: 600; }
.ct-ed-doc { display: block; min-height: 220px; max-height: 60vh; overflow: auto; padding: 12px 14px; outline: none; font-size: 14.5px; line-height: 1.55; color: var(--tx2); }
.ct-ed-doc > * + * { margin-top: 10px; }
.ct-dfig { position: relative; display: grid; gap: 6px; padding: 6px; border: 1.5px dashed var(--ln2); border-radius: 12px; background: var(--bg); }
.ct-dfig img { display: block; width: 100%; height: auto; min-height: 60px; border-radius: 8px; background: var(--sk); }
.central .ct-dfig input { min-height: 34px; padding: 5px 9px; font-size: 12.5px; }
.ct-dfig-bts { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.central .ct-dfig-bts button { width: 34px; height: 34px; border: 1px solid var(--ln); border-radius: 8px; background: var(--sf); font: 700 13px/1 var(--f); }
#ct-prevdica .ct-dprev { padding: 0 14px 14px; font-size: 13px; gap: 8px; }
#ct-prevdica .ct-dprev p { padding: 0; }
#ct-prevdica .ct-dprev ul, #ct-prevdica .ct-dprev ol { padding: 0 0 0 20px; }
#ct-prevdica .ct-dprev h4 { font-size: 14px; }

/* Dicas da nutri: Escrever e Histórico na mesma seção
   docs/superpowers/specs/2026-10-07-dicas-escrever-historico-design.md */
.ct-desc { display: grid; gap: 12px; }
.ct-deditando { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--p-soft); border: 1px solid #F1C9BB; border-radius: 12px; padding: 8px 10px 8px 12px; font-size: 13px; color: var(--p-d); }
.ct-deditando > span { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 6px; }
.ct-deditando b { color: var(--tx); }
.ct-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ct-dcard { background: var(--sf); border: 1px solid var(--ln); border-radius: 16px; display: grid; }
.ct-dcard > .ct-form { padding: 14px 16px; }
.ct-dacoes { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--ln); background: var(--sf); border-radius: 0 0 16px 16px; }
.ct-dacoes-es { flex: 1; min-width: 180px; display: grid; gap: 2px; font-size: 12px; color: var(--tx2); }
.ct-dacoes-es b { font-size: 13px; color: var(--tx); }
.central .ct-dver { display: none; }
.ct-dhist-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ct-dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.central .ct-dchip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ln2); background: var(--sf); font: 650 12.5px/1 var(--f); color: var(--tx2); }
.central .ct-dchip em { font: 600 11px/1 var(--m); font-style: normal; margin-left: 3px; color: var(--tx3); }
.central .ct-dchip[aria-pressed="true"] { background: var(--tx); border-color: var(--tx); color: #fff; }
.central .ct-dchip[aria-pressed="true"] em { color: #fff; }
.ct-dtab { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; }
.ct-dlin { display: grid; grid-template-columns: minmax(0, 1fr) 170px 110px auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--ln); }
.ct-dlin:first-child { border-top: 0; }
.ct-dlin-h { background: var(--bg); font: 600 10.5px/1.2 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); padding-block: 8px; }
.ct-dlin-t { display: grid; gap: 2px; min-width: 0; }
.ct-dlin-t b { font: 700 13.5px/1.3 var(--f); }
.ct-dlin-t small, .ct-dlin-d { font-size: 12px; color: var(--tx3); }
/* estado: selo curto e, embaixo, o aviso em letra pequena (não estoura) */
.ct-dlin-e { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.ct-dpend { display: flex; align-items: center; gap: 5px; font: 600 11px/1.25 var(--f); color: var(--wr); }
.ct-dpend::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wr); flex: none; }
.ct-dlin-b { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ct-dlin-b .ct-btn { min-height: 36px; font-size: 13px; }
.ct-modal { position: fixed; inset: 0; z-index: 40; background: rgba(43, 34, 32, .45); display: grid; place-items: center; padding: 16px; }
.ct-dlg { background: var(--sf); border-radius: 18px; padding: 20px; width: min(440px, 100%); display: grid; gap: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.ct-dlg-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--er-soft); color: var(--er); display: grid; place-items: center; font: 800 20px/1 var(--f); }
.ct-dlg b { font: 750 17px/1.3 var(--f); }
.ct-dlg p { margin: 0; font-size: 13.5px; color: var(--tx2); }
.ct-dlg-bts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.central .ct-btn-apagar { background: var(--er); color: #fff; }
@media (max-width: 980px) {
  .ct-dgrid { grid-template-columns: 1fr; }
  .ct-dgrid > .ct-prev { display: none; }
  .ct-desc.ver .ct-dgrid > .ct-prev { display: block; }
  .central .ct-dver { display: inline-flex; justify-self: start; }
}
@media (max-width: 760px) {
  .ct-dlin { grid-template-columns: minmax(0, 1fr) auto; }
  .ct-dlin-h { display: none; }
  .ct-dlin-e { grid-column: 1; }
  .ct-dlin-d { display: none; }
  .ct-dlin-b { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
  .ct-dacoes .ct-btn { flex: 1; justify-content: center; }
}
@media (max-width: 980px) {
  .ct-ia { grid-template-columns: 1fr; }
  .ct-ia-cols { grid-template-columns: 1fr; }
}

/* Registro fora do plano: chamativo no formulário, discreto depois.
   docs/superpowers/specs/2026-10-06-fora-do-plano-design.md */
.fora-plano {
  display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px;
  background: #FFE9B8; color: #4A2F00; border: 2px solid #D98E04; border-radius: 12px;
  padding: 10px 12px; font-size: .9rem; line-height: 1.35;
}
.fora-plano-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #B23A2E; color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.fora-plano b { display: block; font-size: .98rem; color: #8A2A16; text-transform: uppercase; letter-spacing: .02em; }
.tag-fora-plano, .selo-fora-plano { font-size: .72rem; font-weight: 600; color: #8A5A00; background: #FFF3D6; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.selo-fora-plano { margin-left: 4px; }

/* ── alergias e restrições da criança ─────────────────────
   docs/superpowers/specs/2026-10-06-alergias-restricoes-design.md
   Vermelho só para alergia: nada mais no app usa esta cor cheia. */
.al-faixa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: #B23A2E; color: #fff;
  border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.al-faixa-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #B23A2E;
  display: grid; place-items: center; font-weight: 900; font-size: 18px; }
.al-faixa-tx { flex: 1 1 200px; min-width: 0; line-height: 1.35; }
.al-faixa-tx b { display: block; font-size: 1rem; }
.al-faixa-tx small { display: block; opacity: .95; font-size: .82rem; margin-top: 2px; }
.al-faixa-bt { flex: none; background: #fff; color: #7E2017; border: 0; border-radius: 10px; padding: 8px 12px;
  font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.al-faixa-bt:focus-visible { outline: 3px solid #FFE9B8; outline-offset: 2px; }

.al-marca { display: inline-flex; align-items: center; gap: 5px; background: #FBE8E5; color: #7E2017;
  border: 1.5px solid #B23A2E; border-radius: 99px; padding: 1px 9px 1px 3px; font-size: .74rem; font-weight: 800;
  line-height: 1.5; vertical-align: middle; white-space: normal; }
.al-marca-ic { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #B23A2E; color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.item-alergia { color: #7E2017; font-weight: 700; }
.item-alergia .al-marca { margin-left: 4px; }
.in-al-item { margin: 6px 0 0; }
.tx .al-marca { display: flex; width: fit-content; margin-top: 4px; }
.tag-alergia { background: #B23A2E; color: #fff; }
.alim-card-alergia { box-shadow: inset 0 0 0 2px #B23A2E; background: #FBE8E5; }

.al-reg { display: flex; gap: 10px; align-items: flex-start; background: #FBE8E5; color: #4A1A12; border: 2px solid #B23A2E;
  border-radius: 12px; padding: 10px 12px; font-size: .9rem; line-height: 1.4; margin: 8px 0 0; }
.al-reg-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #B23A2E; color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.al-reg b { display: block; color: #7E2017; }

.fr-note.al { background: #FBE8E5; color: #4A1A12; box-shadow: inset 0 0 0 1.5px #B23A2E; }
.fr-note.al b { color: #7E2017; }
.fr-fc.fr-fc-al { box-shadow: inset 0 0 0 2px #B23A2E; background: #FBE8E5; color: #7E2017; }
.al-nota-dica { display: grid; gap: 6px; background: #FBE8E5; border-radius: 12px; padding: 10px 12px; font-size: .88rem; color: #4A1A12; margin: 0 0 10px; }
.dc-item .al-marca { display: flex; width: fit-content; margin-top: 4px; }
.cz-ref .al-marca { display: flex; width: fit-content; margin: 4px 0; }

.al-cartao-fundo { background: rgba(126, 32, 23, .55); }
.al-cartao { position: relative; background: #fff; border: 4px solid #B23A2E; border-radius: 20px; padding: 20px 18px 16px;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: #3D2C29; }
.al-cartao-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: #F4EDE3; font-size: 16px; cursor: pointer; }
.al-cartao-k { margin: 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #77675F; }
.al-cartao-nome { margin: 4px 0 0; font-size: 1.6rem; font-weight: 900; }
.al-cartao-lista { margin: 8px 0 10px; font-size: 1.7rem; font-weight: 900; color: #B23A2E; line-height: 1.15; }
.al-cartao-susp, .al-cartao-tx { margin: 0 0 8px; font-size: .95rem; line-height: 1.45; }
.al-cartao-sinais { background: #FBE8E5; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: .9rem; line-height: 1.45; }
.al-cartao-sinais b { color: #7E2017; }
.al-cartao-sinais p { margin: 4px 0 0; }
.al-cartao-192 { margin: 10px 0; padding: 12px; border-radius: 12px; background: #B23A2E; color: #fff; font-weight: 800; text-align: center; }
.al-cartao-192 b { font-size: 1.3rem; }
.al-cartao-pe { margin: 0; font-size: .8rem; color: #77675F; text-align: center; }

/* painel: ficha e editor do plano */
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.al-chips-cab { margin: 6px 0 0; }
.al-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 10px; font-size: .8rem; font-weight: 700; }
.al-chip-confirmada { background: #B23A2E; color: #fff; }
.al-chip-suspeita { background: #FFF3D6; color: #8A5A00; box-shadow: inset 0 0 0 1.5px #E2B75A; }
.al-chip small { font-weight: 600; opacity: .9; }
.al-linhas { display: grid; gap: 6px; margin: 8px 0; }
.al-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border: 1px solid #EDE4D8; border-radius: 10px; background: #fff; }
.al-ops { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.al-op { display: inline-flex; cursor: pointer; }
.al-op input { position: absolute; opacity: 0; pointer-events: none; }
.al-op span { padding: 5px 10px; border-radius: 99px; font-size: .8rem; font-weight: 700; border: 1.5px solid #DCCFC0; color: #5E4F4A; }
.al-op input:focus-visible + span { outline: 2px solid #BB563D; outline-offset: 2px; }
.al-op-nao input:checked + span { background: #F4EDE3; color: #3D2C29; border-color: #77675F; }
.al-op-suspeita input:checked + span { background: #FFF3D6; color: #8A5A00; border-color: #E2B75A; }
.al-op-confirmada input:checked + span { background: #B23A2E; color: #fff; border-color: #B23A2E; }
.al-sub { margin: 14px 0 4px; font-size: .9rem; }
.al-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.al-add select { flex: 1 1 200px; min-width: 0; }
.al-nenhuma { margin: 4px 0; }
.painel-alergia { color: #B23A2E; font-weight: 700; }
.pe-alergia-on { color: #7E2017; font-weight: 700; }
.pe-alergia input:disabled { cursor: not-allowed; }
.pe-alergia-nenhuma { color: var(--cinza); }
.pe-cel-alergia { background: #FBE8E5; box-shadow: inset 0 0 0 2px #B23A2E; }
.pe-al-nota { margin: 0; font-size: .74rem; font-weight: 700; color: #7E2017; line-height: 1.3; }

/* Instalar o app: cartão no Início com o passo a passo (iPhone e Android)
   docs/superpowers/specs/2026-10-06-instalar-app-design.md */
.ins { position: relative; display: grid; gap: 12px; background: var(--sf); border-radius: 22px; padding: 13px; box-shadow: var(--sh1); max-width: 680px; scroll-margin-top: 96px; }
.ins-cab { display: flex; gap: 12px; align-items: center; }
.ins-ibx { width: 44px; height: 44px; border-radius: 14px; background: var(--p-soft); color: var(--p-d); display: grid; place-items: center; flex: none; }
.ins-tx { flex: 1; display: grid; gap: 1px; padding-right: 30px; }
.inicio .ins-tx h3 { font: 700 14.5px/1.25 var(--f); }
.ins-tx h3:focus { outline: none; }
.ins-tx h3:focus-visible { outline: 3px solid var(--p-d); outline-offset: 2px; border-radius: 4px; }
.ins-tx small { color: var(--tx3); font-size: 12.5px; line-height: 1.35; }
.inicio .ins-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--tx3); }
.ins-x .in-i { width: 18px; height: 18px; }
.inicio .ins-x:hover { background: var(--sk); }
.ins-abrir { margin-left: 56px; justify-self: start; height: 38px; font-size: 13.5px; padding: 0 16px; }
.ins-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--sk); border-radius: 12px; padding: 3px; }
.inicio .ins-seg button { border-radius: 10px; min-height: 38px; font: 700 13px/1.2 var(--f); color: var(--tx2); text-align: center; }
.inicio .ins-seg button[aria-pressed="true"] { background: var(--sf); color: var(--p-d); box-shadow: 0 1px 4px rgba(61, 44, 41, .12); }
.ins-direto { background: var(--ok-soft); color: #2F5A45; border-radius: 16px; padding: 12px; display: grid; gap: 8px; font-size: 14px; }
.ins-direto .in-b { width: 100%; height: 46px; }
.inicio .ins-ou { text-align: center; font-size: 12px; color: var(--tx3); margin-top: -4px; }
.ins-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.inicio .ins-abas button { width: 100%; height: 100%; min-height: 52px; border: 1.5px solid var(--ln); background: var(--sf); border-radius: 12px; padding: 6px 4px; font: 600 11px/1.2 var(--f); color: var(--tx3); display: grid; justify-items: center; align-content: center; gap: 3px; text-align: center; }
.ins-abas button span { width: 20px; height: 20px; border-radius: 50%; background: var(--sk); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.inicio .ins-abas button.on { border-color: var(--p); color: var(--p-d); background: #FFF8F4; }
.ins-abas button.on span { background: var(--p); color: #FFFFFF; }
.ins-abas button.ok span { background: var(--ok-soft); color: var(--ok); }
.ins-palco { background: var(--bg); border-radius: 18px; padding: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.ins-txt { display: grid; gap: 6px; justify-items: start; }
.inicio .ins-txt h4 { margin: 0; font: 700 15px/1.25 var(--f); }
.inicio .ins-txt p { font-size: 13px; color: var(--tx2); line-height: 1.45; }
.ins-txt kbd { font: inherit; font-weight: 700; color: var(--tx); background: var(--sk); border-radius: 5px; padding: 0 4px; }
.ins-nav { display: grid; gap: 2px; justify-items: start; margin-top: 4px; }
.ins-nav .in-b { height: 38px; font-size: 13px; padding: 0 14px; }
.inicio .ins-lnk { color: var(--tx2); text-decoration: underline; font-weight: 600; font-size: 13px; min-height: 36px; }
.inicio .ins-rodape { justify-self: center; }

/* desenho do celular (decorativo) */
.ins-ilu { width: 117px; height: 204px; border-radius: 16px; border: 4px solid #2A201D; background: #FFF6E6; overflow: hidden; position: relative; flex: none;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: #3D2C29; font-size: 6px; line-height: 1.3; box-shadow: 0 12px 22px -14px rgba(40, 25, 20, .6); }
.ins-ilu b { font-weight: 700; }
.ins-st { display: flex; justify-content: space-between; padding: 4px 7px 0; font-size: 6px; font-weight: 700; }
.ins-pag { position: absolute; inset: 11px 0 0; display: grid; justify-items: center; align-content: start; padding-top: 40px; gap: 5px; }
.ins-pag img { width: 27px; height: 27px; border-radius: 7px; }
.ins-pag em { font: 700 7px var(--f); font-style: normal; color: #8E3D27; }
.ins-pag span { width: 62px; height: 4px; border-radius: 2px; background: #EADBC6; }
.ins-pag span.c { width: 44px; }
.ins-url { height: 13px; border-radius: 5px; background: #FFFFFF; font-size: 5.5px; display: flex; align-items: center; justify-content: center; color: #5E4F4A; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); white-space: nowrap; overflow: hidden; }
.ins-bios { position: absolute; left: 0; right: 0; bottom: 0; background: #F7EEDF; border-top: 1px solid #E6D7C2; padding: 3px 5px 7px; }
.ins-bios .ins-url { margin-bottom: 3px; }
.ins-bts { display: flex; justify-content: space-around; align-items: center; color: #2C7BE5; font-size: 9px; }
.ins-bts > span { display: grid; place-items: center; padding: 2px; }
.ins-ilu-i { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ins-ilu-i-p { width: 7px; height: 7px; }
.ins-band { position: absolute; left: 0; right: 0; top: 11px; background: #F7EEDF; padding: 3px 4px; display: flex; align-items: center; gap: 3px; font-size: 7px; }
.ins-band .ins-url { flex: 1; justify-content: flex-start; padding-left: 4px; }
.ins-pt { width: 13px; height: 13px; display: grid; place-items: center; font-weight: 900; font-size: 9px; line-height: 1; border-radius: 50%; }
.ins-alvo { box-shadow: 0 0 0 2px #E07A5F, 0 0 0 5px rgba(224, 122, 95, .28); border-radius: 50%; background: #FDE3D9; }
.ins-alvo-tx { border-radius: 5px; padding: 1px 3px; }
.ins-alvo-l { box-shadow: 0 0 0 1.5px #E07A5F, 0 0 0 4px rgba(224, 122, 95, .25); background: #FDE3D9 !important; }
.ins-escuro { position: absolute; inset: 0; background: rgba(40, 28, 24, .28); }
.ins-folha { position: absolute; left: 3px; right: 3px; bottom: 3px; background: #FFFBF4; border-radius: 10px; padding: 5px; display: grid; gap: 2px; }
.ins-folha > div { background: #FFFFFF; border-radius: 4px; padding: 3px 5px; display: flex; justify-content: space-between; align-items: center; }
.ins-folha > .ins-fapp { background: none; border-bottom: 1px solid #EEE2D1; border-radius: 0; margin-bottom: 1px; }
.ins-fapp { display: flex; gap: 4px; align-items: center; justify-content: flex-start !important; }
.ins-fapp img { width: 14px; height: 14px; border-radius: 4px; }
.ins-fapp b, .ins-fapp small { display: block; }
.ins-fapp small { color: #8B7C75; font-size: 5px; }
.ins-menu { position: absolute; right: 3px; top: 27px; width: 76px; background: #FFFBF4; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); padding: 3px; display: grid; gap: 1px; }
.ins-menu > div { padding: 3px 5px; border-radius: 4px; }
.ins-dlg { position: absolute; left: 8px; right: 8px; top: 72px; background: #FFFBF4; border-radius: 10px; padding: 7px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); display: grid; gap: 6px; }
.ins-dbts { display: flex; justify-content: flex-end; gap: 6px; align-items: center; font-weight: 700; color: #8E3D27; }
.ins-inst { background: #BB563D; color: #FFFFFF; padding: 2px 7px; border-radius: 99px; box-shadow: 0 0 0 1.5px #E07A5F, 0 0 0 4px rgba(224, 122, 95, .25); }
.ins-adtopo { position: absolute; top: 11px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 5px; font-size: 5.5px; background: #F7EEDF; border-bottom: 1px solid #E6D7C2; }
.ins-adtopo > span { color: #2C7BE5; }
.ins-adapp { position: absolute; top: 34px; left: 6px; right: 6px; background: #FFFFFF; border-radius: 6px; padding: 5px; display: flex; gap: 5px; align-items: center; }
.ins-adapp img { width: 20px; height: 20px; border-radius: 5px; }
.ins-adapp b, .ins-adapp small { display: block; }
.ins-adapp small { color: #8B7C75; font-size: 5px; }
.ins-tecl { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: #E6DCCD; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 5px 2px 14px; }
.ins-tecl i { background: #FFFFFF; border-radius: 2px; }