/* =====================================================================
   extras.css — ARQUIVO NOVO. Acréscimos ao app; nada do index.html foi reescrito.
   Para desfazer: apague este arquivo e a linha <link> marcada "NOVO" no index.html.
   Seções: 1 Rodapé · 2 Páginas novas · 3 Voltar à lista · 4 Tempo/rendimento
           5 Menu fixo no computador · 6 Impressão da página da receita
   ===================================================================== */

/* ---------- 1. Rodapé com Créditos e Privacidade ---------- */
.extras-rodape{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 14px;
  margin-top:44px;padding:18px 0 4px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.extras-rodape a{color:var(--lilas);font-weight:500;padding:10px 4px}
.extras-rodape a:hover{color:var(--ouro)}

/* ---------- 2. Páginas novas (Créditos, Privacidade, 404) ---------- */
.extras-texto .panel h2{font-size:1.2rem;margin:0 0 8px}
.extras-texto .panel p+p,.extras-texto .panel p+ul,.extras-texto .panel ul+p{margin-top:10px}
.extras-texto .panel ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.extras-texto .panel a,.extras-texto .lead a{color:var(--lilas);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.extras-texto .panel a:hover{color:var(--ouro)}
.extras-texto .tip{margin-top:0;margin-bottom:6px}
.extras-texto .atualizado{color:var(--muted);font-size:.85rem;margin-top:18px}
.extras-texto .btn{margin-top:18px}
mark.preencher{background:rgba(245,184,28,.18);color:var(--ouro);border:1px dashed rgba(245,184,28,.6);
  border-radius:6px;padding:0 6px;font-weight:700;font-size:.92em}
.extras-404{text-align:center;padding:48px 18px}
.extras-404 .num404{display:block;font-family:var(--title);font-weight:800;font-size:clamp(4rem,22vw,7rem);line-height:1;
  background:linear-gradient(135deg,#F5B81C,#C24BFF 60%,#6A1FA0);-webkit-background-clip:text;background-clip:text;color:transparent}
.extras-404 .botoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.extras-404 .botoes .btn{margin-top:0}

/* ---------- 3. Voltar à lista (receita) ---------- */
.extras-voltar{margin-top:18px}
.extras-pill{position:fixed;top:calc(10px + env(safe-area-inset-top));left:12px;z-index:25;min-height:44px;padding:0 16px;
  display:inline-flex;align-items:center;border-radius:999px;font-weight:700;color:#fff;
  background:rgba(11,6,16,.78);backdrop-filter:blur(10px);border:1px solid rgba(190,90,255,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.extras-pill.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
@media (min-width:900px){ .extras-pill{display:none} }

/* ---------- 4. Tempo e rendimento (só aparecem se preenchidos no extras.js) ---------- */
.extras-info{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.extras-info span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.extras-info b{color:var(--ink)}

/* ---------- 5. Menu do topo fixo no computador (no celular a barra de baixo já é fixa) ---------- */
@media (min-width:900px){
  .top{position:sticky;top:0;z-index:15;background:var(--bg)}
  .detail .d-art{top:92px}   /* a foto grudada da receita não passa por baixo do menu */
}

/* ---------- 6. Impressão da própria página da receita ----------
   A ficha (#/ficha/...) continua com as regras que já existiam. Aqui só limpamos
   a página da receita para quem imprime direto pelo navegador. */
@media print{
  .extras-rodape,.extras-pill,.extras-voltar{display:none!important}
  .detail{display:block!important}
  .detail,.detail *{color:#1C1420!important;background:transparent!important;box-shadow:none!important;
    text-shadow:none!important;backdrop-filter:none!important;animation:none!important}
  .detail .back,.detail .fav,.detail .seg,.detail .btn,.detail .label,.detail .hint,.detail .rm,
  .detail .panel:has(.arte-thumb),.detail .box,.detail .extras-info{display:none!important}
  .detail .d-art{position:static!important;width:80mm!important;height:80mm!important;aspect-ratio:auto!important;
    margin:0 0 6mm!important;border-radius:0!important}
  .detail .d-art img{width:100%!important;height:100%!important;object-fit:cover!important}
  .d-body{margin:0!important;padding:0!important;border-radius:0!important}
  .back.flutua{display:none!important}
  .panel{border:0!important;padding:0!important;margin-top:6mm!important;break-inside:avoid}
  .panel h2{font-size:15pt!important}
  .ing label{min-height:0!important;padding:3px 0!important;margin:0!important;border-top:0!important}
  .qt{font-weight:700}
  .num{border:1px solid #888!important}
  .mont.com-arte{grid-template-columns:42mm 1fr!important}
}