/* ═══════════════════════════════════════════════════════════
   Gabrideiros Gestão — mesmos tokens do site de vendas
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#FBF4EE;
  --paper-2:#F4E5D9;
  --paper-3:#EFDCCC;
  --tan:#E3C4A8;
  --tan-line:#D9BCA2;
  --cocoa:#4E2E1E;
  --cocoa-deep:#2F1A11;
  --cream:#FDF7EE;
  --brick:#A8442F;
  --verde:#3F7D50;
  --wa:#1FA855;

  --script:"Yellowtail","Segoe Script","Brush Script MT",cursive;
  --sans:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow-soft:0 18px 40px -26px rgba(47,26,17,.55);
  --shadow-lift:0 22px 46px -22px rgba(47,26,17,.42);
  --ease-spring:cubic-bezier(.34,1.42,.5,1);
  --trilha:236px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-weight:300;
  color:var(--cocoa);background:var(--paper);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cocoa);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
.script{font-family:var(--script);font-weight:400;line-height:1.05}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── botões ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.6rem 1.35rem;border-radius:var(--r-pill);
  font-weight:500;font-size:.94rem;white-space:nowrap;
  transition:transform .2s var(--ease-spring),box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--cocoa);color:var(--cream);box-shadow:0 10px 22px -12px rgba(47,26,17,.85)}
.btn-solid:hover{background:var(--cocoa-deep)}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--tan-line)}
.btn-ghost:hover{background:var(--paper-2)}
.btn-perigo{color:var(--brick);box-shadow:inset 0 0 0 1px rgba(168,68,47,.4)}
.btn-perigo:hover{background:rgba(168,68,47,.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-mini{min-height:36px;padding:.3rem .85rem;font-size:.84rem}
.larga{width:100%}

/* ── entrar ─────────────────────────────────────────────────── */
.login{
  min-height:100dvh;display:grid;place-items:center;padding:1.5rem;position:relative;
}
.login::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(60vw 50vw at 12% -8%, rgba(227,196,168,.35), transparent 70%),
    radial-gradient(55vw 45vw at 92% 20%, rgba(227,196,168,.22), transparent 72%);
}
.login-card{
  position:relative;width:min(400px,100%);text-align:center;
  background:var(--cream);border-radius:26px;padding:2.4rem 2rem 2rem;
  box-shadow:inset 0 0 0 1px var(--tan-line),var(--shadow-lift);
}
.seal{width:86px;height:auto;margin:0 auto .6rem;color:var(--cocoa)}
.login-card h1{font-size:2.6rem;margin-bottom:.2rem}
.login-sub{font-size:.9rem;color:#7a5843;margin-bottom:1.6rem;line-height:1.5}
.campo{display:block;text-align:left;margin-bottom:.9rem}
.campo > span{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:#8a6852;margin-bottom:.3rem;
}
.campo input,.campo textarea,.campo select{
  width:100%;padding:.75rem .95rem;border-radius:var(--r-md);border:0;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--tan-line);
  font-weight:300;transition:box-shadow .18s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;box-shadow:inset 0 0 0 2px var(--cocoa);
}
.campo textarea{resize:vertical;min-height:76px}
.campo.erro input,.campo.erro textarea{box-shadow:inset 0 0 0 2px var(--brick)}
.login-erro{
  color:var(--brick);font-size:.85rem;margin:.2rem 0 .9rem;text-align:left;
}
#formLogin .btn,#formSenha .btn{margin-top:.5rem}

/* ── esqueleto ──────────────────────────────────────────────── */
.app{min-height:100dvh}

.trilha{
  position:fixed;left:0;top:0;bottom:0;width:var(--trilha);z-index:20;
  display:flex;flex-direction:column;gap:2px;padding:1.5rem .9rem;
  background:linear-gradient(180deg,#F8EDE3,var(--paper-2));
  border-right:1px solid var(--tan-line);
}
.trilha-marca{
  font-family:var(--script);font-size:2.1rem;line-height:1;
  color:var(--cocoa);padding:0 .7rem;margin-bottom:1.3rem;
}
.tr{
  display:flex;align-items:center;gap:.75rem;position:relative;
  padding:.7rem .8rem;border-radius:var(--r-md);font-size:.95rem;
  transition:background .2s,color .2s;text-align:left;
}
.tr:hover{background:rgba(255,255,255,.6)}
.tr[aria-current="true"]{background:var(--cocoa);color:var(--cream);font-weight:500}
.tr-sair{margin-top:auto;color:#8a6852;font-size:.9rem}
.badge{
  margin-left:auto;background:var(--brick);color:#fff;font-size:.7rem;font-weight:600;
  min-width:20px;height:20px;border-radius:var(--r-pill);display:grid;place-items:center;padding:0 .35rem;
}
.tr[aria-current="true"] .badge{background:var(--tan);color:var(--cocoa-deep)}

/* ícones desenhados em CSS, sem biblioteca */
.ic{width:20px;height:20px;flex:none;position:relative;opacity:.9}
.ic::before,.ic::after{content:"";position:absolute;border-radius:2px;background:currentColor}
.ic-hoje::before{inset:2px 2px 2px 2px;border:2px solid currentColor;background:none;border-radius:4px}
.ic-hoje::after{left:4px;right:4px;top:6px;height:2px}
.ic-pedidos::before{left:2px;top:2px;width:6px;bottom:2px;border-radius:3px}
.ic-pedidos::after{left:11px;top:2px;width:6px;height:11px;border-radius:3px;opacity:.55}
.ic-dinheiro::before{inset:4px 1px;border:2px solid currentColor;background:none;border-radius:3px}
.ic-dinheiro::after{left:8px;top:7px;width:4px;height:6px;border-radius:1px}
.ic-precos::before{left:3px;top:3px;width:14px;height:14px;transform:rotate(45deg);border:2px solid currentColor;background:none;border-radius:3px}
.ic-precos::after{left:6px;top:6px;width:4px;height:4px;border-radius:50%}
.ic-clientes::before{left:5px;top:2px;width:10px;height:10px;border-radius:50%}
.ic-clientes::after{left:1px;bottom:2px;width:18px;height:8px;border-radius:9px 9px 3px 3px;opacity:.6}
.ic-sair::before{left:2px;top:3px;width:9px;bottom:3px;border:2px solid currentColor;background:none;border-radius:3px}
.ic-sair::after{right:2px;top:9px;width:8px;height:2px}

.conteudo{
  margin-left:var(--trilha);padding:clamp(1.4rem,3vw,2.6rem) clamp(1.2rem,3vw,2.6rem) 4rem;
  max-width:1180px;
}

/* ── cabeçalho de tela ──────────────────────────────────────── */
.cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.cabeca h1{font-family:var(--script);font-size:clamp(2.2rem,5vw,3rem);line-height:1}
.cabeca .sub{font-size:.9rem;color:#7a5843;margin-top:.15rem}
.cabeca-acoes{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── cápsulas de dinheiro ───────────────────────────────────── */
.capsulas{display:grid;gap:.9rem;margin-bottom:1.8rem}
@media(min-width:700px){.capsulas{grid-template-columns:repeat(3,1fr)}}
.cap{
  background:linear-gradient(180deg,#F8EDE3,var(--paper-2));
  border-radius:var(--r-lg);padding:1.1rem 1.3rem;
  box-shadow:inset 0 0 0 1px var(--tan-line),var(--shadow-soft);
  position:relative;
}
.cap-rot{display:flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:#8a6852;line-height:1.3}
.cap-val{font-size:clamp(1.6rem,4vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:.2rem}
.cap-exp{font-size:.83rem;color:#7a5843;line-height:1.45;margin-top:.25rem}
.cap.destaque{background:var(--cocoa);box-shadow:var(--shadow-lift)}
.cap.destaque .cap-rot{color:var(--tan)}
.cap.destaque .cap-val{color:var(--cream)}
.cap.destaque .cap-exp{color:rgba(253,247,238,.72)}
.cap.negativo .cap-val{color:var(--brick)}

/* ── blocos ─────────────────────────────────────────────────── */
.bloco{margin-bottom:2.2rem}
.bloco-topo{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap}
.bloco-topo h2{font-family:var(--script);font-size:1.85rem}
.bloco-topo .hint{font-size:.84rem;color:#8a6852}
.ajuda{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:.75rem;font-weight:600;
  color:#8a6852;box-shadow:inset 0 0 0 1px var(--tan-line);
  transition:background .2s,color .2s;
}
.ajuda:hover{background:var(--cocoa);color:var(--cream);box-shadow:none}

.cartao{
  background:var(--cream);border-radius:var(--r-lg);padding:1.2rem 1.35rem;
  box-shadow:inset 0 0 0 1px var(--tan-line),var(--shadow-soft);
}

/* ── estado vazio que ensina ────────────────────────────────── */
.vazio{
  text-align:center;padding:2.4rem 1.5rem;border-radius:var(--r-lg);
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--tan-line);
}
.vazio .em{font-family:var(--script);font-size:1.6rem;margin-bottom:.3rem}
.vazio p{font-size:.9rem;color:#7a5843;max-width:46ch;margin:0 auto;line-height:1.55}
.vazio .btn{margin-top:1.1rem}

/* ── brigadeiros desenhados ─────────────────────────────────── */
.brg{
  display:inline-block;width:26px;height:26px;border-radius:50%;flex:none;
  background-repeat:no-repeat;background-size:100% 100%;
  box-shadow:0 2px 4px -2px rgba(47,26,17,.6);
}
.fileira{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.fileira .brg{width:22px;height:22px}
.fileira-mais{font-size:.78rem;color:#8a6852;margin-left:.2rem}
.mini-bolo{width:34px;height:34px;flex:none}

/* ── cards de produção ──────────────────────────────────────── */
.producao{display:grid;gap:.7rem}
.prod{
  display:flex;align-items:center;gap:1rem;padding:.95rem 1.1rem;
  background:var(--cream);border-radius:var(--r-md);text-align:left;width:100%;
  box-shadow:inset 0 0 0 1px var(--tan-line);
  transition:transform .2s var(--ease-spring),box-shadow .2s;
}
.prod:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--tan-line),var(--shadow-soft)}
.prod-quando{
  flex:none;width:64px;text-align:center;line-height:1.15;
  padding-right:.9rem;border-right:1px solid var(--tan-line);
}
.prod-quando b{display:block;font-size:.95rem;font-weight:600}
.prod-quando span{font-size:.72rem;color:#8a6852;text-transform:uppercase;letter-spacing:.08em}
.prod-quem{flex:1;min-width:0}
.prod-quem b{display:block;font-weight:500;font-size:.98rem}
.prod-itens{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem;font-size:.85rem;color:#7a5843}
.prod-tag{
  flex:none;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  padding:.22rem .6rem;border-radius:var(--r-pill);background:var(--paper-2);color:#8a6852;
}

/* ── semana ─────────────────────────────────────────────────── */
.semana{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.dia{
  border-radius:var(--r-md);padding:.7rem .35rem;text-align:center;min-height:92px;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--tan-line);
  transition:background .2s,transform .2s var(--ease-spring);
}
.dia:hover{transform:translateY(-2px);background:var(--paper-3)}
.dia.hoje{background:var(--cocoa);color:var(--cream)}
.dia.hoje .dia-nome,.dia.hoje .dia-val{color:var(--tan)}
.dia-nome{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#8a6852}
.dia-num{font-size:1.15rem;font-weight:600;line-height:1.3}
.dia-pontos{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;min-height:12px;margin-top:.2rem}
.dia-ponto{width:7px;height:7px;border-radius:50%;background:var(--cocoa);opacity:.75}
.dia.hoje .dia-ponto{background:var(--tan);opacity:1}
.dia-val{font-size:.68rem;color:#8a6852;margin-top:.2rem}

/* ── aviso ──────────────────────────────────────────────────── */
.aviso{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.9rem 1.15rem;border-radius:var(--r-md);margin-bottom:1.6rem;
  background:#FBEFE4;box-shadow:inset 0 0 0 1px var(--tan);
}
.aviso-txt{flex:1;min-width:200px;font-size:.92rem}
.aviso-txt b{font-weight:500}

/* ── quadro de pedidos ──────────────────────────────────────── */
.quadro{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x proximity}
.coluna{
  flex:0 0 min(248px, 76vw);scroll-snap-align:start;
  background:var(--paper-2);border-radius:var(--r-lg);padding:.8rem;
  box-shadow:inset 0 0 0 1px var(--tan-line);
  transition:background .2s,box-shadow .2s;
}
.coluna.alvo{background:var(--paper-3);box-shadow:inset 0 0 0 2px var(--cocoa)}
.coluna-topo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.15rem .45rem .7rem}
.coluna-topo b{display:flex;align-items:center;gap:.4rem;font-weight:500;font-size:.9rem;min-width:0}
.coluna-topo span{font-size:.78rem;color:#8a6852}
.coluna-lista{display:flex;flex-direction:column;gap:.55rem;min-height:60px}
.pcard{
  background:var(--cream);border-radius:var(--r-md);padding:.8rem .9rem;text-align:left;width:100%;
  box-shadow:inset 0 0 0 1px var(--tan-line);cursor:grab;
  transition:transform .18s var(--ease-spring),box-shadow .18s,opacity .18s;
}
.pcard:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--tan-line),var(--shadow-soft)}
.pcard.arrastando{opacity:.4;cursor:grabbing}
.pcard-nome{font-weight:500;font-size:.94rem;line-height:1.3}
.pcard-linha{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.35rem;font-size:.8rem;color:#7a5843}
.pcard-rodape{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem}
.pcard-valor{font-weight:600;font-size:.92rem}
.pilula{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:.18rem .55rem;border-radius:var(--r-pill);background:var(--paper-2);color:#8a6852;
}
.pilula.pago{background:rgba(63,125,80,.15);color:var(--verde)}
.pilula.deve{background:rgba(168,68,47,.12);color:var(--brick)}
.pilula.site{background:var(--tan);color:var(--cocoa-deep)}
.coluna-vazia{
  font-size:.8rem;color:#a8846a;text-align:center;padding:1.1rem .5rem;line-height:1.4;
}

/* ── gráfico ────────────────────────────────────────────────── */
.grafico{width:100%;height:auto;display:block;overflow:visible}
.g-barra-ent{fill:var(--cocoa)}
.g-barra-sai{fill:var(--tan)}
.g-rot{font-size:10px;fill:#8a6852;font-family:var(--sans)}
.legenda{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.7rem;font-size:.83rem;color:#7a5843}
.legenda i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}

/* ── listas ─────────────────────────────────────────────────── */
.lista{display:flex;flex-direction:column}
.item{
  display:flex;align-items:center;gap:.85rem;padding:.75rem .2rem;
  border-bottom:1px solid rgba(217,188,162,.55);text-align:left;width:100%;
}
.item:last-child{border-bottom:0}
.item-ico{
  width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);font-size:.9rem;box-shadow:inset 0 0 0 1px var(--tan-line);
}
.item-ico.ent{background:rgba(63,125,80,.14);color:var(--verde)}
.item-ico.sai{background:rgba(168,68,47,.12);color:var(--brick)}
.item-txt{flex:1;min-width:0}
.item-txt b{display:block;font-weight:500;font-size:.93rem;line-height:1.3}
.item-txt span{font-size:.8rem;color:#8a6852}
.item-val{font-weight:600;font-size:.95rem;white-space:nowrap}
.item-val.ent{color:var(--verde)}
.item-val.sai{color:var(--brick)}
.item-x{
  width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#b09076;font-size:1rem;transition:background .2s,color .2s;
}
.item-x:hover{background:rgba(168,68,47,.09);color:var(--brick)}

/* ── simulador de custo ─────────────────────────────────────── */
.sim{display:grid;gap:1.2rem}
@media(min-width:820px){.sim{grid-template-columns:1fr 1fr}}
.barra-margem{height:32px;border-radius:var(--r-pill);overflow:hidden;display:flex;
  box-shadow:inset 0 0 0 1px var(--tan-line);background:var(--paper-2);margin:.8rem 0 .5rem}
.barra-custo{background:var(--tan);transition:width .45s var(--ease-spring)}
.barra-lucro{background:var(--cocoa);transition:width .45s var(--ease-spring)}
.sim-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;text-align:center;margin-top:.9rem}
.sim-num b{display:block;font-size:1.15rem;font-weight:600}
.sim-num span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8a6852}
.ingrediente{display:grid;grid-template-columns:1fr 84px 104px 36px;gap:.45rem;align-items:center;margin-bottom:.45rem}
.ingrediente input{padding:.5rem .65rem;font-size:.88rem;border-radius:var(--r-sm);border:0;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--tan-line);width:100%}
.ingrediente input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cocoa)}

/* tabela de preços */
.tabela{width:100%;border-collapse:collapse;font-size:.92rem}
.tabela th{
  text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:#8a6852;padding:.5rem .6rem;border-bottom:1px solid var(--tan-line);
}
.tabela td{padding:.6rem;border-bottom:1px solid rgba(217,188,162,.5)}
.tabela tr:last-child td{border-bottom:0}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela input{
  width:110px;padding:.4rem .6rem;text-align:right;border-radius:var(--r-sm);border:0;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--tan-line);
}
.tabela input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cocoa)}
.lucro-ok{color:var(--verde);font-weight:600}
.lucro-ruim{color:var(--brick);font-weight:600}

/* ── painel deslizante ──────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:40;background:rgba(47,26,17,.4);
  backdrop-filter:blur(3px);animation:fade .22s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.painel{
  position:fixed;right:0;top:0;bottom:0;width:min(520px,100%);z-index:50;
  background:var(--paper);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -30px rgba(47,26,17,.7);
  animation:entraPainel .34s var(--ease-spring);
}
@keyframes entraPainel{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
.painel-topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 1.4rem .9rem;border-bottom:1px solid var(--tan-line);flex:none;
}
.painel-topo h2{font-size:1.9rem}
.fechar{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:1.1rem;transition:background .2s;
}
.fechar:hover{background:var(--paper-2)}
.painel-corpo{flex:1;overflow-y:auto;padding:1.3rem 1.4rem 2rem}
.painel-acoes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.painel-acoes .btn{flex:1;min-width:130px}

.linha2{display:grid;gap:.9rem}
@media(min-width:520px){.linha2{grid-template-columns:1fr 1fr}}

/* seletor em pílulas */
.seletor{display:flex;gap:5px;padding:5px;background:var(--paper-2);border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--tan-line);width:max-content;max-width:100%;flex-wrap:wrap}
.seletor button{padding:.45rem 1rem;border-radius:var(--r-pill);font-size:.88rem;
  transition:background .2s,color .2s}
.seletor button[aria-pressed="true"]{background:var(--cocoa);color:var(--cream);font-weight:500}

/* itens do pedido no painel */
.item-editor{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;margin-bottom:.5rem;
  background:var(--paper-2);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--tan-line);
}
.item-editor .ie-txt{flex:1;min-width:0}
.item-editor .ie-txt b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-weight:500;font-size:.9rem;line-height:1.35;
}
.item-editor .ie-txt span{display:block;font-size:.78rem;color:#8a6852}
.item-editor .ie-val{font-weight:600;font-size:.9rem;white-space:nowrap}
.item-editor .fileira,.item-editor .mini-bolo{flex:none}
.mini-bolo{width:38px;height:38px;flex:none}

/* ── toast ──────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;translate:-50% 0;top:1.1rem;z-index:70;
  background:var(--cocoa);color:var(--cream);padding:.75rem 1.25rem;
  border-radius:var(--r-pill);font-size:.9rem;box-shadow:var(--shadow-lift);
  max-width:min(90vw,460px);text-align:center;animation:toastIn .3s var(--ease-spring);
}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.toast.ruim{background:var(--brick)}

/* ── celular ────────────────────────────────────────────────── */
@media(max-width:860px){
  :root{--trilha:0px}
  .trilha{
    left:0;right:0;top:auto;bottom:0;width:auto;flex-direction:row;
    padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
    border-right:0;border-top:1px solid var(--tan-line);
    background:rgba(251,244,238,.96);backdrop-filter:blur(12px);
    box-shadow:0 -14px 34px -26px rgba(47,26,17,.7);
  }
  .trilha-marca,.tr-sair{display:none}
  .tr{
    flex:1;flex-direction:column;gap:2px;padding:.45rem .2rem;
    font-size:.68rem;min-height:52px;justify-content:center;
  }
  .tr span{font-size:.68rem}
  .tr[aria-current="true"]{background:transparent;color:var(--cocoa);font-weight:600}
  .tr[aria-current="true"] .ic{transform:scale(1.12)}
  .tr[aria-current="true"]::after{
    content:"";position:absolute;top:2px;left:50%;translate:-50% 0;
    width:22px;height:3px;border-radius:2px;background:var(--cocoa);
  }
  .badge{position:absolute;top:1px;right:calc(50% - 22px);margin:0}
  .conteudo{margin-left:0;padding:1.2rem 1rem 6rem}
  .painel{width:100%;border-radius:20px 20px 0 0;top:8vh}
  @keyframes entraPainel{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
  .cabeca h1{font-size:2rem}
  .semana{gap:.25rem}
  .dia{min-height:78px;padding:.5rem .15rem}
  .dia-num{font-size:1rem}
  .ingrediente{grid-template-columns:1fr 70px 88px 32px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}