/* Arte na Manga: camisa grande à esquerda (fica parada ao rolar), passos à direita; no celular, camisa em cima.
   Cores tiradas da manga: polpa amarela, casca laranja, folha verde e o traço preto da logo. */
:root {
  --bg: #ffffff;
  --wash: #fff4d6;
  --wash-2: #ffe7b8;
  --ink: #1b1a17;
  --muted: #6b665c;
  --line: #efe4cc;
  --accent: #e3741a;
  --accent-ink: #ffffff;
  --leaf: #2f8a57;
  --leaf-bg: #e3f3e8;
  --warn: #a8460b;
  --warn-bg: #fff0e0;
  --card: #ffffff;
  --shadow: 0 24px 60px -28px rgba(60, 40, 0, .45);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141311; --wash: #262116; --wash-2: #33291a; --ink: #f6f1e7; --muted: #b3aa98; --line: #2f2a20;
  --accent: #ffa04a; --accent-ink: #1b1206; --leaf: #7fd19f; --leaf-bg: #19281f; --warn: #ffb27a; --warn-bg: #36220f;
  --card: #1b1915; --shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #141311; --wash: #262116; --wash-2: #33291a; --ink: #f6f1e7; --muted: #b3aa98; --line: #2f2a20;
  --accent: #ffa04a; --accent-ink: #1b1206; --leaf: #7fd19f; --leaf-bg: #19281f; --warn: #ffb27a; --warn-bg: #36220f;
  --card: #1b1915; --shadow: 0 24px 60px -28px rgba(0, 0, 0, .8); color-scheme: dark; }

* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased }
img { max-width: 100% }
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--accent) }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }

.escuro { display: none }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .claro { display: none } :root:not([data-theme="light"]) .escuro { display: inline } }
:root[data-theme="dark"] .claro { display: none } :root[data-theme="dark"] .escuro { display: inline }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line) }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none }
.marca img { height: 46px; width: auto }
.marca img.nome { height: 26px }

.grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; max-width: 1260px; margin: 0 auto;
  padding-block: 18px 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
@media (max-width: 880px) { .grade { grid-template-columns: minmax(0, 1fr); gap: 18px } }

.col-palco { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); align-self: start; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
@media (max-width: 880px) { .col-palco { position: static } }
.palco-barra { display: flex; align-items: center; justify-content: center; gap: 14px }
.palco-barra strong { font-family: var(--display); font-weight: 600; font-size: 20px; min-width: 9em; text-align: center }
.girar { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--bg); font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 4px }
.girar:hover { border-color: var(--ink) }
.palco { position: relative; background: var(--wash); border-radius: var(--r); overflow: hidden; aspect-ratio: 1 / .98; max-height: 72vh; width: 100% }
@media (max-width: 880px) { .palco { aspect-ratio: auto; height: min(58vh, 520px) } }
#palco { display: block; width: 100%; height: 100%; touch-action: none; transition: transform .15s ease-in }
#palco.girando { transform: scaleX(0.02) }
#palco.pode-mover { cursor: move } #palco.pode-tamanho { cursor: nwse-resize } #palco.borracha { cursor: crosshair }
.veu { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 3px dashed var(--accent); border-radius: var(--r); font-weight: 800; font-size: 18px }
.dica-borracha { position: absolute; left: 12px; right: 12px; top: 12px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 10px; font-size: 13px; text-align: center }

.leitura { display: flex; flex-wrap: wrap; gap: 6px }
.chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--wash); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums }
.chip.ok { background: var(--leaf-bg); color: var(--leaf) }
.chip.alerta { background: var(--warn-bg); color: var(--warn) }
.chip.destaque { background: var(--accent); color: var(--accent-ink) }

.miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.mini { border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg); padding: 6px 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0 }
.mini canvas { width: 100%; aspect-ratio: 1.1; display: block }
.mini span { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.mini small { font-size: 11px; color: var(--muted) }
.mini[aria-pressed="true"] { border-color: var(--accent); background: var(--wash) }

.painel, .pilha { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.pilha { gap: 12px }
.passo { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--card) }
.passo h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; text-wrap: balance }
.passo h2 .n, .passos-envio .n { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #ffc93c; color: #1b1a17; font-family: var(--body); font-size: 14px; font-weight: 800; flex: none }
.lado-dir { margin-left: auto; font-family: var(--body); font-size: 13.5px; font-weight: 700; color: var(--muted) }
.dica { margin: 0; color: var(--muted); font-size: 14px }
.nota { margin: 0; font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 10px }
.erro { margin: 0; color: var(--warn); font-weight: 700 }
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.rotulo { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }

.cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px }
.cor { aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); cursor: pointer; padding: 0 }
.cor[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent) }
.tamanhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px }
.tam { border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.15 }
.tam b { font-size: 15px } .tam small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums }
.tam[aria-pressed="true"] { border-color: var(--accent); background: var(--wash) }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--line); background: var(--bg); border-radius: 999px;
  padding: 8px 15px; cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink); text-align: center }
.btn:hover { border-color: var(--ink) }
.btn.primario { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.btn.primario:hover { filter: brightness(1.06) }
.btn.escuro { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.btn.peq { padding: 5px 12px; font-size: 13px }
.btn.grande { padding: 11px 20px; font-size: 15px }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.btn:disabled { opacity: .5; cursor: progress }
.link { background: none; border: 0; color: var(--accent); font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: inherit }
.acoes-arte { display: flex; flex-wrap: wrap; gap: 8px }
.acoes-arte .btn { flex: 1 1 180px }
.lista-artes { display: flex; flex-wrap: wrap; gap: 6px }
.arte-chip { border: 1.5px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.arte-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--wash) }

input[type=text], input[type=tel], input[type=search], input[type=number], textarea, select {
  border: 1.5px solid var(--line); background: var(--bg); border-radius: 12px; padding: 9px 11px; width: 100%; min-width: 0 }
input[type=color] { height: 42px; width: 100%; padding: 3px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg) }
input[type=range] { width: 100%; accent-color: var(--accent) }
input[type=checkbox] { accent-color: var(--accent) }
textarea { resize: vertical }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
@media (max-width: 480px) { .duas { grid-template-columns: minmax(0, 1fr) } }
.deslizar { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; align-items: center }
.num { display: flex; align-items: center; gap: 4px } .num input { text-align: right; font-variant-numeric: tabular-nums; padding: 6px 8px } .num span { color: var(--muted); font-size: 13px }
.marcar { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer } .marcar input { margin-top: 4px }
.caixa { background: var(--wash); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px }
.ok-dica { background: var(--leaf-bg); color: var(--leaf); border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 700 }

dialog { border: 0; border-radius: 22px; padding: 0; max-width: min(760px, calc(100vw - 24px)); width: 100%; background: var(--bg); color: var(--ink); box-shadow: var(--shadow) }
dialog::backdrop { background: rgba(20, 15, 5, .55) }
.dlg { padding: 20px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 40px); overflow: auto }
.banco-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.banco-topo h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 24px }
.x { border: 0; background: var(--wash); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; flex: none }

.dlg-banco { max-width: min(1000px, calc(100vw - 16px)); height: min(860px, calc(100dvh - 16px)) }
.banco { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: 100%; gap: 12px; padding: 18px 18px 0 }
.abas { display: flex; gap: 4px; background: var(--wash); padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none }
.aba { flex: 1 0 auto; border: 0; background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 13.5px; white-space: nowrap }
.aba[aria-selected="true"] { background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .14) }
.busca { display: flex; gap: 8px } .busca input { flex: 1 }
.banco-corpo { overflow: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; min-height: 0 }
.b-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px }
.b-card { border: 2px solid var(--line); border-radius: 14px; background: var(--wash); cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); aspect-ratio: 1; justify-content: center; overflow: hidden }
.b-card img { width: 100%; height: 100%; object-fit: contain; min-height: 0 }
.b-card span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.b-card.des { color: var(--ink); padding: 18%; background: var(--bg) }
.b-card.des svg { width: 100%; height: 100% }
.b-card.foto { padding: 0; background: repeating-conic-gradient(var(--wash) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px }
.b-card.foto img { object-fit: cover }
.b-card:hover { border-color: var(--muted) }
.b-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) }
.b-barra { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); margin: 0 -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--card) }
.b-previa { width: 72px; height: 72px; border-radius: 12px; background: var(--wash); display: grid; place-items: center; overflow: hidden; flex: none }
.b-previa img { width: 100%; height: 100%; object-fit: contain }
.b-info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.b-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mini-campo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700 }
.mini-campo input[type=color] { width: 44px; height: 32px }
.mini-campo input[type=range] { width: 110px }

.medidas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: center }
@media (max-width: 600px) { .medidas { grid-template-columns: minmax(0, 1fr) } }
.tabela { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line) }
th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
tbody tr { cursor: pointer } tbody tr:hover { background: var(--wash) }
tr.on { background: var(--wash-2) } tr.on td:first-child { font-weight: 800; color: var(--accent) }
#canvasTam { width: 100%; aspect-ratio: 1; display: block; background: var(--wash); border-radius: 14px }
.img-resumo { width: 100%; border-radius: 14px; border: 1px solid var(--line); display: block }
.passos-envio { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none }
.passos-envio li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start }
.passos-envio p { margin: 2px 0 6px }
.fone { font-weight: 800; font-variant-numeric: tabular-nums; user-select: all }

.aviso { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; z-index: 50; max-width: calc(100vw - 32px); text-align: center }
@media (prefers-reduced-motion: no-preference) { .aviso { animation: sobe .25s ease } @keyframes sobe { from { transform: translate(-50%, 10px); opacity: 0 } } }
@media (prefers-reduced-motion: reduce) { #palco { transition: none } }