/* Base da fábrica · tema da cliente Isabela Valdez.
   Paleta enviada por ela (07/11): manteiga #FFDCA2, laranja #F1935A, vinho #A81D32.
   Cores e fontes da marca ficam só no :root, para trocar por cliente.
   Forma da marca: nada de canto arredondado. Retângulo e quadrado têm a quina cortada (chanfro). */
:root{
  --foto-prop:1.979; --foto-olhos:.51;
  --vinho:#A81D32;          /* 7,3:1 no branco, serve para texto */
  --vinho-escuro:#7C1224;
  --vinho-noite:#3A0F17;
  --laranja:#F1935A;        /* fundo com texto escuro; não usar como texto */
  --laranja-forte:#C8561C;  /* laranja para ícone e barra sobre branco (4,4:1); não usar em texto */
  --laranja-texto:#B44A12;  /* laranja para texto pequeno: 5,3:1 no branco, 4,8:1 no creme */
  --manteiga:#FFDCA2;       /* fundo com texto vinho (5,5:1) */
  --marca:var(--vinho);
  --marca-texto:var(--vinho);
  --marca-escura:var(--vinho-escuro);
  --acento:var(--laranja);
  --fundo:#F8F3EE;
  --cartao:#FFFFFF;
  --neutro:#F1E8E2;
  --vinho-grad:linear-gradient(140deg,#B8263D 0%,#A81D32 42%,#7C1224 100%);
  --tinta:#2B1418;
  --tinta-2:#5E4A4D;
  --tinta-3:#7A6669;        /* 5,3:1 no branco */
  --linha:#E9DDD6;
  --borda:#948789;          /* contorno de campo, caixa de marcar e chave: 3,1:1 no creme, 3,5:1 no branco */
  --ok:var(--vinho);        /* feito = vinho, a cor dela */
  --perigo:#C4241B;
  --display:"Tenor Sans","Jost",system-ui,sans-serif;
  --corpo:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --demo:44px;              /* altura da barra de demonstração, medida no carregamento */
  --toque:44px;             /* alvo mínimo de toque */
  --m-in:150ms;--m-out:120ms;--m-press:90ms;  /* movimento: entrar, sair, pressionar */
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* overflow-wrap: link ou palavra comprida sem espaço (da nutri ou da paciente) quebra dentro da caixa em vez de sair dela. */
body{background:var(--fundo);color:var(--tinta);font-family:var(--corpo);font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
/* No Safari, opção comprida no seletor (título de formulário) fazia a página inteira rolar de lado; o corte fica dentro do campo. */
select:not([multiple]):not([size]){overflow:hidden}
button{cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
/* Foco por dentro: o clip-path das peças chanfradas corta o que fica por fora. */
:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.p{width:16px;height:16px}
.ic.g{width:24px;height:24px}
.oculto{display:none!important}

/* ---------- Chanfro: a quina cortada em diagonal ----------
   --q é o tamanho do corte. Quatro formas: todas as quinas, diagonal (alto-esquerda e baixo-direita),
   só as de cima (folhas) e orelha (só alto-direita, capa de ebook). */
.bt,.cartao,.chip,.seg,.seg button,.etiqueta,.campo,.bolinha,.icone-bt::before,.menu-folha button,.toast,.faixa,.compor,.post,
.selo-nutri,.refeicao,.comi,.subs ul,.hab-linha,.check-grande,.meta,.melhorar div,.grade-hab,.dia-hab,.atalho,.cal,.foto-escolher,
.fome,.check-lista,.alternar,.chave i,.chave i::after,.comparar,.comparar-sel select,.lado-a-lado img,.foto-falta,.consulta,.pergunta,
.escala span,.simnao span,.aviso,.nu-item,.nu-item .conta,.num-card,.lista,.miniaturas img,.nota,.diario-item,.diario-item img,
.diario-item .sem-foto,.pergunta-ed,.topo-ed select,.ord button,.msg-ed,.cores button,.lista-item .x,.form-comentario input,
.fala,.demo .seg-demo,.demo .seg-demo button,.demo select,.demo input,.demo .demo-bt,#camada-nu .folha,.entrada .bt,
input[type=checkbox]:not(.chave input),.post-acoes button,.trocas,.plano-meta div,.plano-topo{
  clip-path:polygon(var(--q) 0,calc(100% - var(--q)) 0,100% var(--q),100% calc(100% - var(--q)),calc(100% - var(--q)) 100%,var(--q) 100%,0 calc(100% - var(--q)),0 var(--q));
}
.recado,.bloqueio,.num-card.destaque,.celebra-foto{clip-path:polygon(var(--q) 0,100% 0,100% calc(100% - var(--q)),calc(100% - var(--q)) 100%,0 100%,0 var(--q))}
.folha{clip-path:polygon(var(--q) 0,calc(100% - var(--q)) 0,100% var(--q),100% 100%,0 100%,0 var(--q))}
.capa{clip-path:polygon(0 0,calc(100% - var(--q)) 0,100% var(--q),100% 100%,0 100%)}
/* Campo com borda: a borda reta vem do border; a diagonal de cada quina é desenhada por um gradiente. */
.campo,.chip,.comi,.bt-linha,.check-grande,.pergunta-ed,.form-comentario input,.comparar-sel select,.topo-ed select,input[type=checkbox]:not(.chave input),.seg,.escala span,.simnao span,.dia-hab,
.compor,.post,.refeicao,.hab-linha,.meta,.melhorar div,.grade-hab,.atalho,.cal,.fome,.check-lista,.alternar,.comparar,.consulta,.pergunta,.aviso,.lista,.num-card,.nota,.diario-item,.msg-ed,.menu-folha button,
.plano-meta div,.plano-topo{
  --bw:1.5px;--bc:var(--borda);--bg:#fff;
  border:var(--bw) solid var(--bc);
  background:
    var(--marcador,none) var(--marcador-pos,center)/var(--marcador-tam,14px) no-repeat,
    linear-gradient(135deg,transparent 50%,var(--bc) 50% calc(50% + var(--bw)),transparent 0) 0 0/var(--q) var(--q) no-repeat border-box,
    linear-gradient(225deg,transparent 50%,var(--bc) 50% calc(50% + var(--bw)),transparent 0) 100% 0/var(--q) var(--q) no-repeat border-box,
    linear-gradient(45deg,transparent 50%,var(--bc) 50% calc(50% + var(--bw)),transparent 0) 0 100%/var(--q) var(--q) no-repeat border-box,
    linear-gradient(315deg,transparent 50%,var(--bc) 50% calc(50% + var(--bw)),transparent 0) 100% 100%/var(--q) var(--q) no-repeat border-box,
    var(--bg);
}

/* Cartões: fio fino, quase invisível, como papel bom. */
.seg,.escala span,.simnao span,.dia-hab,.compor,.post,.refeicao,.hab-linha,.meta,.melhorar div,.grade-hab,.atalho,.cal,.fome,.check-lista,.alternar,.comparar,.consulta,.pergunta,.aviso,.lista,.num-card,.nota,.diario-item,.msg-ed,.menu-folha button,.plano-meta div,.plano-topo{--bw:1px;--bc:var(--linha);--bg:#fff}

/* ---------- Barra de demonstração ---------- */
.demo{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:9px 16px;background:var(--tinta);color:#F6ECE6;font-size:13px}
.demo b{font-weight:600;letter-spacing:.02em}
.demo .seg-demo{--q:5px;display:flex;background:rgba(255,255,255,.12);padding:2px}
.demo .seg-demo button{--q:4px;padding:5px 12px;color:#F6ECE6;font-size:13px}
.demo .seg-demo button[aria-pressed="true"]{background:var(--manteiga);color:var(--vinho-escuro);font-weight:600}
.demo label{display:flex;align-items:center;gap:6px;color:#D9C9C4}
.demo select,.demo input{--q:4px;background:#47282C;border:0;padding:5px 8px;color:#fff;font-size:13px}
.demo select{max-width:min(240px,60vw)}   /* nome comprido de paciente não alarga a barra nem faz a página rolar de lado */
.demo .demo-bt{--q:4px;background:#47282C;padding:5px 10px;color:#F6ECE6;font-size:13px}
.demo .demo-dir{margin-left:auto;display:flex;gap:8px;align-items:center}
.demo .demo-nota{color:#BCA9A4}

/* ---------- Peças comuns ---------- */
.bt{--q:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--toque);padding:12px 18px;font-weight:600;font-size:15px;line-height:1.1;letter-spacing:.01em}
.bt-pri{background:var(--vinho);color:#fff}
.bt-sec{background:var(--manteiga);color:var(--vinho-escuro)}
.bt-claro{background:var(--manteiga);color:var(--vinho-escuro)}
.bt-perigo{background:var(--perigo);color:#fff}
.bt-linha{--bg:#fff}
.bt-cheio{width:100%}
.bt-peq{--q:6px;min-height:var(--toque);padding:8px 13px;font-size:14px}
.bt[disabled]{opacity:.45;cursor:default}
.link{color:var(--vinho);font-weight:600;min-height:var(--toque);display:inline-flex;align-items:center}
.cartao{--q:12px;background:var(--cartao);padding:14px}
.chip{--q:6px;display:inline-flex;align-items:center;gap:5px;min-height:var(--toque);padding:7px 14px;font-size:14px;font-weight:500;white-space:nowrap}
.chip.on{--bg:var(--vinho);--bc:var(--vinho);color:#fff;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.seg{--q:8px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px}
.seg button{--q:6px;min-height:var(--toque);padding:9px 6px;font-size:14px;font-weight:500;color:var(--tinta-2)}
.seg button.on{background:var(--vinho);color:#fff;font-weight:600}
.etiqueta{--q:4px;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;padding:3px 9px}
.et-ok{background:var(--manteiga);color:var(--vinho-escuro)}
.et-atencao{background:var(--laranja);color:var(--tinta)}
.et-perigo{background:var(--vinho);color:#fff}
.et-neutra{background:#fff;color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--borda)}
.et-marca{background:var(--laranja);color:var(--tinta)}
.rotulo{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin:24px 0 10px}
.rotulo::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--laranja-forte);flex:none}
.campo{--q:8px;display:block;width:100%;min-height:var(--toque);padding:10px 12px;font-size:16px}
.campo:focus{--bc:var(--vinho);outline:2px solid var(--vinho);outline-offset:-2px}
textarea.campo{resize:vertical;min-height:70px}
select.campo,.comparar-sel select,.topo-ed select{-webkit-appearance:none;appearance:none;padding-right:32px;--marcador:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A81D32' stroke-width='1.8'/%3E%3C/svg%3E");--marcador-pos:right 11px center;--marcador-tam:11px}
.linha-form{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.linha-form>span{font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.grade-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}   /* minmax(0,…): o campo de data encolhe no celular estreito */
.campo{min-width:0}
.vazio{padding:28px 16px;text-align:center;color:var(--tinta-3);font-size:14px}
.titulo{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.sub{color:var(--tinta-2);font-size:14px}
.bolinha{--q:3px;position:absolute;top:0;right:0;min-width:20px;height:20px;padding:0 5px;background:var(--laranja);color:var(--tinta);font-size:13px;font-weight:700;line-height:1;display:grid;place-items:center;font-style:normal}
.ponto-novo{display:inline-block;width:8px;height:8px;transform:rotate(45deg);background:var(--laranja-forte);flex:none}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;color:#fff;flex:none;letter-spacing:.02em}
img.av{object-fit:cover;object-position:center 30%;background:var(--neutro)}
.av.nutri{background:var(--vinho);font-family:var(--display);font-weight:400;font-size:14px}
.av.g{width:64px;height:64px;font-size:21px}
.av.p{width:30px;height:30px;font-size:13px;letter-spacing:0}
.av.anel{padding:2px;background:#fff;box-shadow:0 0 0 2px var(--laranja)}
/* 44 px de toque; o quadrado que aparece no toque e no mouse continua com 36 px. */
.icone-bt{width:var(--toque);height:var(--toque);display:grid;place-items:center;color:var(--tinta-2);position:relative;flex:none;isolation:isolate}
.icone-bt::before{--q:7px;content:"";position:absolute;inset:4px;z-index:-1;background:transparent}
.icone-bt:focus-visible{outline-offset:-2px}

/* ---------- Camadas (folhas e confirmações) ---------- */
.camada{position:absolute;inset:0;pointer-events:none;z-index:40}
#camada-nu{position:fixed}
.folha-fundo{position:absolute;inset:0;background:rgba(43,20,24,.5);display:flex;align-items:flex-end;justify-content:center;pointer-events:auto;opacity:0;transition:opacity .18s}
.folha-fundo.aberta{opacity:1}
.folha{--q:20px;background:var(--fundo);width:100%;max-height:92%;overflow:auto;padding:22px 16px 22px;transform:translateY(16px);transition:transform .18s}
.folha-fundo.aberta .folha{transform:none}
.folha-cheia{height:100%;max-height:100%;padding:0;display:flex;flex-direction:column;clip-path:none}
#camada-nu .folha-fundo{align-items:center}
#camada-nu .folha{--q:16px;max-width:560px;max-height:88vh}
#camada-nu .folha-cheia{max-width:760px;height:88vh}
.folha-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.folha-cab h3{flex:1;min-width:0;font-family:var(--display);font-weight:400;font-size:21px}
.tela-cab{display:flex;align-items:center;gap:8px;padding:8px 8px 6px;background:var(--fundo);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--linha)}
.tela-cab h1,.tela-cab h3{flex:1;min-width:0;font-size:17px;font-weight:600;text-align:center}
.tela-cab .acao{color:var(--vinho);font-weight:600;min-height:var(--toque);padding:0 10px;display:inline-flex;align-items:center}
.tela-corpo{flex:1;overflow:auto;padding:14px 16px 28px}
.conf{padding:6px 2px}
.conf p{font-size:16px;margin-bottom:16px}
.conf-acoes{display:flex;gap:10px;justify-content:flex-end}
.menu-folha{display:flex;flex-direction:column;gap:5px}
.menu-folha button{--q:9px;display:flex;align-items:center;gap:12px;padding:14px 14px;font-size:15.5px;text-align:left}
.menu-folha button>.ic{color:var(--vinho)}
.menu-folha button.perigo,.menu-folha button.perigo .ic{color:var(--perigo)}
.toast{--q:8px;position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--tinta);color:#fff;padding:12px 18px;font-size:14px;opacity:0;pointer-events:none;transition:all .2s;z-index:100;max-width:90vw;text-align:center}
.toast.vis{opacity:1;transform:translate(-50%,0)}

/* ---------- App do paciente ---------- */
.palco{display:flex;justify-content:center;padding:28px 16px 44px;min-height:calc(100vh - var(--demo));background:radial-gradient(110% 70% at 50% 0%,#5C1724 0%,#2E0B12 62%,#1E070C 100%)}
.aparelho{width:390px;height:min(844px,calc(100vh - var(--demo) - 72px));min-height:640px;border-radius:50px;background:#120507;padding:10px;box-shadow:0 0 0 1px rgba(255,220,162,.18),0 50px 90px -30px rgba(0,0,0,.7)}
.app-pac{position:relative;height:100%;border-radius:39px;overflow:hidden;background:var(--fundo);display:flex;flex-direction:column}
.pa-tela{display:flex;flex-direction:column;height:100%}
.pa-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:26px 14px 10px 18px;background:var(--fundo)}
.pa-topo .icone-bt{color:var(--vinho)}
.pa-logo{height:24px;width:auto}
.pa-corpo{flex:1;overflow:auto;padding:4px 18px 104px}
.pa-abas{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:9px 6px 22px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--linha);z-index:5}
.pa-aba{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;font-size:13px;font-weight:500;color:var(--tinta-3)}
.pa-aba.on{color:var(--vinho);font-weight:600}
.pa-aba.on::before{content:"";position:absolute;top:-10px;width:22px;height:2px;background:var(--vinho)}
.pa-aba:has(.pa-mais){filter:drop-shadow(0 8px 10px rgba(124,18,36,.35))}
.pa-mais{--q:14px;width:50px;height:50px;background:var(--vinho-grad);color:#fff;display:grid;place-items:center;margin-top:-6px;clip-path:polygon(var(--q) 0,100% 0,100% calc(100% - var(--q)),calc(100% - var(--q)) 100%,0 100%,0 var(--q))}
.pa-mais .ic{stroke-width:2.2}
.pa-titulo{font-family:var(--display);font-weight:400;font-size:31px;line-height:1.08;letter-spacing:-.01em;margin:14px 0 4px;color:var(--vinho-escuro)}
.faixa{--q:9px;display:flex;align-items:center;gap:12px;padding:12px 14px;margin:10px 0}
.faixa .ic{flex:none}
.faixa p{flex:1;min-width:0;font-size:14px}
.faixa-marca{background:var(--vinho-grad);color:#fff}
.faixa-marca .ic{color:var(--manteiga)}
.faixa-ok{background:var(--laranja);color:var(--tinta)}
.faixa-ok .ic{color:var(--vinho-escuro)}
.faixa-atencao{background:var(--manteiga);color:var(--tinta)}
.faixa-atencao .ic{color:var(--vinho)}

/* Recado da nutri (topo do feed): foto dela + mensagem que muda com o dia do paciente */
.recado{--q:24px;position:relative;overflow:hidden;background:var(--vinho-grad);color:#fff;margin:8px 0 16px;min-height:196px;padding:20px 18px}
.recado-foto{position:absolute;top:0;right:0;width:54%;height:100%;object-fit:cover;object-position:center 14%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 30%,#000 62%)}
.recado-txt{position:relative;width:61%;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.recado-de{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--manteiga)}
.recado-titulo{font-family:var(--display);font-weight:400;font-size:29px;line-height:1.05;color:#fff;margin-top:2px}
.recado-txt p{font-size:14px;line-height:1.38;color:#F7E4E4}
.recado-titulo,.recado-txt p{max-width:100%}   /* nome ou título de formulário comprido quebra dentro do recado */
.recado-titulo,.recado-txt p{text-shadow:0 1px 10px rgba(58,15,23,.45)}   /* leitura firme onde o texto encosta na foto */
.recado-txt .bt{margin-top:8px;white-space:nowrap}
/* Fala da nutri (parabéns e cobrança dos hábitos) */
.fala{--q:10px;display:flex;align-items:flex-start;gap:11px;padding:12px 14px 12px 12px;margin:10px 0}
.fala>div{flex:1;min-width:0}
.fala p{font-size:14.5px}
.fala p+p{margin-top:7px;padding-top:7px;border-top:1px solid rgba(43,20,24,.12)}
.fala small{display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.fala-parabens{background:linear-gradient(120deg,#F6A675,var(--laranja));color:var(--tinta)}
.fala-parabens small{color:var(--vinho-escuro)}
.fala-cobranca{background:var(--manteiga);color:var(--tinta)}
.fala-cobranca small{color:var(--vinho)}
/* Plano encerrado */
.bloqueio{--q:20px;background:var(--vinho-grad);color:#fff;padding:16px;display:flex;gap:14px;margin:12px 0 6px;align-items:flex-start}
.bloqueio strong{display:block;margin-bottom:4px;font-size:15.5px}
.bloqueio p{font-size:14px;color:#F6E2E2;margin-bottom:10px}

/* Parabéns do hábito, com a foto dela */
.celebra{text-align:center;padding:0 2px 2px}
.celebra-foto{--q:22px;width:100%;height:220px;object-fit:cover;object-position:center 14%}
.celebra-selo{--q:7px;position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:-22px;background:var(--laranja);color:var(--tinta);font-family:var(--display);font-size:23px;padding:8px 18px;clip-path:polygon(var(--q) 0,calc(100% - var(--q)) 0,100% var(--q),100% calc(100% - var(--q)),calc(100% - var(--q)) 100%,var(--q) 100%,0 calc(100% - var(--q)),0 var(--q))}
.celebra-selo .ic{color:var(--vinho-escuro)}
.celebra-txt{font-size:16.5px;margin:14px 6px 4px}
.celebra-assin{font-family:var(--display);color:var(--vinho);font-size:19px;margin-bottom:18px}

/* Tela de entrada */
/* Em tela baixa a entrada rola (o painel nunca fica cortado embaixo). */
.entrada{position:absolute;inset:0;z-index:30;background:var(--vinho-noite);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;container-type:inline-size}
/* Foto da entrada (demonstração e login): faixa acima do painel, que entra 56 px por baixo da quina cortada.
   O enquadramento segue os olhos da nutri: com --foto-prop (altura/largura da foto) e
   --foto-olhos (altura dos olhos em fração da largura), os olhos ficam a 42% da parte visível, em qualquer celular.
   A altura mínima garante cabelo e queixo inteiros. Navegador sem unidade cq fica com o 20% fixo da linha de cima. */
.entrada-foto,.ent-foto{position:relative;display:block;flex:1 0 0;min-height:calc(62cqw + 110px);container-type:size;overflow:hidden}
.entrada-foto img,.ent-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  object-position:50% clamp(100cqh - var(--foto-prop) * 100cqw, .42 * (100cqh - 100px) - var(--foto-olhos) * 100cqw, 0px)}
.entrada-painel{position:relative;isolation:isolate;margin-top:-110px;color:#fff;padding:76px 22px 34px;display:flex;flex-direction:column;gap:10px}
/* Névoa (pedido da Isabela, 09/11): o vinho nasce transparente e a foto se dissolve nele, em vez da borda reta com a
   quina cortada. A máscara fica no fundo (::before), não no texto: logo e frase continuam inteiros. */
.entrada-painel::before,.ent-painel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vinho-grad);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 32px,rgba(0,0,0,.82) 66px,#000 100px);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 32px,rgba(0,0,0,.82) 66px,#000 100px)}
.entrada-painel img{width:170px;height:auto}
.entrada-painel .assin{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--manteiga)}
.entrada-painel .assin::after{content:"";flex:1;height:1px;background:rgba(255,220,162,.4)}
.entrada-painel h1{text-wrap:balance;font-family:var(--display);font-weight:400;font-size:29px;line-height:1.1;letter-spacing:-.01em;margin:2px 0 0}
.entrada-painel p{font-size:15px;line-height:1.45;color:#F6E2E2;margin-bottom:6px}
.entrada .bt{--q:9px;background:var(--manteiga);color:var(--vinho-escuro);width:100%;min-height:50px;padding:15px 18px;font-size:16px}
.entrada-painel small{font-size:13px;color:#F6E2E2;text-align:center}

/* Feed */
.compor{--q:9px;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin:0 0 12px;color:var(--tinta-3);text-align:left}
.compor .txt{flex:1}
.compor>.ic{color:var(--vinho)}
.post{--q:14px;overflow:hidden;margin-bottom:16px}
.post>header{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px}
.post-quem{flex:1;min-width:0;line-height:1.2}
.post-quem strong{font-size:14px;font-weight:600}
.post-quem small{display:block;font-size:13px;color:var(--tinta-3);margin-top:2px}
.selo-nutri{--q:3px;display:inline-block;margin-left:6px;font-size:13px;font-weight:600;line-height:1.35;color:var(--tinta);background:var(--laranja);padding:0 7px;vertical-align:1px;letter-spacing:.02em}
.post-foto img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--vinho-noite)}
.post-frase{aspect-ratio:1/1;background:var(--manteiga);display:flex;flex-direction:column;justify-content:center;padding:0 11%}
.post-frase p{font-family:var(--display);font-size:25px;line-height:1.22;color:var(--vinho-escuro);text-wrap:balance;white-space:pre-wrap;overflow-wrap:anywhere}
.post-frase small{margin-top:22px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--vinho)}
.post-frase small::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:3px;margin-right:10px}
.post-acoes{display:flex;padding:4px 6px 0}
.post-acoes button{--q:6px;display:grid;place-items:center;width:var(--toque);height:var(--toque);color:var(--tinta)}
.post-acoes button.on{color:var(--vinho)}
.post-acoes button.on .ic{fill:var(--vinho);stroke:var(--vinho)}
.post-curtidas,.post-legenda{padding:0 14px;font-size:14px;margin-bottom:4px}
.post-curtidas strong,.post-legenda strong{font-weight:600}
.post-legenda{overflow-wrap:anywhere}
.post-ver{display:flex;align-items:center;min-height:var(--toque);margin:-8px 0 -6px;padding:0 14px;font-size:14px;color:var(--tinta-3);text-align:left}
.post-quando{padding:2px 14px 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
/* No celular o post vai de ponta a ponta, sem moldura, como numa rede social */
.pa-corpo .post{margin:0 -18px 20px;border:0;background:none;clip-path:none}
.pa-corpo .post>header{padding:8px 10px 10px 18px}
.pa-corpo .post-curtidas,.pa-corpo .post-legenda,.pa-corpo .post-ver,.pa-corpo .post-quando{padding-left:18px;padding-right:18px}
.pa-corpo .post-acoes{padding-left:9px}
.pa-corpo .comentarios{padding:8px 18px 12px}
.post-denuncia{margin:0 12px 10px;font-size:13px}
.comentarios{border-top:1px solid var(--linha);padding:8px 12px 12px}
.comentario{display:flex;gap:8px;align-items:flex-start;padding:6px 0;font-size:14px}
.comentario .txt{flex:1;min-width:0;overflow-wrap:anywhere}   /* min-width:0: o texto encolhe e o × de excluir nunca sai da linha */
.comentario strong{font-weight:600;margin-right:5px}
.comentario small{display:block;color:var(--tinta-3);font-size:13px}
.comentario .x{color:var(--tinta-3);font-size:18px;line-height:1;margin:-7px -12px -7px 0}
.form-comentario{display:flex;gap:8px;margin-top:6px}
.form-comentario input{--q:7px;--bg:var(--fundo);--bc:var(--borda);flex:1;min-width:0;min-height:var(--toque);padding:8px 12px;font-size:16px}
.form-comentario input:focus{--bc:var(--vinho);outline:2px solid var(--vinho);outline-offset:-2px}
.form-comentario button{color:var(--vinho);font-weight:600;min-height:var(--toque);padding:0 10px}

/* Plano */
.refeicao{--q:12px;padding:14px 14px;margin-bottom:10px}
.ref-cab{display:flex;align-items:center;gap:10px}
.ref-cab div{flex:1;min-width:0}
.ref-cab strong{display:block;font-size:16px;font-weight:600}
.ref-cab small{color:var(--tinta-3);font-size:13px}
.comi{--q:6px;display:inline-flex;align-items:center;gap:6px;min-height:var(--toque);padding:6px 12px;font-size:14px;font-weight:600;color:var(--tinta-2)}
.comi.on{--bg:var(--ok);--bc:var(--ok);color:#fff}
.itens{list-style:none;margin-top:10px;border-top:1px solid var(--linha)}
.itens li{display:flex;justify-content:space-between;gap:12px;padding:8px 0 0;font-size:14.5px}
.itens li span:first-child{font-weight:500}
.itens li span:last-child{color:var(--tinta-2);text-align:right}
.itens li>span:first-child,.itens li.com-troca summary>span:first-child{min-width:0}   /* nome do alimento comprido quebra; a porção fica inteira */
.subs{margin-top:10px}
.subs summary{cursor:pointer;color:var(--vinho);font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:6px;min-height:var(--toque)}
.subs summary::-webkit-details-marker{display:none}
.subs ul{--q:8px;list-style:none;margin-top:8px;background:var(--fundo);padding:6px 12px}
.subs li{padding:6px 0;font-size:14px;border-bottom:1px solid var(--linha)}
.subs li:last-child{border-bottom:0}
.ref-acoes{display:flex;justify-content:flex-end;margin-top:12px}
/* Plano v2: opções da refeição, trocas por item, observação, texto livre e o que vem depois das refeições */
.ref-ops{margin-top:12px;gap:6px}
.ref-ops .chip{padding:6px 13px;font-size:14px}
.ref-op-info{margin-top:8px;font-size:13px;color:var(--tinta-3);letter-spacing:.02em}
.itens li.com-troca{display:block;padding:0}
.itens li.com-troca details{padding:8px 0 0}
.itens li.com-troca summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--toque);cursor:pointer;list-style:none}
.itens li.com-troca summary::-webkit-details-marker{display:none}
.itens li.com-troca summary>span:first-child{font-weight:500}
.itens .porcao{color:var(--tinta-2);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.troca-marca{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--vinho)}
.troca-marca .ic{width:14px;height:14px}
.com-troca details[open] .troca-marca{color:var(--tinta-3)}
.trocas{--q:7px;list-style:none;margin:7px 0 2px;background:var(--fundo);padding:4px 12px}
.trocas li{display:block;padding:6px 0;font-size:13.5px;border-bottom:1px solid var(--linha);color:var(--tinta)}
.trocas li:last-child{border-bottom:0}
.trocas small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--laranja-texto);margin-right:4px}
.ref-texto,.plano-texto{margin-top:10px;font-size:14.5px;line-height:1.5;white-space:pre-line}
.ref-texto{padding-top:10px;border-top:1px solid var(--linha)}
.ref-obs{display:flex;gap:8px;align-items:baseline;margin-top:10px;font-size:13.5px;color:var(--tinta-2);overflow-wrap:anywhere}
.ref-obs::before{content:"";width:5px;height:5px;transform:rotate(45deg) translateY(-2px);background:var(--laranja-forte);flex:none}
.plano-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.plano-meta div{--q:8px;padding:9px 6px;text-align:center}
.plano-meta b{display:block;font-family:var(--display);font-weight:400;font-size:19px;color:var(--vinho-escuro);line-height:1.1}
.plano-meta span{font-size:13px;color:var(--tinta-3)}
.plano-sec>summary{cursor:pointer;list-style:none;min-height:var(--toque)}
.plano-sec>summary::-webkit-details-marker{display:none}
.plano-sec>summary>.ic{color:var(--vinho);transition:transform .15s}
.plano-sec[open]>summary>.ic{transform:rotate(90deg)}
.plano-sec-corpo{margin-top:4px}
.plano-sec-corpo h3,.plano-sec-corpo h4{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vinho);margin:16px 0 0}
.plano-sec-corpo .itens{margin-top:6px}
.plano-nota{margin-top:8px;font-size:13px;color:var(--tinta-3)}
.plano-sub{margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.receita+.receita{margin-top:14px;padding-top:4px;border-top:1px solid var(--linha)}
.itens .quando{display:block;font-size:13px;font-weight:400;color:var(--tinta-3);margin-top:1px}
.plano-rodape{margin:18px 0 6px;text-align:center;font-size:13px;color:var(--tinta-3);display:flex;flex-direction:column;gap:3px}

/* Hábitos */
.hab-hoje{display:flex;flex-direction:column;gap:8px}
.hab-linha{--q:10px;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px}
.hab-linha div{flex:1;min-width:0}
.hab-linha strong{display:block;font-size:15px;font-weight:600}
.hab-linha small{display:inline-flex;align-items:center;gap:4px;color:var(--tinta-3);font-size:13px}
.hab-linha small .ic{width:14px;height:14px;color:var(--laranja-forte)}
.check-grande{--q:6px;--bw:2px;width:var(--toque);height:var(--toque);display:grid;place-items:center;color:transparent;flex:none}
.check-grande:focus-visible{outline-color:var(--tinta)}
.check-grande.on:focus-visible{outline-color:#fff}
.check-grande.on{--bg:var(--ok);--bc:var(--ok);color:#fff}
.check-grande .ic{stroke-width:2.6}
.metas{list-style:none;display:flex;flex-direction:column;gap:8px}
.meta{--q:10px;display:flex;align-items:center;gap:10px;padding:11px 14px}
.meta>.ic{color:var(--vinho)}
.meta div{flex:1;min-width:0}
.meta strong{display:block;font-size:14.5px;font-weight:500}
.meta small{color:var(--tinta-3);font-size:13px}
.meta.feita>.ic{color:var(--ok)}
.meta.feita strong{text-decoration:line-through;color:var(--tinta-3)}
.melhorar{display:flex;flex-direction:column;gap:6px}
.melhorar div{--q:9px;display:flex;align-items:center;gap:10px;padding:10px 14px}
.melhorar span{flex:1;min-width:0;font-size:14.5px}
.barra-pct{width:80px;height:6px;background:var(--linha);overflow:hidden}
.barra-pct i{display:block;height:100%;background:var(--laranja-forte)}
.mes-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 8px}
.mes-nav strong{font-size:15px;font-weight:600}
.grade-hab{--q:12px;padding:10px;overflow-x:auto}
.grade-hab table{border-collapse:separate;border-spacing:3px}
.grade-hab th{font-size:13px;font-weight:500;color:var(--tinta-3);min-width:24px;text-align:center}
.grade-hab th.nome,.grade-hab td.nome{position:sticky;left:0;background:#fff;text-align:left;font-size:13px;font-weight:600;color:var(--tinta);min-width:96px;max-width:110px;padding-right:6px;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grade-hab td.nome{white-space:normal;line-height:1.15}
/* Com a grade rolada, a coluna fixa cobre também o respiro da caixa (10 px) e o vão entre casas (3 px): nada do que rola aparece em volta do nome. */
.grade-hab th.nome,.grade-hab td.nome{box-shadow:-13px 0 0 #fff,3px 0 0 #fff}
.dia-hab{--q:3px;width:24px;height:24px;display:block}
.dia-hab.on{--bg:var(--vinho);--bc:var(--vinho)}
.dia-hab.hoje{--bc:var(--vinho);--bw:2px}
.dia-hab.on.hoje{box-shadow:inset 0 0 0 2px #fff}
.dia-hab:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.dia-hab.on:focus-visible{outline-color:#fff}
.dia-hab.fut,.dia-hab.antes{border-color:transparent;background:repeating-linear-gradient(135deg,var(--linha) 0 1px,transparent 1px 5px);cursor:default}

/* Eu / perfil */
.perfil{display:flex;align-items:center;gap:14px;margin:14px 0 6px}
.perfil h1,.perfil strong{display:block;font-family:var(--display);font-size:24px;font-weight:400;line-height:1.2;color:var(--vinho-escuro)}
.perfil small{color:var(--tinta-2);font-size:13.5px}
.atalhos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.atalho{--q:12px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;position:relative}
.atalho .ic{color:var(--vinho)}
.atalho strong{font-size:15px;font-weight:600}
.atalho small{color:var(--tinta-3);font-size:13px}
.atalho .bolinha{top:10px;right:10px}
.sair{display:block;min-height:var(--toque);margin:22px auto 0;color:var(--tinta-3);font-size:14px;font-weight:500;padding:8px 14px}

/* Calendário em bolinhas (arquivo do diário). As bolinhas ficam redondas: é o pedido dela, igual ao arquivo de stories. */
.cal{--q:12px;padding:12px}
.cal-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px}
.cal-letra{text-align:center;font-size:13px;font-weight:600;color:var(--tinta-3)}
.cal-dia{position:relative;aspect-ratio:1/1;display:grid;place-items:center;font-size:13px;color:var(--tinta-3);border-radius:50%}
button.cal-dia{cursor:pointer}
.cal-dia.tem{padding:2.5px;background:conic-gradient(var(--vinho),var(--laranja),var(--manteiga),var(--laranja),var(--vinho))}
.cal-dia.tem img,.cal-dia.tem .sem-foto{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;background:var(--neutro)}
.cal-dia.tem .sem-foto{display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--manteiga);background:var(--vinho-noite)}
.cal-dia .num{position:absolute;bottom:-4px;right:-4px;background:var(--vinho);font-size:13px;font-weight:700;color:#fff;padding:0 4px;line-height:16px;min-width:16px;text-align:center}
.cal-dia.hoje:not(.tem){box-shadow:inset 0 0 0 2px var(--vinho);color:var(--vinho);font-weight:700}

/* Visualizador de stories */
.stories{position:absolute;inset:0;background:#140809;color:#fff;display:flex;flex-direction:column;pointer-events:auto;z-index:45}
#camada-nu .stories{position:fixed;inset:0;max-width:430px;margin:0 auto}
.st-barras{display:flex;gap:4px;padding:14px 12px 8px}
.st-barras i{flex:1;height:3px;background:rgba(255,255,255,.3)}
.st-barras i.on{background:var(--manteiga)}
.st-cab{display:flex;align-items:center;gap:10px;padding:2px 12px 10px}
.st-cab div{flex:1;min-width:0}
.st-cab strong{display:block;font-size:14.5px}
.st-cab small{color:rgba(255,255,255,.72);font-size:13px}
.st-cab button{color:#fff}
.st-midia{position:relative;flex:none}
.st-midia img,.st-midia .st-sem-foto{width:100%;aspect-ratio:1/1;object-fit:cover}
.st-sem-foto{display:grid;place-items:center;background:linear-gradient(140deg,var(--vinho),var(--vinho-escuro));font-family:var(--display);font-size:24px;text-align:center;padding:20px}
.st-toque{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.st-info{flex:1;overflow:auto;padding:14px 16px 24px;font-size:14.5px}
.st-info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
.st-info dt{color:rgba(255,255,255,.62)}
.st-info .pens{margin-top:12px}
.st-info .pens p{margin-top:6px;color:rgba(255,255,255,.9)}
.st-info .pens b{color:var(--manteiga);font-weight:600}

/* Diário (formulário) */
.foto-escolher{--q:14px;display:grid;place-items:center;aspect-ratio:1/1;background:#fff;outline:1.5px dashed var(--borda);outline-offset:-10px;color:var(--tinta-2);text-align:center;cursor:pointer;overflow:hidden;position:relative}
.foto-escolher:has(img){outline:0}
/* Sem foto, ícone e texto no meio do quadro também no Safari (lá a linha da grade não estica com a altura que vem do aspect-ratio).
   Com foto fica como estava: o align-content:center faria a foto perder a altura do quadro. */
.foto-escolher:not(:has(img)){align-content:center}
.foto-escolher:has(input:focus-visible){outline:2px solid var(--vinho);outline-offset:-6px}
.foto-escolher img{width:100%;height:100%;object-fit:cover}
.foto-escolher input{position:absolute;inset:0;opacity:0;cursor:pointer}
.foto-escolher .dica{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px}
.foto-escolher .dica .ic{color:var(--vinho)}
.foto-escolher.retrato{aspect-ratio:3/4}
.fome{--q:12px;padding:12px 14px}
.fome-num{font-family:var(--display);font-size:36px;text-align:center;color:var(--vinho)}
.fome input{-webkit-appearance:none;appearance:none;width:100%;height:var(--toque);background:transparent;cursor:pointer}
.fome input::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--manteiga),var(--laranja),var(--vinho))}
.fome input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:30px;margin-top:-12px;background:var(--vinho);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.fome input::-moz-range-track{height:6px;background:linear-gradient(90deg,var(--manteiga),var(--laranja),var(--vinho))}
.fome input::-moz-range-thumb{width:18px;height:30px;border:0;border-radius:0;background:var(--vinho)}
.fome-legenda{display:flex;justify-content:space-between;font-size:13px;color:var(--tinta-3)}
.check-lista{--q:12px;display:flex;flex-direction:column;gap:6px;padding:8px 12px}
.check-lista label{display:flex;align-items:center;gap:10px;min-height:var(--toque);padding:4px 0;font-size:14.5px;overflow-wrap:anywhere}
.check-lista .campo{margin:4px 0 6px}
input[type=checkbox]:not(.chave input){--q:4px;-webkit-appearance:none;appearance:none;width:20px;height:20px;flex:none;cursor:pointer}
input[type=checkbox]:not(.chave input):checked{--bg:var(--vinho);--bc:var(--vinho);--marcador:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.alternar{--q:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-top:12px}
.alternar>div{min-width:0}
.alternar strong{display:block;font-size:14.5px;font-weight:600}
.alternar small{color:var(--tinta-3);font-size:13px}
.chave{position:relative;width:48px;height:28px;flex:none}
/* A chave desenhada tem 28 px de altura; a área de toque (o input) tem 56 x 44 px.
   Medida explícita: no Safari, input em posição absoluta com largura e altura auto fica com o tamanho próprio (12 px). */
.chave input{opacity:0;position:absolute;top:-8px;left:-4px;width:calc(100% + 8px);height:calc(100% + 16px);cursor:pointer;margin:0}
.chave i{--q:6px;position:absolute;inset:0;background:var(--borda);transition:background .15s;pointer-events:none}
.chave i::after{--q:4px;content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;transition:transform .15s}
.chave input:checked+i{background:var(--vinho)}
.chave input:checked+i::after{transform:translateX(20px)}
.chave input:focus-visible+i{box-shadow:inset 0 0 0 2px var(--tinta)}
.chave input:checked:focus-visible+i{box-shadow:inset 0 0 0 2px #fff}
/* Caixa de marcar e opção: o anel de foco vai na linha inteira (a caixa chanfrada cortaria o anel). */
input[type=checkbox]:not(.chave input):focus-visible,.opcoes input[type=radio]:focus-visible{outline:none}
label:has(>input[type=checkbox]:not(.chave input):focus-visible),.opcoes label:has(>input[type=radio]:focus-visible){outline:2px solid var(--vinho);outline-offset:2px}

/* Fotos por consulta */
.comparar{--q:12px;padding:12px}
.comparar-sel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.comparar-sel select{--q:7px;--bg:var(--fundo);width:100%;min-height:var(--toque);padding:8px 32px 8px 10px;font-size:16px}
.lado-a-lado{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.lado-a-lado figure{display:flex;flex-direction:column;gap:5px}
.lado-a-lado img,.foto-falta{--q:10px;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--neutro)}
.foto-falta{display:grid;place-items:center;color:var(--tinta-3);font-size:13px;background:#fff;box-shadow:inset 0 0 0 1px var(--linha)}
.lado-a-lado figcaption{font-size:13px;text-align:center;color:var(--tinta-2)}
.consulta{--q:12px;padding:12px 14px;margin-bottom:10px}
.consulta-cab{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.consulta-cab strong{flex:1;font-size:15px;font-weight:600}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--tinta-2);text-align:center}
.slot img{width:100%;aspect-ratio:3/4;object-fit:cover;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.slot .foto-escolher{--q:8px;aspect-ratio:3/4;outline-offset:-6px}
.slot .foto-escolher .dica{font-size:13px}
.slot-x{font-size:13px;color:var(--perigo);min-height:var(--toque);text-decoration:underline;text-underline-offset:3px}

/* Ebooks: capa com a quina de cima cortada, como página dobrada */
.ebooks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.ebook{display:flex;flex-direction:column;gap:7px;text-align:left;overflow-wrap:anywhere}   /* anywhere: no Safari o botão crescia até o tamanho da palavra mais comprida do título */
.capa{--q:22px;aspect-ratio:3/4;padding:16px 14px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 7px var(--cor,transparent),inset 0 0 0 8px rgba(255,255,255,.4)}
.capa.escura{box-shadow:inset 0 0 0 7px var(--cor,transparent),inset 0 0 0 8px rgba(43,20,24,.28)}
.capa.escura{color:var(--tinta)}
.capa.mini{--q:10px;padding:0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.14)}
.capa b{font-family:var(--display);font-weight:400;font-size:17px;line-height:1.15}
.capa small{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding-right:16px}
.ebook strong{font-size:14px;font-weight:600;line-height:1.2}
.ebook small{color:var(--tinta-3);font-size:13px}
.ebook .capa small{color:inherit}   /* o nome na capa segue a cor da capa (branco ou tinta), não o cinza da legenda */
.leitor{flex:1;width:100%;border:0;background:#fff}
.leitor-paginas{flex:1;overflow:auto;background:var(--tinta);padding:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.leitor-paginas canvas{background:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.35);max-width:100%}
.leitor-pag{flex:0 0 auto;max-width:100%;background:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.35)}
.leitor-pag canvas{display:block;box-shadow:none}

/* Formulário de check-in (resposta) */
.pergunta{--q:12px;padding:13px 14px;margin-bottom:10px}
.pergunta>strong{display:block;font-size:15px;font-weight:600;margin-bottom:9px}
.pergunta>strong i{color:var(--vinho);font-style:normal}
.opcoes{display:flex;flex-direction:column;gap:4px}
.opcoes label{display:flex;align-items:center;gap:10px;min-height:var(--toque);padding:4px 0;font-size:14.5px;overflow-wrap:anywhere}
.opcoes input[type=radio]{width:19px;height:19px;flex:none;accent-color:var(--vinho)}
/* De 0 a 10 em casas de 44 px: no celular a escala quebra em duas ou três linhas. */
.escala{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--toque),1fr));gap:4px}
.escala label{position:relative}
.escala input{position:absolute;opacity:0}
.escala span{--q:5px;display:grid;place-items:center;height:var(--toque);font-size:13.5px;font-weight:600;cursor:pointer}
.escala input:checked+span{--bg:var(--vinho);--bc:var(--vinho);color:#fff}
.escala input:focus-visible+span,.simnao input:focus-visible+span{box-shadow:inset 0 0 0 2px var(--tinta)}
.escala input:checked:focus-visible+span,.simnao input:checked:focus-visible+span{box-shadow:inset 0 0 0 2px #fff}
.simnao{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.simnao label{position:relative}
.simnao input{position:absolute;opacity:0}
.simnao span{--q:7px;display:grid;place-items:center;height:var(--toque);font-weight:600;cursor:pointer}
.simnao input:checked+span{--bg:var(--vinho);--bc:var(--vinho);color:#fff}
.resposta-lista{display:flex;flex-direction:column;gap:10px}
.resposta-lista div{border-bottom:1px solid var(--linha);padding-bottom:8px}
.resposta-lista dt{font-size:13px;color:var(--tinta-3)}
.resposta-lista dd{font-size:15px;margin-top:2px}

/* Lista de avisos */
.avisos{list-style:none;display:flex;flex-direction:column;gap:6px}
.aviso{--q:9px;display:flex;gap:10px;align-items:flex-start;padding:11px 12px}
.aviso .ic{color:var(--vinho);margin-top:2px}
.aviso div{flex:1;min-width:0;font-size:14.5px;overflow-wrap:anywhere}
.aviso small{display:block;color:var(--tinta-3);font-size:13px;margin-top:2px}
/* Aviso lido: fundo creme em vez de transparência, para o texto manter o contraste. */
.aviso.lido{--bg:var(--fundo)}
.aviso.lido div{color:var(--tinta-2)}
.aviso .ponto-novo{margin-top:7px}

/* ---------- Painel da nutri ---------- */
.nu{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - var(--demo))}
.nu-lado{background:linear-gradient(180deg,#4A1420 0%,#2E0B12 100%);color:#F6E8E4;padding:22px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:var(--demo);height:calc(100vh - var(--demo));overflow:auto}
.nu-logo{width:160px;margin:2px 8px 24px}
.nu-item{--q:8px;display:flex;align-items:center;gap:11px;min-height:var(--toque);padding:11px 12px;font-size:15px;color:#E9D5D0;text-align:left;position:relative}
.nu-item.on{background:var(--manteiga);color:var(--vinho-escuro);font-weight:600}
.nu-item .conta{--q:3px;margin-left:auto;background:var(--laranja);color:var(--tinta);font-size:13px;font-weight:700;padding:0 7px;line-height:1.45}
.nu-rodape{margin-top:auto;padding:14px 8px 4px;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.12)}
.nu-rodape strong{display:block;font-size:14px;font-weight:600;color:#fff}
.nu-rodape small{display:block;font-size:13px;color:#D9C2BD}
.nu-main{padding:28px clamp(16px,3vw,40px) 60px;background:var(--fundo);min-width:0}
.nu-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.nu-cab .titulo{font-size:38px;color:var(--vinho-escuro);letter-spacing:-.015em}
.nu-cab .sub{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-top:4px}
.cards-num{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.num-card{--q:12px;padding:14px 16px;text-align:left}
.num-card{padding:16px 18px}
.num-card b{display:block;font-family:var(--display);font-weight:400;font-size:38px;line-height:1.05;margin-bottom:4px}
.num-card span{color:var(--tinta-2);font-size:14px}
.num-card.destaque{--q:18px;--bg:var(--vinho-grad);--bc:transparent;color:#fff}
.num-card.destaque span{color:#F6E2E2}
.duas-col{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.secao{margin-bottom:24px}
.secao>h2,.secao>h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--vinho-escuro);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.secao>h2 .link,.secao>h3 .link{margin-left:auto;font-family:var(--corpo);font-size:14px}
.secao>h2 .etiqueta{font-family:var(--corpo)}
details.cartao>summary>strong{min-width:0}   /* ficha > Check-in: título de formulário comprido quebra dentro do cartão */
.lista{--q:12px;overflow:hidden}
.lista-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--linha);width:100%;text-align:left}
.lista-item:last-child{border-bottom:0}
.lista-item>.ic{color:var(--vinho)}
.lista-item .meio{flex:1;min-width:0}
.lista-item strong{display:block;font-size:15px;font-weight:600}
.lista-item small{color:var(--tinta-3);font-size:13px}
.lista-item .x{--q:5px;color:var(--tinta-3);font-size:18px}
/* Botão × (excluir): 44 px de toque em toda lista. */
button.x{min-width:var(--toque);min-height:var(--toque);display:inline-grid;place-items:center;line-height:1}
.consulta-cab .x{color:var(--tinta-3);font-size:18px;margin:-10px -10px -10px 0}
.miniaturas{display:flex;gap:4px}
.miniaturas img{--q:6px;width:36px;height:36px;object-fit:cover;background:var(--neutro)}
.busca{max-width:320px}
.ficha-cab{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ficha-cab .meio{flex:1;min-width:200px}
.ficha-cab h1,.ficha-cab h2{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.1;color:var(--vinho-escuro)}
.abas-ficha{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--linha);margin-bottom:18px}
.abas-ficha button{min-height:var(--toque);padding:10px 12px;font-size:14.5px;color:var(--tinta-2);border-bottom:3px solid transparent;white-space:nowrap;position:relative}
.abas-ficha button.on{color:var(--vinho);border-color:var(--vinho);font-weight:600}
.abas-ficha .ponto-novo{position:absolute;top:8px;right:2px}
.form-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-linha .campo{flex:1;min-width:160px}
.nota{--q:9px;font-size:13.5px;color:var(--tinta-2);padding:10px 12px;display:flex;gap:8px;margin-bottom:12px}
.nota .ic{color:var(--vinho);margin-top:1px}
.nota .link{min-height:0;display:inline}   /* link no meio da frase: segue a linha do texto */
.diario-item{--q:12px;display:flex;gap:12px;padding:12px;margin-bottom:10px;width:100%;text-align:left}
.diario-item img,.diario-item .sem-foto{--q:9px;width:84px;height:84px;object-fit:cover;flex:none;background:var(--neutro)}
.diario-item .sem-foto{display:grid;place-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--manteiga);background:var(--vinho-noite)}
.diario-item .meio{flex:1;min-width:0;font-size:14px}
.diario-item .meio strong{font-size:15px;font-weight:600}
.diario-item .meio p{color:var(--tinta-2);margin-top:3px}
.diario-dados{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.diario-dados .etiqueta{max-width:100%;overflow-wrap:anywhere}   /* "faltou ..." comprido quebra dentro da etiqueta */
.construtor .pergunta-ed{--q:12px;--bc:var(--linha);padding:12px 14px;margin-bottom:10px}
.pergunta-ed .topo-ed{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.pergunta-ed .topo-ed select{--q:6px;--bg:var(--fundo);min-height:var(--toque);padding:7px 30px 7px 9px;font-size:16px}   /* 16 px: o iPhone não dá zoom ao tocar */
.pergunta-ed .ord{display:flex;gap:2px;margin-left:auto}
.pergunta-ed .ord button{--q:5px;min-width:var(--toque);min-height:var(--toque);padding:5px 8px;color:var(--tinta-2)}
.op-ed{display:flex;gap:6px;align-items:center;margin-top:6px}
.op-ed input{flex:1}
.op-ed .x{color:var(--tinta-3)}
.obrig{display:flex;align-items:center;gap:8px;min-height:var(--toque);font-size:13.5px;color:var(--tinta-2);margin-top:4px}
.msg-ed{--q:12px;padding:12px 14px;margin-bottom:10px}
.msg-ed .form-linha{margin-bottom:8px}
.msg-ed input[type=number].campo{flex:0 0 84px;min-width:0}
.previa-msg{font-size:13.5px;color:var(--tinta-2);margin-top:6px;font-style:italic}
.cores{display:flex;gap:8px}
.cores button{--q:7px;width:var(--toque);height:var(--toque)}
.cores button.on{box-shadow:inset 0 0 0 2px var(--tinta),inset 0 0 0 4px #fff}
.cores button:focus-visible{outline:2px solid #fff;outline-offset:-6px;box-shadow:inset 0 0 0 2px var(--tinta)}
/* Ficha: aba Plano, adesão do "Comi", acesso ao app e link de convite */
.plano-topo{--q:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:14px}
.plano-topo .meio{flex:1;min-width:220px}
.plano-topo h2,.plano-topo h3{font-family:var(--display);font-weight:400;font-size:20px;color:var(--vinho-escuro);margin-bottom:2px}
.plano-leitura{max-width:560px}
a.bt{text-decoration:none}
a.bt-linha{color:var(--tinta)}
.grade-comi{width:fit-content;max-width:100%}
.grade-comi th{line-height:1.15;padding-bottom:2px}
.grade-comi th.nome,.grade-comi td.nome{min-width:120px;max-width:150px}
.conta-app .conta-linha{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.conta-app .sub{margin-bottom:12px}
.conta-app .etiqueta .ic{width:13px;height:13px}
.campo-link{color:var(--tinta-2)}   /* fica com os 16 px do .campo: o iPhone não dá zoom ao tocar */
.nu-sair{margin-top:6px;font-size:14px;color:#D9C2BD}

/* ---------- Toque e movimento ----------
   No toque, o botão afunda 1 px; no mouse, sobe 1 px. Cartão clicável sobe 2 px. Tudo entre 90 e 150 ms.
   O efeito de mouse só vale com mouse de verdade (hover:hover): no celular o hover não fica preso depois do toque. */
.bt,.ent-bt,.chip,.seg button,.comi,.check-grande,.atalho,button.num-card,button.diario-item,.capa,button.cal-dia,.pa-mais,.post-acoes button .ic{
  transition:transform var(--m-out) var(--ease),background-color var(--m-out) var(--ease),color var(--m-out) var(--ease),box-shadow var(--m-out) var(--ease)}
.icone-bt::before,.nu-item,button.lista-item,.post-acoes button,.pergunta-ed .ord button,button.x{transition:background-color var(--m-out) var(--ease),color var(--m-out) var(--ease)}
.bt:active:not([disabled]),.ent-bt:active:not(:disabled){transform:translateY(1px) scale(.985);transition-duration:var(--m-press)}
.chip:active,.seg button:active{transform:scale(.97);transition-duration:var(--m-press)}
.comi:active,.check-grande:active,button.cal-dia:active{transform:scale(.94);transition-duration:var(--m-press)}
.post-acoes button:active .ic{transform:scale(.88);transition-duration:var(--m-press)}
.pa-aba:active .pa-mais{transform:translateY(1px) scale(.96);transition-duration:var(--m-press)}
.atalho:active,button.num-card:active,button.diario-item:active,.ebook:active .capa{transform:scale(.985);transition-duration:var(--m-press)}
.icone-bt:active::before,button.lista-item:active,.pergunta-ed .ord button:active,button.x:active{background:var(--neutro)}
.st-cab .icone-bt:active::before{background:rgba(255,255,255,.14)}
.nu-item:not(.on):active{background:rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){
  .bt,.ent-bt{transition-duration:var(--m-in)}
  .bt:hover:not([disabled]),.ent-bt:hover:not(:disabled){transform:translateY(-1px)}
  .bt:active:not([disabled]),.ent-bt:active:not(:disabled){transform:translateY(1px) scale(.985);transition-duration:var(--m-press)}
  .bt-pri:hover{background:var(--vinho-escuro)}
  .bt-sec:hover{background:#FFD08A}
  .bt-linha:hover{--bc:var(--tinta-2)}
  .icone-bt:hover::before{background:var(--neutro)}
  .st-cab .icone-bt:hover::before{background:rgba(255,255,255,.14)}
  .post-acoes button:hover{background:var(--neutro)}
  .check-grande:hover:not(.on){--bc:var(--tinta-3)}
  .nu-item:hover:not(.on){background:rgba(255,255,255,.08)}
  .atalho:hover,button.num-card:hover,button.diario-item:hover,.ebook:hover .capa{transform:translateY(-2px);transition-duration:var(--m-in)}
  button.num-card:hover{box-shadow:inset 0 -3px 0 var(--laranja)}
  button.lista-item:hover{background:#FCF8F4}
  .lista-item .x:hover,.consulta-cab .x:hover{background:var(--neutro);color:var(--perigo)}
  .pergunta-ed .ord button:hover{background:var(--neutro)}
}

/* ---------- Produção ----------
   A coluna central e a tela cheia ficam em entrada.css. Aqui só o respiro do entalhe e da barra de gestos do celular. */
.producao .pa-topo{padding-top:max(16px,env(safe-area-inset-top))}
.producao .pa-abas{padding-bottom:max(14px,env(safe-area-inset-bottom))}

@media (max-width:900px){
  .nu{grid-template-columns:1fr}
  .nu-lado{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px;gap:4px}
  .nu-logo,.nu-rodape{display:none}
  .nu-sair{margin-top:0}
  .nu-item{white-space:nowrap;padding:8px 10px}
  .duas-col{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): conteúdo comprido (título de formulário no seletor) não alarga a coluna */
}
@media (max-width:600px){
  .palco{padding:0}
  .aparelho{width:100%;height:calc(100vh - var(--demo));min-height:0;border-radius:0;padding:0;box-shadow:none}
  .app-pac{border-radius:0}
  .demo .demo-nota{display:none}
}
/* Celular estreito: nas linhas com dois controles ou mais depois do nome (Editar, Duplicar, ×), o nome ocupa a primeira
   linha e os botões descem juntos para a de baixo, à direita, em vez de empurrar a página para o lado. Linha que é botão
   (Respostas novas, Diário de hoje) ou que tem um controle só (+30 dias, chave do ebook) continua numa linha só. */
@media (max-width:480px){
  div.lista-item:has(> .meio ~ * ~ *){flex-wrap:wrap;justify-content:flex-end}
  div.lista-item:has(> .meio ~ * ~ *) .meio{flex-basis:calc(100% - 64px)}
}
@media (max-width:360px){
  .recado-txt{width:66%}
  .recado-titulo{font-size:26px}
  .pa-titulo{font-size:28px}
  .entrada-painel h1{font-size:26px}
}
/* Tela de início: cartão no feed, atalho em "Eu" e o guia. O ícone imita o da tela do celular (cantos do próprio iPhone). */
.instalar{--q:10px;display:flex;gap:14px;align-items:center;padding:14px;margin:12px 0;background:var(--vinho-noite);color:#fff;
  clip-path:polygon(var(--q) 0,calc(100% - var(--q)) 0,100% var(--q),100% calc(100% - var(--q)),calc(100% - var(--q)) 100%,var(--q) 100%,0 calc(100% - var(--q)),0 var(--q))}
.instalar-ic{flex:0 0 56px;width:56px;height:56px;border-radius:13px}
.instalar-txt{min-width:0}
.instalar-txt strong{display:block;font-size:15.5px;font-weight:600;line-height:1.25}
.instalar-txt p{font-size:14px;line-height:1.35;color:#F6E2E2;margin:3px 0 8px}
.instalar-bts{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.instalar .bt-pri{background:var(--manteiga);color:var(--vinho-escuro)}
.instalar .link{color:#F6E2E2;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.atalho-ic-app{width:26px;height:26px;border-radius:6px}
.instalar-guia{display:flex;flex-direction:column;gap:18px;padding:2px 2px 6px}
.instalar-previa{display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 0 2px}
.instalar-previa img{width:76px;height:76px;border-radius:17px;box-shadow:0 10px 26px -12px rgba(58,15,23,.55)}
.instalar-previa span{font-size:13px;color:var(--tinta-2)}
.passos{list-style:none;counter-reset:passo;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.passos li{counter-increment:passo;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--tinta)}
.passos li::before{--q:5px;content:counter(passo);flex:0 0 26px;height:26px;margin-top:-1px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--vinho);
  clip-path:polygon(var(--q) 0,calc(100% - var(--q)) 0,100% var(--q),100% calc(100% - var(--q)),calc(100% - var(--q)) 100%,var(--q) 100%,0 calc(100% - var(--q)),0 var(--q))}
.passos b{font-weight:600;color:var(--vinho-escuro)}
.ic-comp{display:inline-block;width:19px;height:19px;vertical-align:-4px;color:var(--vinho)}
/* Movimento reduzido: nada desliza nem afunda; só a cor muda. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .bt,.ent-bt,.chip,.seg button,.comi,.check-grande,.atalho,button.num-card,button.diario-item,.capa,button.cal-dia,.pa-mais,.post-acoes button .ic{transform:none!important}
}