/* Entrada (login, primeiro acesso, nova senha, conta da nutri) e o layout do modo produção.
   Mesmo visual da tela de entrada do protótipo: a foto dela, o painel vinho com a quina cortada,
   o logo claro e a assinatura com o fio manteiga. Cores e fontes vêm do :root do estilo.css. */

/* ---------- Tela de entrada ---------- */
.ent{position:fixed;inset:0;z-index:60;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(110% 70% at 50% 0%,#5C1724 0%,#2E0B12 62%,#1E070C 100%)}
.ent-col{position:relative;max-width:480px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;
  background:var(--vinho-noite);overflow:hidden;container-type:inline-size}
/* A foto (.ent-foto) segue a regra da entrada no estilo.css: faixa acima do painel, enquadrada pelos olhos. */
.ent-painel{position:relative;isolation:isolate;margin-top:-110px;color:#fff;padding:76px 22px 30px;display:flex;flex-direction:column;gap:10px}
.ent-painel.ent-curto{padding-bottom:40px}
.ent-logo{width:170px;height:auto;display:block}
.ent-assin{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--manteiga)}
.ent-assin::after{content:"";flex:1;height:1px;background:rgba(255,220,162,.4)}
.ent-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 4px}
.ent-texto{font-size:15px;line-height:1.45;color:#F6E2E2}
.ent-painel small{font-size:13px;color:#F6E2E2;text-align:center;line-height:1.4}

.ent-form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.ent-rot{display:flex;flex-direction:column;gap:6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--manteiga)}
.ent-rot>span{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ent-campo{--q:8px;display:block;width:100%;min-height:48px;padding:13px 14px;font-size:16px;letter-spacing:0;text-transform:none;color:var(--tinta);background:#fff;border:0;
  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))}
/* Anel de foco por dentro (o clip-path corta o de fora), em vinho: o laranja no branco não chega a 3:1. */
.ent-campo:focus{outline:none;box-shadow:inset 0 0 0 2px var(--vinho)}
.ent-ver{font-size:13px;letter-spacing:.04em;text-transform:none;color:#F6E2E2;text-decoration:underline;text-underline-offset:3px;min-height:44px;margin:-13px -6px -13px 0;padding:0 6px;display:inline-flex;align-items:center}
.ent-msg{min-height:1.3em;font-size:14px;line-height:1.35;color:var(--manteiga);font-weight:600}
.ent-msg:empty{min-height:0}
.ent-aviso{--q:7px;background:rgba(255,220,162,.16);color:#fff;padding:10px 12px;font-size:14px;line-height:1.35;
  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))}
.ent-bt{--q:9px;display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:15px 18px;font-size:16px;font-weight:600;line-height:1.1;
  background:var(--manteiga);color:var(--vinho-escuro);text-decoration:none;cursor:pointer;
  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))}
@media (hover:hover) and (pointer:fine){ .ent-bt:hover{background:#FFD08A} }
.ent-bt:disabled{opacity:.7;cursor:progress}
.ent-bt:focus-visible{outline:2px solid var(--vinho-escuro);outline-offset:-5px}
.ent-links{display:flex;justify-content:center}
.ent-link{color:#fff;font-size:14.5px;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 6px;display:inline-flex;align-items:center}
.ent-abrindo{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:22px;padding:8px 0 4px}
.ent-abrindo i{width:6px;height:6px;background:var(--manteiga);animation:ent-pisca 1.1s infinite ease-in-out}
.ent-abrindo i:nth-child(2){animation-delay:.18s}
.ent-abrindo i:nth-child(3){animation-delay:.36s}
@keyframes ent-pisca{0%,80%,100%{opacity:.2}40%{opacity:1}}
html.na-entrada,html.na-entrada body{overflow:hidden}
@media (min-width:601px){
  .ent-col{min-height:100%;box-shadow:0 0 0 1px rgba(255,220,162,.12),0 30px 80px -30px rgba(0,0,0,.6)}
}

/* ---------- Modo produção: sem barra de demonstração e sem a moldura de celular ----------
   No celular o app do paciente ocupa a tela inteira; no computador, uma coluna central de 480 px. */
html.producao{--demo:0px}
html.producao .palco{padding:0;min-height:100vh;min-height:100dvh}
html.producao .aparelho{width:100%;max-width:480px;height:100vh;height:100dvh;min-height:0;border-radius:0;padding:0;box-shadow:none;background:var(--fundo)}
html.producao .app-pac{border-radius:0}
@media (min-width:601px){
  html.producao .aparelho{box-shadow:0 0 0 1px rgba(255,220,162,.12),0 30px 80px -30px rgba(0,0,0,.6)}
}

/* "Ver como paciente" (só a nutri): faixa fina no alto, com o caminho de volta. */
.faixa-ver-como{position:fixed;top:0;left:0;right:0;z-index:55;height:48px;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 16px;background:var(--tinta);color:#F6ECE6;font-size:13px}
.faixa-ver-como b{font-weight:600}
.faixa-ver-como button{--q:4px;background:var(--manteiga);color:var(--vinho-escuro);min-height:44px;padding:5px 12px;font-size:13px;font-weight:600;
  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))}
html.producao.vendo-como .palco{padding-top:48px}
html.producao.vendo-como .aparelho{height:calc(100vh - 48px);height:calc(100dvh - 48px)}
@media (max-width:420px){ .faixa-ver-como .fvc-nota{display:none} }

/* ---------- Envio para o servidor (fila do aparelho) ----------
   Indicador discreto no alto: "Salvo", "Salvando…", "Aguardando internet – N itens", "N itens não aceitos". */
.pa-topo-dir{display:flex;align-items:center;gap:6px;min-width:0}
.sinc{--q:5px;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:62vw;min-height:44px;padding:5px 9px;font-size:13px;font-weight:500;line-height:1.15;
  color:var(--tinta-3);background:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
/* A pílula que se vê tem ~30 px; o botão em volta tem 44 px de toque. */
.sinc::before{content:"";position:absolute;inset:7px 0;z-index:-1;background:var(--sinc-fundo,transparent);
  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))}
.sinc[hidden]{display:none}
.sinc span{overflow:hidden;text-overflow:ellipsis}
/* No alto do app do paciente, em celular estreito (320 a 360 px), o texto desce para a segunda linha
   em vez de cortar: "Aguardando internet –" / "12 itens". A pílula cresce junto (padding de 10 px). */
.pa-topo-dir .sinc{white-space:normal;text-align:left;padding-top:10px;padding-bottom:10px}
.sinc i{flex:0 0 7px;width:7px;height:7px;background:currentColor;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sinc-ok{color:var(--tinta-3)}
.sinc-indo{color:var(--tinta-2)}
.sinc-indo i{animation:ent-pisca 1.1s infinite ease-in-out}
.sinc-espera{color:var(--vinho-escuro);--sinc-fundo:var(--manteiga)}
.sinc-erro{color:#fff;--sinc-fundo:var(--perigo)}
.sinc:focus-visible{outline:none}
.sinc:focus-visible::before{box-shadow:inset 0 0 0 2px var(--vinho)}
.sinc-erro:focus-visible::before{box-shadow:inset 0 0 0 2px #fff}
.nu-sinc{margin:4px 2px 10px}
.nu-sinc .sinc{max-width:100%;color:#D9C2BD}
.nu-sinc .sinc-espera{color:var(--vinho-escuro)}
.nu-sinc .sinc-erro{color:#fff}
.nu-sinc .sinc:focus-visible::before{box-shadow:inset 0 0 0 2px #fff}
.nu-sinc .sinc-espera:focus-visible::before{box-shadow:inset 0 0 0 2px var(--vinho-escuro)}
@media (max-width:900px){ .nu-sinc{margin:0;display:flex;align-items:center} }
.fila-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto}
.fila-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--neutro);border-left:3px solid var(--borda)}
.fila-item>div{flex:1;min-width:0}
.fila-item strong{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.fila-item small{display:block;font-size:13px;color:var(--tinta-3);margin-top:2px}
.fila-item.rec{border-left-color:var(--perigo)}
.fila-item.rec small{color:var(--perigo)}
.conf-acoes.conf-col{flex-direction:column;align-items:stretch}
.carregando-mes{margin:6px 0 10px}
.feed-mais{margin:6px 0 18px}