/* ESPRO — mobile first. Estética editorial: papel quente, tipografia serifada nos títulos. */
:root {
  --bg: #F7F5F0; --surface: #FFFFFF; --ink: #1C1C1A; --muted: #6B6B66; --line: #E6E2D9;
  --accent: #4D7C0F; --accent-ink: #FFFFFF; --accent-soft: #EAF2D9; --danger: #B42318;
  --radius: 16px; --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 18px rgb(40 30 10 / .07);
  --nav-h: 64px; --gutter: 16px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121210; --surface: #1D1D19; --ink: #F2F0EA; --muted: #9A978E; --line: #2D2C27;
    --accent: #93C83F; --accent-ink: #10150A; --accent-soft: #23301280; --danger: #F97066;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.45 var(--sans);
  min-height: 100dvh; overflow-wrap: anywhere;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: var(--accent); text-decoration: none; font-weight: 500; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--muted); font-size: .9rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ── Casca ── */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px;
  padding: calc(env(safe-area-inset-top) + 10px) var(--gutter) 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px);
}
.brand { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); align-self: flex-start; min-height: 24px; }
.brand::after { content: ' ▾'; opacity: .6; }
.top h1 { font: 700 1.9rem/1.1 var(--serif); letter-spacing: -.01em; }
main { padding: 6px var(--gutter) calc(var(--nav-h) + env(safe-area-inset-bottom) + 96px); max-width: 720px; margin: 0 auto; outline: 0; }
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: .72rem; font-weight: 500; min-height: 48px; }
.tabs a[aria-current] { color: var(--accent); }
.tabs a[aria-current] svg { stroke-width: 2.4; }

.stack { display: flex; flex-direction: column; gap: 24px; }
.stack.tight { gap: 14px; }

/* ── Componentes base ── */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.sec-head h3 { font: 600 1.15rem var(--serif); }
.link { color: var(--accent); font-weight: 500; font-size: .9rem; padding: 6px 2px; }
.link.center { display: block; margin: 4px auto 0; }
.empty { color: var(--muted); font-size: .92rem; padding: 18px 12px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.btn { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: .85rem; }
.btn:disabled { opacity: .4; }
.btn:active, .fab:active, .card-main:active, .item:active, .day:active { transform: scale(.98); }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.fab {
  position: fixed; right: max(var(--gutter), calc((100vw - 720px) / 2 + var(--gutter)));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); z-index: 25;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px rgb(0 0 0 / .25); transition: transform .15s;
}

/* ── Início ── */
.hero { display: flex; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow); }
.ring { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); position: relative; }
.ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; font: 700 1.15rem var(--serif); }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hero h2 { font: 600 1.25rem/1.25 var(--serif); margin: 2px 0 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.setor-card { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c); min-height: 64px; }
.setor-card small { color: var(--muted); }
.list, .plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { width: 100%; display: flex; align-items: stretch; gap: 12px; padding: 12px 14px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-height: 56px; transition: transform .1s; }
.item .bar { width: 4px; border-radius: 4px; flex: none; }
.item .grow, .grow { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.item small { color: var(--muted); font-size: .82rem; }
.item.done b { text-decoration: line-through; opacity: .55; }

/* ── Quadro ── */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: .9rem; }
.chip.on { background: var(--c, var(--ink)); color: #fff; border-color: transparent; }
@media (prefers-color-scheme: dark) { .chip.on:not([style]) { background: var(--ink); color: var(--bg); } }
.board { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; align-items: flex-start; }
.board::-webkit-scrollbar { display: none; }
.col { flex: none; width: min(84vw, 320px); scroll-snap-align: start; background: color-mix(in srgb, var(--line) 45%, transparent); border-radius: 18px; padding: 12px; }
.col header { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.col h3 { font: 600 1rem var(--serif); }
.count { font-size: .78rem; font-weight: 600; background: var(--surface); border-radius: 99px; padding: 1px 9px; color: var(--muted); }
.cards { display: flex; flex-direction: column; gap: 8px; }
.card { display: flex; align-items: stretch; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.card-main { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; min-height: 56px; transition: transform .1s; }
.card-main small { color: var(--muted); font-size: .82rem; }
.card-main small.late { color: var(--danger); font-weight: 600; }
.card-main small.card-meta-criador { font-size: .75rem; opacity: .85; }
.card.done .card-main b { opacity: .55; text-decoration: line-through; }
.card .mv { align-self: center; color: var(--accent); margin-right: 4px; }
.add-in { margin-top: 8px; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: .9rem; border-radius: 12px; }
.add-in:hover { background: color-mix(in srgb, var(--line) 80%, transparent); }

/* Tags do cartão e checklist */
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.prio-tag { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.prio-alta { background: color-mix(in srgb, #DC2626 15%, transparent); color: #DC2626; border: 1px solid color-mix(in srgb, #DC2626 30%, transparent); }
.prio-media { background: color-mix(in srgb, #D97706 15%, transparent); color: #B45309; border: 1px solid color-mix(in srgb, #D97706 30%, transparent); }
.prio-baixa { background: color-mix(in srgb, #16A34A 15%, transparent); color: #15803D; border: 1px solid color-mix(in srgb, #16A34A 30%, transparent); }
.esforco-tag, .link-tag { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--muted); background: var(--line); padding: 1px 6px; border-radius: 6px; }
.card-checklist-bar { width: 100%; display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.card-checklist-bar .meter { flex: 1; height: 5px; }
.card-checklist-bar small { font-size: .7rem; color: var(--muted); font-weight: 600; }

/* Checklist no formulário */
.checklist-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.checklist-list { display: flex; flex-direction: column; gap: 6px; }
.check-row { display: flex; align-items: center; gap: 8px; }
.check-input { min-height: 36px; padding: 6px 10px; font-size: .9rem; flex: 1; }
.check-input.check-done { text-decoration: line-through; opacity: .6; }
.hist-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }

/* Ações no topo do Kanban */
.kanban-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0 6px; }

/* Desempenho por setor no Início */
.setor-perf-list { display: flex; flex-direction: column; gap: 8px; }
.setor-perf-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-align: left; transition: transform .1s; box-shadow: var(--shadow); }
.setor-perf-card:hover { border-color: var(--c); }
.setor-perf-head { display: flex; align-items: center; justify-content: space-between; }
.setor-perf-nome { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.setor-perf-nome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.setor-perf-pct { font-size: .8rem; color: var(--muted); font-weight: 500; }

.col-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px; gap: 2px; background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 14px; }
.col-tabs button { min-height: 48px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .74rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.col-tabs b { font-size: 1rem; color: var(--ink); }
.col-tabs button.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.board::after { content: ''; flex: none; width: 4px; }
.card, .drag-handle { user-select: none; -webkit-user-select: none; }
.drag-handle { display: grid; place-items: center; width: 30px; flex: none; color: var(--muted); touch-action: none; cursor: grab; -webkit-touch-callout: none; }
.drag-handle svg { stroke-width: 3.4; }
.card.ghosting { opacity: .3; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 200; margin: 0; pointer-events: none; rotate: 2deg; box-shadow: 0 16px 36px rgb(0 0 0 / .35); }
.drop-line { height: 4px; border-radius: 4px; background: var(--accent); margin: 2px 0; flex: none; }
.col.drop-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cards { min-height: 48px; }
.cards:has(.drop-line) .empty { display: none; }
body.dragging { cursor: grabbing; user-select: none; }
body.dragging .board { scroll-snap-type: none; }
@media (hover: hover) and (pointer: fine) {
  .board { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .board::-webkit-scrollbar { display: block; height: 8px; }
  .board::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
}

/* ── Agenda ── */
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 10px 10px 8px; box-shadow: var(--shadow); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head h2 { font: 600 1.15rem var(--serif); }
.dow, .days { display: grid; grid-template-columns: repeat(7, 1fr); }
.dow span { text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); padding: 6px 0; }
.day { aspect-ratio: 1; max-height: 56px; margin: 2px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: transform .1s; }
.day.blank { pointer-events: none; }
.day .n { font-size: .95rem; font-weight: 500; line-height: 1; }
.day .dots { display: flex; gap: 3px; height: 6px; }
.day .dots i { width: 5px; height: 5px; border-radius: 50%; }
.day.today .n { color: var(--accent); font-weight: 700; }
.day.sel { background: var(--accent); color: var(--accent-ink); }
.day.sel .n { color: var(--accent-ink); }
.day.sel .dots i { background: var(--accent-ink) !important; }

/* ── Revista ── */
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 14px; }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg button { min-height: 40px; border-radius: 11px; text-align: center; font-weight: 600; font-size: .88rem; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.page-row { display: flex; align-items: center; gap: 4px; }
.page-row .item { flex: 1; align-items: center; }
.pn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .9rem; }
.reorder { display: flex; flex-direction: column; }
.reorder .icon-btn { width: 40px; height: 28px; border-radius: 8px; }
.reader { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; scrollbar-width: none; }
.reader::-webkit-scrollbar { display: none; }
.reader .page { flex: none; width: min(82vw, 340px); scroll-snap-align: start; box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
.reader.flipbook-3d { perspective: 1200px; padding-bottom: 24px; gap: 20px; }
.reader.flipbook-3d .page { transform-style: preserve-3d; transition: transform .3s ease, box-shadow .3s ease; box-shadow: -8px 12px 28px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .15); border-left: 2px solid rgb(0 0 0 / .12); }
.reader.flipbook-3d .page:hover { transform: rotateY(-3deg) scale(1.02); box-shadow: -14px 18px 36px rgb(0 0 0 / .35); }
.reader.flipbook-3d .spread { perspective: 1400px; filter: drop-shadow(0 14px 30px rgb(0 0 0 / .3)); }
.center-btn { align-self: center; }

.page { container-type: inline-size; aspect-ratio: 148 / 210; position: relative; overflow: hidden; background: #FFFDF8; color: #1C1C1A; border-radius: 4px; display: flex; flex-direction: column; font-family: var(--sans); }
.page .txt { position: relative; padding: 9cqw; display: flex; flex-direction: column; gap: 3cqw; z-index: 2; }
.page h2 { font: 700 8.5cqw/1.1 var(--serif); }
.page p { font-size: inherit; line-height: inherit; }
.page small { font-size: 3.2cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.page .num { position: absolute; bottom: 3.5cqw; right: 5cqw; font-size: 3cqw; opacity: .5; z-index: 3; }
.page .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .12) 70%); z-index: 1; }
.tpl-capa, .tpl-anuncio { color: #fff; background: #26331a; justify-content: flex-end; }
.tpl-capa h2 { font-size: 12cqw; }
.tpl-contracapa { background: #26331a; color: #fff; justify-content: center; }
.tpl-contracapa .txt, .tpl-anuncio .txt.center { text-align: center; align-items: center; }
.tpl-contracapa .bg { opacity: .35; }
.tpl-sumario ol { list-style: none; margin: 4cqw 0 0; padding: 0; display: flex; flex-direction: column; gap: 3.5cqw; }
.tpl-sumario li { display: flex; align-items: baseline; gap: 2cqw; font-size: 4.2cqw; }
.tpl-sumario li i { flex: 1; border-bottom: 1px dotted currentColor; opacity: .35; }

/* ── Revista: seções ── */
.rev-resumo { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.rev-resumo small { display: block; color: var(--muted); font-size: .82rem; }
.meter { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 8px; transition: width .3s; }
.sec-grupo header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sec-grupo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sec, var(--muted)); flex: none; }
.sec-grupo h3 { font: 600 1.15rem var(--serif); flex: 1; min-width: 0; }
.meta-link { font-size: .8rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.sec-grupo .btn.small { min-height: 36px; padding: 0 12px 0 8px; gap: 4px; }
.sec-grupo .item .bar { display: none; }
.sec-grupo .pn { background: color-mix(in srgb, var(--sec, var(--accent)) 16%, transparent); color: var(--sec, var(--accent)); }
.st { flex: none; align-self: center; font-size: .7rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--line); color: var(--muted); }
.st-revisao { background: color-mix(in srgb, #F59E0B 20%, transparent); color: #B45309; }
.st-pronta { background: var(--accent-soft); color: var(--accent); }
@media (prefers-color-scheme: dark) { .st-revisao { color: #FBBF24; } }
.reader-info { text-align: center; }
.hint { margin-top: -8px; }

/* páginas com seção */
.page { --sec: var(--accent); }
.page.has-sec::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2.2cqw; background: var(--sec); z-index: 3; }
.page .kicker { color: var(--sec); font-weight: 700; opacity: 1; }
.tpl-destaque { color: #fff; background: var(--sec); justify-content: flex-end; }
.tpl-destaque .kicker { color: #fff; background: var(--sec); padding: 1cqw 3cqw; border-radius: 99px; align-self: flex-start; }
.tpl-destaque h2 { font-size: 10.5cqw; }
.tpl-secao { background: var(--sec); color: #fff; justify-content: center; }
.tpl-secao h2 { font-size: 15cqw; }
.tpl-secao ol { list-style: none; margin: 5cqw 0 0; padding: 4cqw 0 0; border-top: 1px solid rgb(255 255 255 / .35); display: flex; flex-direction: column; gap: 3cqw; }
.tpl-secao li { display: flex; align-items: baseline; gap: 2cqw; font-size: 4cqw; }
.tpl-secao li i { flex: 1; border-bottom: 1px dotted currentColor; opacity: .4; }
.tpl-sumario .sec-li { margin-top: 2cqw; font-weight: 700; color: var(--sec); }
.tpl-sumario .sub { padding-left: 4cqw; font-size: 3.8cqw; }

/* ── Texto rico e imagens na página ── */
.rich { font-size: calc(4cqw * var(--fs, 1)); line-height: 1.5; display: block; overflow-wrap: anywhere; }
.rich p, .rich div { margin: 0 0 2.4cqw; }
.rich ul, .rich ol { margin: 0 0 2.4cqw; padding-left: 1.5em; }
.rich h2 { font: 700 1.55em/1.2 var(--serif); margin: 1em 0 .4em; }
.rich h3 { font: 600 1.25em/1.25 var(--serif); margin: .9em 0 .3em; }
.rich blockquote { margin: 0 0 2.4cqw; padding: .2em 0 .2em .9em; border-left: .25em solid var(--sec, var(--accent)); font-style: italic; opacity: .9; }
.rich a { color: var(--sec, var(--accent)); text-decoration: underline; }
.rich > :first-child { margin-top: 0; }
.fs-sm { font-size: .8em; } .fs-lg { font-size: 1.35em; } .fs-xl { font-size: 1.9em; line-height: 1.2; }
.ff-serif { font-family: var(--serif); } .ff-sans { font-family: var(--sans); } .ff-mono { font-family: ui-monospace, Consolas, monospace; }
.page.on-photo { color: #fff; }
.page.on-photo .rich a { color: #fff; }
.tpl-lista .rich ol { list-style: none; counter-reset: top; padding: 0; }
.tpl-lista .rich ol li { counter-increment: top; position: relative; padding-left: 2.6em; margin-bottom: .9em; line-height: 1.3; }
.tpl-lista .rich ol li::before { content: counter(top); position: absolute; left: 0; top: -.15em; font: 700 2em/1 var(--serif); color: var(--sec); }

.fig { margin: 0; }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig figcaption { font-size: 3cqw; opacity: .7; margin-top: 1cqw; line-height: 1.3; }
.f-arred img { border-radius: 3cqw; } .f-circ img { border-radius: 50%; aspect-ratio: 1; }
.fig-topo { flex: none; width: 100%; position: relative; z-index: 0; }
.fig-topo.t-p { height: 45cqw; } .fig-topo.t-m { height: 62cqw; } .fig-topo.t-g { height: 85cqw; }
.fig-topo img { height: 100%; }
.fig-topo figcaption { position: absolute; left: 4cqw; bottom: 2cqw; color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .6); opacity: 1; }
.fig-esquerda, .fig-direita { margin-bottom: 2cqw; }
.fig-esquerda { float: left; margin-right: 3.5cqw; } .fig-direita { float: right; margin-left: 3.5cqw; }
.fig-esquerda.t-p, .fig-direita.t-p { width: 26cqw; } .fig-esquerda.t-m, .fig-direita.t-m { width: 38cqw; } .fig-esquerda.t-g, .fig-direita.t-g { width: 50cqw; }
.fig-esquerda img, .fig-direita img { aspect-ratio: 4 / 3; height: auto; }
.fig-esquerda.f-circ img, .fig-direita.f-circ img { aspect-ratio: 1; }
.fig-acima, .fig-abaixo { margin-left: auto; margin-right: auto; }
.fig-acima.t-p, .fig-abaixo.t-p { width: 40%; } .fig-acima.t-m, .fig-abaixo.t-m { width: 70%; } .fig-acima.t-g, .fig-abaixo.t-g { width: 100%; }
.fig-acima img, .fig-abaixo img { aspect-ratio: 16 / 10; height: auto; }
.fig-acima.f-circ img, .fig-abaixo.f-circ img { aspect-ratio: 1; }

.page.overflow::after { content: 'Texto maior que a página'; position: absolute; left: 3cqw; bottom: 3cqw; z-index: 5; font: 600 3cqw var(--sans); background: #B42318; color: #fff; padding: .8cqw 2.6cqw; border-radius: 99px; }

/* ── Editor de páginas em tela cheia ── */
body.editing { overflow: hidden; }
.ed { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); height: 100dvh; }
.ed-top { display: flex; align-items: center; gap: 2px; padding: calc(env(safe-area-inset-top) + 4px) 6px 4px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.ed-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; padding-left: 4px; }
.ed-ttl b { font: 600 1rem var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-ttl small { color: var(--muted); font-size: .76rem; }
.ed-status { font-size: .74rem; font-weight: 600; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.ed-status[data-s=ok]::before { content: '✓ '; color: var(--accent); }
.ed-status[data-s=pend] { color: var(--accent); }
.ed-status[data-s=err] { color: var(--danger); }
.ed-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; padding: 22px 12px 28px; overscroll-behavior: contain; background: color-mix(in srgb, var(--line) 35%, var(--bg)); }
.ed-holder { --fit: min(100vw - 24px, calc((100dvh - 230px) * .705), 640px); position: relative; flex: none; margin: auto; width: calc(var(--fit) * var(--z, 1)); user-select: none; -webkit-user-select: none; }
.ed-holder .page { width: 100%; box-shadow: 0 8px 28px rgb(0 0 0 / .25); }
.ed-holder [contenteditable] { user-select: text; -webkit-user-select: text; outline: 0; cursor: text; }
.ed-holder [contenteditable]:hover { box-shadow: 0 0 0 .5cqw color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 1cqw; }
.ed-holder [contenteditable]:focus { box-shadow: 0 0 0 .6cqw var(--accent); border-radius: 1cqw; }
[data-ph]:empty::before { content: attr(data-ph); opacity: .45; }
.ed-panel { flex: none; max-height: 42vh; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-top: 1px solid var(--line); }
.ed-panel[hidden] { display: none; }
.ed-bar { flex: none; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.ed-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; }
.ed-row::-webkit-scrollbar { display: none; }
.tbn { flex: none; min-width: 58px; min-height: 52px; padding: 4px 6px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .7rem; font-weight: 600; color: var(--ink); }
.tbn:active { background: var(--accent-soft); }
.tbn.danger { color: var(--danger); }
.ed-zoom { margin-left: auto; flex: none; display: flex; align-items: center; }
.zoom-val { min-width: 52px; min-height: 44px; font-weight: 600; font-size: .85rem; text-align: center; }
.tb-all { display: flex; align-items: center; gap: 2px; flex: none; }
.cv-box.passthru { pointer-events: none; outline-color: transparent; }
.tbox { position: absolute; padding: 2cqw; box-sizing: border-box; }
.tbox .rich { min-height: 4cqw; }
.tbox.bg-preto, .tbox.bg-sec { color: #fff; }
.obj-th { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
.toast-act { margin-left: 14px; font-weight: 700; text-decoration: underline; color: inherit; min-height: 32px; }
#toast.has-act { pointer-events: auto; }
body.editing #toast { bottom: calc(env(safe-area-inset-bottom) + 130px); z-index: 120; }
.rich-wrap { display: flow-root; }
.rich-wrap.cols2 { column-count: 2; column-gap: 5cqw; display: block; }
.rich-wrap > .rich { display: block; }

/* ── Fase 5: equipe ── */
.sync-dot { position: absolute; right: 52px; top: calc(env(safe-area-inset-top) + 20px); width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.sync-dot[hidden] { display: none; }
.sync-dot[data-s=ok] { background: var(--accent); } .sync-dot[data-s=sync] { background: #F59E0B; } .sync-dot[data-s=erro] { background: var(--danger); }
.chat-btn { position: relative; }
.chat-btn .badge { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--danger); color: #fff; font: 700 .64rem/16px var(--sans); text-align: center; font-style: normal; }
.chat-btn .badge[hidden] { display: none; }
.ed-pres { font-size: .72rem; color: #B45309; font-weight: 600; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pres[hidden] { display: none; }
.com-list { margin-bottom: 12px; }
.com { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.com.ok { opacity: .6; }
.com-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.com-head small { color: var(--muted); }
.com p { margin: 4px 0 8px; white-space: pre-wrap; }
.alerta.erro { border-color: #B42318; } .alerta.aviso { border-color: #B54708; }
.alerta.erro .prob-ic { color: #B42318; } .alerta.aviso .prob-ic { color: #B54708; } .alerta.info .prob-ic { color: var(--accent); }
.equipe h4 { font: 600 1.05rem var(--serif); margin-bottom: 6px; }
.ver { align-items: center; }
.ver .btn { align-self: stretch; }

/* ── Fase 4: qualidade ── */
.tbox .rich { --fs: 1; }
.ed-warn { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #FEE4E2; color: #912018; font-size: .84rem; font-weight: 600; }
.ed-warn[hidden] { display: none; }
.ed-warn span { flex: 1; }
@media (prefers-color-scheme: dark) { .ed-warn { background: #4a1914; color: #fda29b; } }
.prob-resumo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip-prob { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--line); }
.chip-prob.erro { background: #FEE4E2; color: #B42318; } .chip-prob.aviso { background: #FEF0C7; color: #B54708; } .chip-prob.info { background: var(--accent-soft); color: var(--accent); }
.prob { align-items: flex-start; }
.prob-ic { flex: none; margin-top: 2px; }
.prob.erro .prob-ic { color: #B42318; } .prob.aviso .prob-ic { color: #B54708; } .prob.info .prob-ic { color: var(--accent); }
.empty.ok { color: var(--accent); border-color: var(--accent); }
.actions.col { flex-direction: column; }
.pres { position: fixed; inset: 0; z-index: 300; background: #0c0c0b; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; touch-action: pan-y; }
.pres-stage { display: flex; gap: 2px; align-items: center; justify-content: center; animation: pres-fade .25s ease-out; }
.pres-stage.in-next { animation-name: pres-next; } .pres-stage.in-prev { animation-name: pres-prev; }
.pres-stage .page { height: min(84dvh, calc((100vw - 40px) * 1.419)); width: auto; aspect-ratio: 148 / 210; box-shadow: 0 20px 60px rgb(0 0 0 / .6); }
.pres-stage.dupla .page { height: min(84dvh, calc((100vw - 40px) / 2 * 1.419)); }
.pres-x { position: absolute; top: 10px; right: 10px; color: #fff; z-index: 2; }
.pres-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 80px; color: #fff; opacity: .7; z-index: 2; display: grid; place-items: center; }
.pres-nav.prev { left: 0; } .pres-nav.next { right: 0; }
.pres-bar { position: absolute; bottom: 12px; display: flex; gap: 12px; align-items: center; font-size: .85rem; }
.pres-bar .chip { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
@keyframes pres-fade { from { opacity: 0; } } @keyframes pres-next { from { opacity: 0; transform: translateX(40px); } } @keyframes pres-prev { from { opacity: 0; transform: translateX(-40px); } }
.print-sheet.bleed { position: relative; width: 160mm; height: 222mm; }
.mk { position: absolute; background: #000; display: none; }

/* ── Fase 3: velocidade ── */
.top-search { position: absolute; right: 8px; top: calc(env(safe-area-inset-top) + 6px); }
.top { position: sticky; }
.thumb { container-type: inline-size; width: 100%; pointer-events: none; text-align: left; }
.thumb .page { width: 100%; border-radius: 2px; box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; margin-top: 8px; }
.tpl-card { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: .78rem; font-weight: 600; padding: 6px; border-radius: 12px; border: 2px solid transparent; }
.tpl-card.on, .tpl-card:active { border-color: var(--accent); }
.tpl-card:hover { background: var(--accent-soft); }
.pthumb { position: relative; flex: none; width: 40px; }
.pthumb i { position: absolute; left: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 .66rem/18px var(--sans); text-align: center; font-style: normal; z-index: 2; }
.plan { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.plan-row .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sec); }
.plan-row input { width: 76px; flex: none; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.lib-th { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); }
.lib-th img { width: 100%; height: 100%; object-fit: cover; }
.lib-used { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .75rem/20px var(--sans); text-align: center; font-style: normal; }
.swatches.big { gap: 12px; margin: 10px 0 14px; }
.swatches.big .sw { width: 44px; height: 44px; position: relative; overflow: hidden; }
.sw.edit input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cor-custom { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.pal .item { min-height: 48px; }
.st-lead { font-size: 1.25em; line-height: 1.4; font-weight: 500; }
.st-legenda { font-size: .8em; font-style: italic; opacity: .7; }
.st-destaque { font: 700 1.15em/1.3 var(--serif); color: var(--sec, var(--accent)); border-left: .2em solid currentColor; padding-left: .6em; }
.reader.dupla { gap: 18px; }
.spread { flex: none; width: min(92vw, 720px); display: flex; gap: 2px; scroll-snap-align: start; }
.spread.first { justify-content: flex-end; } .spread.last { justify-content: flex-start; }
.reader .spread .page { width: calc(50% - 1px); flex: none; box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
.center-row { justify-content: center; }
.tb-colorwrap span { display: block; }

/* ── Fase 2: precisão ── */
.ed-scroll { touch-action: pan-x pan-y; }
.cv-box.frame { outline: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.cv-box.crop { outline: 2px dashed #fff; box-shadow: 0 0 0 9999px rgb(0 0 0 / .25); cursor: grab; }
.cv-guide { position: absolute; background: #ff2d9b; pointer-events: none; z-index: 5; }
.cv-guide.v { top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.cv-guide.h { left: 0; right: 0; height: 1px; margin-top: -.5px; }
.cv-grid { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(to right, rgb(120 120 120 / .28) 1px, transparent 1px), linear-gradient(to bottom, rgb(120 120 120 / .28) 1px, transparent 1px);
  background-size: 10% 10%; }
.cv-grid::after { content: ''; position: absolute; inset: var(--m); border: 1.5px dashed rgb(236 72 153 / .7); }
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.num-grid .field > span { font-size: .68rem; }
.num-grid .input { padding: 4px 6px; min-height: 36px; font-size: .85rem; }
.crop-hint { align-self: center; font-size: .85rem; padding: 0 8px; white-space: nowrap; }
.tbn.on { background: var(--accent-soft); color: var(--accent); }

/* ── Layout tipo canvas ── */
.pane-layout[hidden] { display: none; }
.cv { display: flex; flex-direction: column; gap: 12px; }
.cv-stage { position: relative; width: min(100%, 360px); margin: 30px auto 0; user-select: none; -webkit-user-select: none; }
.cv-stage .page { width: 100%; box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
.cv-layer { position: absolute; inset: 0; pointer-events: none; }
.cv-box { position: absolute; pointer-events: auto; cursor: move; touch-action: pan-y; outline: 1.5px dashed transparent; }
.cv-box:hover { outline-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.cv-box.sel { outline: 2px solid var(--accent); touch-action: none; }
.cv-h { position: absolute; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); touch-action: none; z-index: 2; box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.cv-h::after { content: ''; position: absolute; inset: -11px; }
.cv-h[data-h=nw] { left: 0; top: 0; cursor: nwse-resize; } .cv-h[data-h=n] { left: 50%; top: 0; cursor: ns-resize; }
.cv-h[data-h=ne] { left: 100%; top: 0; cursor: nesw-resize; } .cv-h[data-h=e] { left: 100%; top: 50%; cursor: ew-resize; }
.cv-h[data-h=se] { left: 100%; top: 100%; cursor: nwse-resize; } .cv-h[data-h=s] { left: 50%; top: 100%; cursor: ns-resize; }
.cv-h[data-h=sw] { left: 0; top: 100%; cursor: nesw-resize; } .cv-h[data-h=w] { left: 0; top: 50%; cursor: ew-resize; }
.cv-rot { position: absolute; left: 50%; top: -30px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; cursor: grab; touch-action: none; z-index: 2; box-shadow: 0 1px 4px rgb(0 0 0 / .35); }
.cv-rot::before { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 13px; margin-left: -1px; background: var(--accent); }
.cv-rot::after { content: ''; position: absolute; inset: -10px; }
.cv-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; }
.cv-th { flex: none; width: 54px; height: 54px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.cv-th.on { border-color: var(--accent); }
.cv-th img { width: 100%; height: 100%; object-fit: cover; }
.cv-add { border-style: dashed; }
.cv-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.cv-range { width: 100%; accent-color: var(--accent); min-height: 32px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .95rem; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }

/* figuras livres dentro da página */
.fig-livre { position: absolute; margin: 0; overflow: hidden; }
.fig-livre img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.fig-livre.f-arred { border-radius: 3cqw; } .fig-livre.f-circ { border-radius: 50%; }
.fig-livre figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 4cqw 2cqw 1.2cqw; background: linear-gradient(transparent, rgb(0 0 0 / .65)); color: #fff; font-size: 2.8cqw; opacity: 1; }

/* ── Editor no sheet ── */
.form .seg { margin-bottom: 2px; }
.pane-edit { display: flex; flex-direction: column; gap: 14px; }
.pane-edit[hidden], .pane-prev[hidden] { display: none; }
.pane-prev { padding: 8px 0 4px; }
.pane-prev .page { width: min(100%, 360px); margin: 0 auto; box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
.rte-wrap { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--line); border-radius: 13px 13px 0 0; position: sticky; top: 0; z-index: 2; }
.tb-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tb { min-width: 36px; height: 36px; border-radius: 9px; display: inline-grid; place-items: center; font-size: .95rem; color: var(--ink); }
.tb:hover { background: var(--accent-soft); }
.tb.on { background: var(--accent); color: var(--accent-ink); }
.tb-sel { height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); font-size: .8rem; padding: 0 6px; max-width: 118px; }
.tb-colorwrap { position: relative; cursor: pointer; }
.tb-colorwrap span { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.tb-color { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.rte.rich { min-height: 220px; max-height: 52vh; overflow-y: auto; padding: 12px 14px; outline: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.rte:empty::before { content: attr(data-ph); color: var(--muted); }
.rte p, .rte div, .rte ul, .rte ol, .rte blockquote { margin: 0 0 .6em; }
.rte-count { padding: 4px 14px 8px; font-size: .78rem; text-align: right; }
.imgs { display: flex; flex-direction: column; gap: 10px; }
.img-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.img-card > img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }
.img-opts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.input.sm { min-height: 40px; padding: 6px 10px; font-size: .92rem; }
.icon-btn.sm { width: 40px; height: 40px; }

/* ── Sheet ── */
dialog#sheet { border: 0; padding: 0; background: var(--surface); color: var(--ink); width: 100%; max-width: 560px; max-height: 92dvh; margin: auto auto 0; border-radius: 24px 24px 0 0; overflow: auto; overscroll-behavior: contain; animation: up .25s ease-out; }
dialog#sheet::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); }
.grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0 20px; }
.sheet-head h2 { font: 700 1.3rem var(--serif); }
.sheet-body { padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 1rem; /* 16px evita zoom no iOS */ }
textarea.input { resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-btn { display: flex; flex-wrap: wrap; gap: 8px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.actions .btn.primary { flex: 1; }
.img-prev { aspect-ratio: 16 / 9; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.img-prev span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.setor-row { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.setor-row .muted { flex: 1; }
.form.inline { margin-top: 18px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { width: 36px; height: 36px; border-radius: 50%; background: var(--c); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.sw.on { box-shadow: 0 0 0 3px var(--ink); }

#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 90px); transform: translate(-50%, 12px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; font-size: .9rem; opacity: 0; pointer-events: none; transition: .2s; z-index: 100; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
dialog[open] ~ #toast { z-index: 100; }
#print-root { display: none; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }


/* ── Identidade visual (logo, marca, navegação) ── */
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { flex: none; width: var(--s, 26px); height: var(--s, 26px); border-radius: calc(var(--s, 26px) * .3); background: var(--accent); color: var(--accent-ink); font: 700 calc(var(--s, 26px) * .56)/1 var(--serif); display: inline-grid; place-items: center; overflow: hidden; text-transform: none; letter-spacing: 0; }
.brand-mark.img { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-line { display: inline-flex; align-items: center; gap: 8px; }
.top h1 { background: linear-gradient(90deg, var(--ink) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.hero { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 62%); }
.tabs a { position: relative; transition: color .15s; }
.tabs a[aria-current]::before { content: ''; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 4px 4px; background: var(--accent); }
.marca-prev { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1px solid var(--line); }
.marca-prev b { font-size: 1.15rem; line-height: 1.2; } .marca-prev small { color: var(--muted); }
.logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fonte-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fonte-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-height: 56px; }
.fonte-opt b { font-size: 1rem; } .fonte-opt small { color: var(--muted); font-size: .74rem; }
.fonte-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ── Edições (estante) ── */
.estante-head h2 { font: 700 1.5rem/1.15 var(--serif); margin: 2px 0 4px; }
.estante { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ed-card { display: flex; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.ed-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.ed-cover { position: relative; flex: none; width: 112px; align-self: flex-start; transition: transform .15s; }
.ed-cover:hover { transform: translateY(-2px) rotate(-1deg); }
.ed-cover .thumb .page { box-shadow: 0 6px 16px rgb(0 0 0 / .28); }
.ed-cover-ph { aspect-ratio: 148 / 210; border-radius: 4px; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); color: var(--accent-ink); font: 700 1.4rem var(--serif); }
.ed-badge { position: absolute; left: 6px; top: 6px; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.ed-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ed-info h3 { font: 700 1.25rem/1.15 var(--serif); }
.ed-nome { font-weight: 500; }
.ed-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-info .meter { margin-top: 4px; }
.ed-info .row-btn { margin-top: 6px; align-items: center; }
.icon-btn.sm { width: 36px; height: 36px; }
.ed-atual { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); min-height: 48px; }
.ed-atual small { color: var(--muted); font-weight: 400; }
.ed-trocar { color: var(--accent); font-weight: 600; font-size: .85rem; }
.link-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.link-row .input { flex: 1; min-width: 0; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
.qr-box svg { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 12px; border: 1px solid var(--line); }
@media (min-width: 720px) { .estante { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .tabs a[aria-current]::before { top: 22%; bottom: 22%; left: 0; width: 3px; height: auto; margin: 0; border-radius: 0 3px 3px 0; }
}

/* ── Telas maiores ── */
@media (min-width: 720px) {
  dialog#sheet { margin: auto; border-radius: 24px; }
  .board { margin: 0; padding-inline: 0; }
  .chips { margin: 0; padding-inline: 0; }
  .reader { margin: 0; padding-inline: 0; }
}
@media (min-width: 960px) {
  :root { --gutter: 32px; }
  body { padding-left: 96px; }
  .tabs { inset: 0 auto 0 0; width: 96px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 72px; align-content: start; padding-top: 24px; border-top: 0; border-right: 1px solid var(--line); }
  main { max-width: 1100px; padding-bottom: 96px; }
  .fab { right: 40px; bottom: 32px; }
  #toast { bottom: 32px; }
  .stack { gap: 28px; }
  .col { width: auto; flex: 1 1 0; min-width: 240px; }
  .col-tabs { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Impressão / PDF da revista (A5) ── */
@media print {
  @page { size: A5 portrait; margin: 0; }
  body { padding: 0; background: #fff; }
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block; }
  .page.overflow::after { display: none; }
  #print-root { margin: 0; }
  .print-sheet { break-after: page; page-break-after: always; overflow: hidden; }
  .print-sheet .page { width: 148mm; height: 210mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-sheet.bleed .page { position: absolute; left: 3mm; top: 3mm; width: 154mm; height: 216mm; }
  .print-sheet.bleed .mk { display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .mk-tl-h { left: 0; top: 6mm; width: 2.5mm; height: .12mm; } .mk-tl-v { left: 6mm; top: 0; width: .12mm; height: 2.5mm; }
  .mk-tr-h { right: 0; top: 6mm; width: 2.5mm; height: .12mm; } .mk-tr-v { right: 6mm; top: 0; width: .12mm; height: 2.5mm; }
  .mk-bl-h { left: 0; bottom: 6mm; width: 2.5mm; height: .12mm; } .mk-bl-v { left: 6mm; bottom: 0; width: .12mm; height: 2.5mm; }
  .mk-br-h { right: 0; bottom: 6mm; width: 2.5mm; height: .12mm; } .mk-br-v { right: 6mm; bottom: 0; width: .12mm; height: 2.5mm; }
}
.equipe-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.equipe-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line, #0002); border-radius: 12px; }
.equipe-item .muted { font-size: .8rem; word-break: break-all; }
.equipe-item select { min-height: 44px; }
.equipe-item .btn { grid-column: 1 / -1; justify-self: start; }

.portao { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: var(--bg, #fbf8f1); overflow: auto; }
.portao-card { width: min(100%, 380px); display: grid; gap: 14px; }
.portao-card h1 { font: 700 2.2rem var(--serif); color: var(--accent); }