/* =========================================================
   Manual de montagem interativo — tela do visualizador 3D
   Mobile primeiro: o modelo ocupa a tela inteira e a interface
   fica por cima, longe do centro, pra não atrapalhar o gesto
   de girar/aproximar com o dedo.
   ========================================================= */

.manual-app { overflow: hidden; background: var(--paper); }
.manual-app #app { position: fixed; inset: 0; }
.manual-app #cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

.icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------- telas por cima do modelo ---------- */
.tela { position: absolute; inset: 0; display: flex; padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); pointer-events: none; }
.tela > * { pointer-events: auto; }
.tela-centro { align-items: center; justify-content: center; background: rgba(255,250,240,.82); backdrop-filter: blur(6px); }
.tela-carregando, #tela-carregando { background: var(--paper); backdrop-filter: none; }
.tela-capa { align-items: center; justify-content: flex-end; flex-direction: column; gap: 12px; }
.tela-fim { align-items: flex-end; justify-content: center; }

.cartao-tela {
  width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--card); border-radius: 24px; padding: 24px 22px;
  box-shadow: var(--shadow-md), 0 6px 0 rgba(0,0,0,.08);
  text-align: center;
}
.cartao-tela h1 { font-size: 1.9rem; margin: 6px 0 4px; }
.cartao-tela h2 { font-size: 1.7rem; margin: 10px 0 6px; }
.cartao-tela p { margin: 0 0 14px; color: var(--ink-soft); }
.manual-logo { height: 44px; width: auto; margin: 0 auto 14px; }
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-red-dark); background: #ffe3da; border-radius: 999px; padding: 4px 12px; }
.erro { color: #b3261e; font-weight: 600; }

/* barra de carregamento */
.barra { height: 10px; border-radius: 999px; background: var(--paper-alt); overflow: hidden; margin: 14px 0 6px; }
.barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brick-red), var(--brick-yellow), var(--brick-green), var(--brick-blue)); transition: width .25s ease; }

/* capa */
.capa-voltar { align-self: flex-start; margin: 0 auto; width: 100%; max-width: 420px; font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--ink); background: rgba(255,255,255,.85); border-radius: 999px; padding: 8px 14px; box-shadow: var(--shadow-sm); position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; width: auto; }
.capa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; padding: 0; margin: 14px 0 18px; }
.capa-stats li { background: var(--paper-alt); border-radius: 14px; padding: 10px 4px; display: grid; }
.capa-stats b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.capa-stats span { font-size: .75rem; color: var(--ink-soft); }
.capa-dica { font-size: .8rem; margin: 12px 0 0 !important; }

/* saco / fim */
.saco-icone { width: 76px; height: 76px; margin: 0 auto 6px; border-radius: 22px; display: grid; place-items: center; background: #fff1cf; color: var(--brick-yellow-dark); }
.saco-icone .icone { width: 40px; height: 40px; }
.saco-icone.ok { background: #d9f3e6; color: var(--brick-green-dark); }

/* ---------- HUD durante a montagem ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
.hud > * { pointer-events: auto; }
.hud-topo { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-radius: 16px; padding: 8px 10px; box-shadow: var(--shadow-sm); }
.progresso { flex: 1; height: 10px; border-radius: 999px; background: var(--paper-alt); overflow: hidden; }
.progresso span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brick-red); transition: width .3s ease; }
.passo-rotulo { font-family: var(--font-display); font-weight: 700; font-size: .95rem; white-space: nowrap; }

.icone-btn { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-sm); cursor: pointer; flex: none; }
.icone-btn.pequeno { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; background: transparent; }
.icone-btn:active { transform: translateY(1px); }

.aviso-passo { align-self: center; max-width: 420px; display: flex; gap: 10px; align-items: flex-start; background: #fff8e1; border: 2px solid var(--brick-yellow); border-radius: 16px; padding: 12px 10px 12px 14px; box-shadow: var(--shadow-md); margin-top: 10px; }
.aviso-passo .icone { color: var(--brick-yellow-dark); width: 26px; height: 26px; margin-top: 2px; }
.aviso-passo.alerta { background: #ffeae5; border-color: var(--brick-red); }
.aviso-passo.alerta .icone { color: var(--brick-red-dark); }
.aviso-passo strong { font-family: var(--font-display); font-size: 1.05rem; }
.aviso-passo p { margin: 2px 0 0; font-size: .9rem; line-height: 1.4; color: var(--ink); }

.hud-base { display: grid; gap: 10px; margin-top: auto; }
.hud-botoes { display: flex; align-items: center; gap: 10px; }
.hud-botoes .btn { flex: 1; justify-content: center; gap: 6px; padding-left: 18px; padding-right: 14px; }
.btn-nav { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-radius: 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 700 1rem var(--font-body); cursor: pointer; }
.btn-nav:disabled { opacity: .35; cursor: default; }

/* bandeja de peças do passo: miniatura 3D na cor real, quantidade em destaque, agrupada por cor */
.pecas-passo { background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: 18px; box-shadow: var(--shadow-md); padding: 0 12px; }
.pecas-passo summary { cursor: pointer; font-weight: 700; font-size: .88rem; padding: 10px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pecas-passo summary::-webkit-details-marker { display: none; }
.pecas-passo summary::after { content: "–"; font-size: 1.3rem; line-height: 1; color: var(--ink-soft); }
.pecas-passo:not([open]) summary::after { content: "+"; }
.pecas-passo ul { list-style: none; margin: 0 -12px; padding: 12px 14px 12px 12px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pecas-passo li { flex: none; width: 92px; scroll-snap-align: start; display: grid; justify-items: center; gap: 3px; text-align: center; }
.pecas-passo li { cursor: pointer; transition: opacity .15s; -webkit-tap-highlight-color: transparent; }
.pecas-passo li.apagada { opacity: .45; }
.pecas-passo li.peca-todas .peca-foto { --cor: #f5b400; }
.pecas-passo li.peca-todas .icone { width: 34px; height: 34px; color: var(--ink); }
.pecas-passo li.peca-todas.ativa .icone { fill: var(--brick-yellow, #f5b400); }
.render .pecas-passo li.peca-todas { display: none; }
.pecas-passo li.ativa .peca-foto { border-color: var(--ink); box-shadow: 0 0 0 3px var(--brick-yellow); }
.pecas-passo li:focus-visible { outline: 3px solid var(--brick-yellow-dark, #c98a00); outline-offset: 2px; border-radius: 14px; }
.pecas-passo .peca-foto { position: relative; width: 84px; height: 72px; border-radius: 14px; background: color-mix(in srgb, var(--cor) 22%, #fff); border: 2px solid color-mix(in srgb, var(--cor) 55%, #fff); display: grid; place-items: center; }
.pecas-passo .peca-foto img { width: 64px; height: 64px; object-fit: contain; }
.pecas-passo .qtd { position: absolute; right: -6px; top: -8px; min-width: 30px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .8rem; line-height: 1.3; text-align: center; }
.pecas-passo .peca-nome { font-size: .74rem; font-weight: 700; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.pecas-passo .peca-cor { font-size: .7rem; color: var(--ink-soft); line-height: 1.1; }

@media (min-width: 760px) {
  .tela-capa { align-items: center; justify-content: flex-start; flex-direction: row; padding-left: 6vw; }
  .tela-capa .capa-cartao { margin: 0; }
  .hud { padding-left: 24px; padding-right: 24px; }
  .hud-topo, .hud-base { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; }
}

/* ---------- vitrine (manual.html) ---------- */
.manual-vitrine .cartao-modelo { display: grid; gap: 12px; text-decoration: none; }
.manual-vitrine .cartao-modelo img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fffaf0; border-radius: var(--radius-sm); }
.manual-vitrine .meta-modelo { display: flex; gap: 14px; font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.manual-vitrine .cartao-modelo.em-breve { opacity: .8; }
.manual-vitrine .selo-breve { position: absolute; top: 14px; left: 14px; background: var(--brick-yellow); color: var(--ink); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .barra span, .progresso span { transition: none; }
}

/* tela final no desktop: cartão à esquerda, igual à capa */
@media (min-width: 760px) {
  .tela-fim { align-items: center; justify-content: flex-start; padding-left: 6vw; }
  .tela-fim .cartao-tela { margin: 0; }
}

/* telas modais (saco, carregando) bloqueiam o que está atrás; capa e final deixam girar o modelo */
.tela-saco, #tela-carregando { pointer-events: auto; }

/* ---------- conferência das peças do saco ---------- */
.saco-resumo { font-size: .9rem; color: var(--ink-soft); margin: 0 0 4px; }
.pecas-saco { list-style: none; margin: 4px 0 14px; padding: 12px 6px 6px; display: flex; flex-wrap: wrap; gap: 14px 10px; justify-content: center; max-height: 38vh; overflow-y: auto; }
.pecas-saco li { width: 92px; display: grid; justify-items: center; gap: 3px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pecas-saco .peca-foto { position: relative; width: 84px; height: 72px; border-radius: 14px; background: color-mix(in srgb, var(--cor) 22%, #fff); border: 2px solid color-mix(in srgb, var(--cor) 55%, #fff); display: grid; place-items: center; }
.pecas-saco .peca-foto img { width: 64px; height: 64px; object-fit: contain; }
.pecas-saco .qtd { position: absolute; right: -6px; top: -8px; min-width: 30px; padding: 2px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .8rem; line-height: 1.3; text-align: center; }
.pecas-saco .peca-nome { font-size: .74rem; font-weight: 700; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.pecas-saco .peca-cor { font-size: .7rem; color: var(--ink-soft); line-height: 1.1; }
.pecas-saco li.conferida .peca-foto { border-color: #1a9b6c; background: #e4f6ee; }
.pecas-saco li.conferida .peca-foto img { opacity: .45; }
.pecas-saco li.conferida .peca-foto::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #1a9b6c; }
.pecas-saco li:focus-visible { outline: 3px solid var(--brick-yellow); outline-offset: 2px; border-radius: 14px; }
.capa-links { margin: 10px 0 0; text-align: center; font-size: .88rem; }
.capa-links a { color: var(--ink-soft); font-weight: 600; }
.btn-oficina { font: 800 1rem var(--font-display); width: 40px; height: 40px; border-radius: 12px; margin-left: 8px; }
.btn-oficina[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------- modo oficina: letras e botões grandes (projetar na sala) ---------- */
@media (min-width: 700px) {
  .oficina .passo-rotulo { font-size: 1.5rem; }
  .oficina .progresso { height: 14px; }
  .oficina .pecas-passo summary { font-size: 1.15rem; padding: 14px 0; }
  .oficina .pecas-passo ul { gap: 16px; }
  .oficina .pecas-passo li { width: 150px; gap: 5px; }
  .oficina .pecas-passo .peca-foto { width: 138px; height: 116px; }
  .oficina .pecas-passo .peca-foto img { width: 104px; height: 104px; }
  .oficina .pecas-passo .qtd { font-size: 1.15rem; min-width: 42px; }
  .oficina .pecas-passo .peca-nome { font-size: 1.05rem; }
  .oficina .pecas-passo .peca-cor { font-size: .95rem; }
  .oficina .btn-nav, .oficina .hud-botoes .btn { min-height: 68px; font-size: 1.3rem; }
  .oficina .icone-btn { width: 58px; height: 58px; }
  .oficina .aviso-passo { max-width: 620px; }
  .oficina .aviso-passo strong { font-size: 1.4rem; }
  .oficina .aviso-passo p { font-size: 1.2rem; }
  .oficina .hud-topo, .oficina .hud-base { max-width: 860px; }
}
/* celular: só um pouco maior (o modo oficina completo é pra tela larga) */
@media (max-width: 699px) {
  .oficina .passo-rotulo { font-size: 1.15rem; }
  .oficina .pecas-passo .peca-nome { font-size: .85rem; }
  .oficina .pecas-passo .peca-cor { font-size: .78rem; }
  .oficina .aviso-passo p { font-size: 1.05rem; }
}

/* ---------- modo render (imagens do modo leitura, geradas pelo Chrome sem tela) ---------- */
.render .hud-botoes, .render .progresso, .render #btn-sair, .render #btn-oficina, .render #aviso-fechar, .render .capa-voltar { display: none !important; }
.render .hud-topo { justify-content: flex-end; background: none !important; box-shadow: none !important; padding: 0 !important; }
.render .passo-rotulo { font-size: 2.2rem; background: rgba(255,255,255,.9); padding: 6px 16px; border-radius: 999px; }
.render .hud-base { max-width: none !important; }
.render .pecas-passo ul { flex-wrap: wrap; overflow: visible; }
.render .pecas-passo li { width: 148px; gap: 5px; }
.render .pecas-passo ul { gap: 14px; }
.render .pecas-passo .peca-foto { width: 138px; height: 112px; }
.render .pecas-passo .peca-foto img { width: 100px; height: 100px; }
.render .pecas-passo .qtd { font-size: 1.3rem; min-width: 48px; top: -10px; right: -8px; }
.render .pecas-passo .peca-nome { font-size: 1.2rem; max-height: 2.5em; }
.render .pecas-passo .peca-cor { font-size: 1.05rem; }
.render .pecas-passo summary { font-size: 1.35rem; padding: 14px 0 8px; }
.render .pecas-passo summary::after { display: none; }
.render .pecas-passo { padding: 0 16px; }
.render .aviso-passo { display: none; }
.render-capa .hud, .render-capa .tela { display: none !important; }

/* =========================================================
   Modo leitura (manual-leitura.html): imagens por passo,
   marcação do que já foi montado e versão para imprimir
   ========================================================= */
.leitura-app { background: var(--paper); color: var(--ink); }
.leitura-topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; background: rgba(255,250,240,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.07); }
.leitura-voltar { font-weight: 700; font-size: .9rem; text-decoration: none; color: var(--ink); white-space: nowrap; }
.leitura-progresso { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; min-width: 0; }
.leitura-progresso .barra { flex: 1; max-width: 260px; margin: 0; }
.leitura-progresso span:last-child { font-size: .8rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.leitura-main { max-width: 920px; margin: 0 auto; padding: 18px 16px 60px; }

.leitura-capa { display: grid; gap: 18px; align-items: center; margin-bottom: 22px; }
.leitura-capa img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.leitura-capa h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 8px 0 4px; }
.leitura-capa p { margin: 0 0 6px; color: var(--ink-soft); }
.leitura-capa .capa-stats { max-width: 420px; }
.leitura-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 760px) { .leitura-capa { grid-template-columns: 1fr 1fr; } }

.leitura-indice { background: var(--card); border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 28px; }
.leitura-indice h2 { font-size: 1.15rem; margin: 0 0 10px; }
.leitura-indice ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.leitura-indice a { position: relative; display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--paper-alt); color: var(--ink); font: 800 1rem var(--font-display); text-decoration: none; }
.leitura-indice a:hover { background: #ffe9a8; }
.leitura-indice a.feito { background: #d9f3e6; color: var(--brick-green-dark); }
.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.leitura-indice a .ponto { position: absolute; top: 4px; right: 5px; }
.leitura-indice a .ponto + .ponto { right: 16px; }
.ponto.saco { background: #f5b301; } .ponto.aviso { background: #e0442b; } .ponto.dica { background: #1c6fd8; }
.indice-legenda { margin: 12px 0 0; font-size: .8rem; color: var(--ink-soft); }

.leitura-passo { background: var(--card); border-radius: 22px; padding: 14px 14px 16px; margin-bottom: 22px; box-shadow: var(--shadow-sm); scroll-margin-top: 70px; }
.leitura-passo.feito { opacity: .72; }
.leitura-passo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.leitura-passo h2 { font-size: 1.5rem; margin: 0; }
.leitura-passo h2 small { font: 600 .9rem var(--font-body); color: var(--ink-soft); }
.leitura-feito { border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font: 700 .9rem var(--font-body); cursor: pointer; min-height: 40px; }
.leitura-feito[aria-pressed="true"] { background: #1a9b6c; border-color: #1a9b6c; color: #fff; }
.leitura-passo figure { margin: 0; }
.leitura-passo figure img { width: 100%; height: auto; display: block; border-radius: 16px; background: var(--paper); aspect-ratio: 800 / 1100; object-fit: contain; }
.leitura-nota { display: grid; gap: 2px; border-radius: 14px; padding: 12px 14px; margin: 10px 0; border: 2px solid; }
.leitura-nota strong { font-family: var(--font-display); font-size: 1.05rem; }
.leitura-nota p { margin: 0; font-size: .95rem; line-height: 1.45; }
.leitura-nota.saco { background: #fff8e1; border-color: #f5b301; }
.leitura-nota.aviso { background: #ffeae5; border-color: #e0442b; }
.leitura-nota.dica { background: #e8f1ff; border-color: #1c6fd8; }
.leitura-ver3d { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .9rem; color: var(--brick-red-dark); }
.leitura-fim { text-align: center; background: #d9f3e6; border-radius: 22px; padding: 28px 18px; }
.leitura-vazio { background: #fff8e1; border: 2px solid #f5b301; border-radius: 14px; padding: 14px 16px; }
.leitura-rodape { text-align: center; font-size: .78rem; color: var(--ink-soft); margin-top: 28px; }

/* impressão / PDF: 2 passos por folha A4, sem botões */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .leitura-app { background: #fff; }
  .leitura-topo, .leitura-indice, .leitura-acoes, .leitura-feito, .leitura-ver3d, .indice-legenda, .leitura-vazio { display: none !important; }
  .leitura-main { padding: 0; max-width: none; }
  .leitura-capa { grid-template-columns: 1fr 1fr; break-after: page; margin: 0; }
  .leitura-passo { box-shadow: none; border: 1px solid #ddd; border-radius: 10px; padding: 8px; margin: 0 0 6mm; break-inside: avoid; opacity: 1 !important; }
  .leitura-passo figure img { max-height: 108mm; width: auto; margin: 0 auto; aspect-ratio: auto; }
  .leitura-passo h2 { font-size: 1.15rem; }
  .leitura-nota { margin: 6px 0; padding: 6px 10px; break-inside: avoid; }
  .leitura-fim { break-inside: avoid; }
  .leitura-passo figure img, .leitura-nota, .leitura-capa img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.manual-vitrine .botoes-modelo { display: flex; flex-wrap: wrap; gap: 8px; }
.manual-vitrine .cartao-modelo > a { display: block; }
.busca-modelos { width: 100%; max-width: 420px; display: block; margin: 0 auto 18px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--ink); font: 600 1rem var(--font-body); background: #fff; }