/* ═══════════════════════════════════════════════════════════════
   RETANGULINA — camada de identidade sobre o zine studio

   O cabeçalho (menu overlay + site-header) NÃO é definido aqui — vem
   de /retangulina-assets/, os mesmos arquivos CSS/JS que o WordPress
   usa no site, para ficar pixel a pixel igual. Este arquivo só cuida
   do miolo do editor: painéis, botões da barra de ações e o diálogo
   "como dobrar". Carregado por último, depois de resources/editor.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --color-branco-papel: #E8E8DB;
  --color-preto: #000000;
  --color-amarelito: #FBFF00;
  --color-vermelho: #9D2B2D;

  --font-epilogue: 'Epilogue', sans-serif;
  --font-minion: 'minion-pro', Georgia, serif;

  /* Sobrescreve as variáveis do editor.css — o painel de código passa
     a ser preto Retangulina, e o texto, branco papel. */
  --editor-bg: #000000;
  --text-color: #E8E8DB;

  scrollbar-color: #4a4a42 var(--editor-bg);
}

/* ─── Layout geral ─────────────────────────────────────────────
   O site-header real é position:fixed (definido em layout.css), então
   sai do fluxo normal — por isso o padding-top aqui, do tamanho exato
   do header (--header-height, de tokens.css), para nada ficar atrás
   dele. Corpo em coluna: barra de ações, depois os painéis. */
body {
  flex-direction: column;
  font-family: var(--font-epilogue);
  padding-top: var(--header-height);
}

.ret-panes {
  flex: 1;
  display: flex;
  width: 100%;
  min-height: 0; /* deixa os painéis encolherem dentro do flex */
}

/* ─── Barra de ações ─────────────────────────────────────────────
   Fica abaixo do header de verdade — o header em si não tem espaço
   para botões de ação, então eles moram aqui, numa faixa própria. */
.ret-toolbar {
  flex-shrink: 0;
  background: var(--color-preto);
  border-bottom: 1px solid #2a2a26;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1rem;
}

.ret-toolbar__dica {
  flex: 1;
  font-family: var(--font-minion);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-branco-papel);
  opacity: 0.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ret-toolbar__acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ─── Botões ─────────────────────────────────────────────────── */
.ret-btn {
  font-family: var(--font-epilogue);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-branco-papel);
  background: transparent;
  color: var(--color-branco-papel);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.ret-btn:hover {
  background: var(--color-branco-papel);
  color: var(--color-preto);
}

/* O imprimir é a ação principal da mesa — precisa saltar aos olhos. */
.ret-btn--imprimir {
  background: var(--color-amarelito);
  border-color: var(--color-amarelito);
  color: var(--color-preto);
  font-weight: 800;
}

.ret-btn--imprimir:hover {
  background: var(--color-branco-papel);
  border-color: var(--color-branco-papel);
}

/* ─── Painel de preview ──────────────────────────────────────── */
/* O verde do zine studio dá lugar ao amarelito: a folha branca do zine
   fica em destaque sobre o fundo da identidade. A grade continua
   funcionando — editor.js só troca as variáveis de posição/tamanho. */
.preview-pane {
  background: var(--color-amarelito);
}

.preview-pane.grid-ready {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 1px, transparent 1px),
    var(--color-amarelito);
}

/* ─── Navegação entre páginas do zine ──────────────────────────
   O editor.css desenha isto em branco com sombra escura, pensando no
   fundo verde original. Sobre o amarelito tudo precisa virar preto. */
.spread-nav {
  font-family: var(--font-epilogue);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--color-preto);
}

.spread-nav button {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-preto);
  text-shadow: none;
}

.spread-nav button:not(:disabled):hover {
  background: rgba(0, 0, 0, 0.2);
}

#spreadIndicator {
  font-family: var(--font-epilogue);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--color-preto);
  text-shadow: none;
}

/* ─── Diálogo "como dobrar" ──────────────────────────────────── */
.ret-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  padding: 1.5rem;
}

.ret-modal.is-open {
  display: flex;
}

.ret-modal__caixa {
  background: var(--color-branco-papel);
  color: var(--color-preto);
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
}

.ret-modal__caixa h2 {
  font-family: var(--font-epilogue);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  margin-bottom: 1.25rem;
}

.ret-modal__caixa ol {
  font-family: var(--font-minion);
  font-size: 1rem;
  line-height: 1.45;
  padding-left: 1.1rem;
}

.ret-modal__caixa li {
  margin-bottom: 0.7rem;
}

.ret-modal__caixa p {
  font-family: var(--font-minion);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.ret-modal__caixa a {
  color: var(--color-vermelho);
}

.ret-modal__fechar {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-preto);
}

/* ─── Crédito ao projeto original (GPLv3) ────────────────────── */
.ret-credito {
  font-family: var(--font-epilogue);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--color-branco-papel);
  opacity: 0.4;
  text-decoration: none;
  white-space: nowrap;
}

.ret-credito:hover {
  opacity: 0.8;
}

/* ─── Telas estreitas ────────────────────────────────────────── */
@media (max-width: 900px) {
  .ret-toolbar__dica { display: none; }
}

@media (max-width: 620px) {
  .ret-toolbar {
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
  }
  .ret-credito { display: none; }
  .ret-btn {
    padding: 0.45rem 0.6rem;
    letter-spacing: 0.08em;
  }
}

/* ─── Impressão ──────────────────────────────────────────────────
   Cinto e suspensório. O que é impresso é o iframe de preview, não
   esta página — mas se alguém der Ctrl+P com o foco fora do app, ao
   menos não sai o cromo do editor. */
@media print {
  .site-header,
  .nav-overlay,
  .ret-toolbar,
  .ret-modal,
  .editor-pane,
  .spread-nav {
    display: none !important;
  }
}