/* canga (10/10/2026): fundo creme, texto escuro, uma cor de destaque */
@font-face { font-family: 'Distro'; src: url('/fonts/DISTROH.woff2') format('woff2'); font-display: swap; }
:root { --fundo: #FFFBF3; --texto: #2b2925; --leve: #C8C4B9; --destaque: #F48591; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; box-shadow: none; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); }
body { font-family: 'Distro', system-ui, sans-serif; letter-spacing: .04em; min-height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* o nome em pé, do ladinho (girado 90° para a esquerda); a mesa fica com o resto da tela */
.topo { position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; width: 72px; background: var(--fundo);
  display: flex; align-items: center; gap: 24px; padding: 48px 0;
  writing-mode: vertical-rl; transform: rotate(180deg); }
.marca { font-size: 30px; text-transform: lowercase; padding: 0; }
.titulo { font-size: 15px; color: #8a867c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 70vh; }
.estado { font-size: 13px; color: var(--leve); white-space: nowrap; }
.zoom { position: fixed; top: 24px; right: 32px; z-index: 21; display: flex; align-items: center; gap: 4px; font-size: 14px;
  padding: 6px 24px; }
body { padding-left: 72px; }

/* a lista da obra */
.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 40px 32px; padding: 72px 48px 96px; }
.cartao { display: flex; flex-direction: column; gap: 14px; text-align: left; padding: 0; }
.cartao .capa { width: 100%; aspect-ratio: 1; background: #f3eee4 center/contain no-repeat; border-radius: 10px; }
.cartao .nome { font-size: 14px; line-height: 1.35; padding: 0 4px; overflow-wrap: anywhere; }
.vazio { grid-column: 1 / -1; font-size: 16px; color: #8a867c; padding-top: 48px; }

/* a mesa: páginas uma embaixo da outra */
.mesa { padding: 72px 0 160px; overflow-x: auto; }
.paginas { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: max-content; min-width: 100%; padding: 0 48px; }
.moldura { margin: 0 auto; }
.zoom button { min-width: 34px; height: 34px; font-size: 18px; }
.zoom #z-val { font-size: 14px; min-width: 56px; }
.moldura { position: relative; box-shadow: 0 1px 12px rgba(43, 41, 37, .08); }
.pagina { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.el { position: absolute; transform-origin: 50% 50%; }
.el.sel { box-shadow: 0 0 0 calc(2px / var(--esc)) var(--destaque); }
.el img, .el svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.el.img-corte { overflow: hidden; }
.el.img-corte img { position: absolute; max-width: none; }
.texto { display: flex; flex-direction: column; white-space: pre-wrap; overflow-wrap: break-word; }
.texto p { margin: 0; }
.texto[contenteditable="true"] { cursor: text; }
.puxador { position: absolute; width: calc(14px / var(--esc)); height: calc(14px / var(--esc)); right: calc(-7px / var(--esc)); bottom: calc(-7px / var(--esc));
  background: var(--fundo); border: calc(2px / var(--esc)) solid var(--destaque); border-radius: 50%; cursor: nwse-resize; }

/* a barra de editar */
.barra { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 6px;
  padding: 10px 28px; background: var(--texto); color: var(--fundo); border-radius: 999px; font-size: 15px; }
.barra[hidden] { display: none; }
.barra button { color: var(--fundo); min-width: 34px; height: 34px; font-size: 18px; }
.barra select { font: inherit; font-size: 14px; color: var(--fundo); background: none; border: 0; max-width: 180px; padding: 0 8px; }
.barra select option { color: var(--texto); }
.barra .tam { min-width: 40px; text-align: center; font-size: 14px; }
.barra .cor { position: relative; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
.barra .cor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.barra .cor span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fundo); }

@media (max-width: 700px) {
  .topo { width: 48px; padding: 32px 0; gap: 16px; }
  body { padding-left: 48px; }
  .marca { font-size: 22px; }
  .zoom { top: 12px; right: 12px; padding: 4px 16px; }
  .lista { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; padding: 16px 16px 80px; }
  .paginas { padding: 0 16px; }
  .barra { bottom: calc(16px + env(safe-area-inset-bottom)); padding: 8px 24px; max-width: calc(100vw - 32px); overflow-x: auto; }
}