/* ============================================================
   EDITOR ACADÊMICO ABNT NBR 14724:2024
   Estilos completos – formato A4 real
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --toolbar-h: 54px;
  --sidebar-w: 260px;
  --page-w: 794px;      /* 21cm em 96dpi */
  --page-h: 1123px;     /* 29.7cm em 96dpi */
  --margin-top: 113px;  /* 3cm */
  --margin-left: 113px; /* 3cm */
  --margin-right: 76px; /* 2cm */
  --margin-bottom: 76px;/* 2cm */
  --page-num-offset: 76px; /* 2cm */

  /* Cores UI */
  --bg: #e8e8e8;
  --sidebar-bg: #1e2533;
  --sidebar-text: #c8d0e0;
  --toolbar-bg: #1a2035;
  --toolbar-text: #e0e6f0;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --page-bg: #ffffff;
  --page-shadow: 0 4px 24px rgba(0,0,0,0.18);
  --label-bg: rgba(37,99,235,0.08);
  --label-color: #2563eb;
  --optional-border: #d1d5db;
  --font-body: Arial, 'Liberation Sans', sans-serif;
}

/* Modo Escuro */
body.dark-mode {
  --bg: #111827;
  --sidebar-bg: #0f172a;
  --toolbar-bg: #0f172a;
  --page-bg: #1e293b;
  --page-shadow: 0 4px 24px rgba(0,0,0,0.5);
  --label-bg: rgba(37,99,235,0.15);
}

/* Modo escuro: garantir contraste nos textos dentro das páginas */
body.dark-mode .page { color: #e2e8f0; }
body.dark-mode .cover-input { color: #e2e8f0; }
body.dark-mode .cover-institution,
body.dark-mode .cover-author,
body.dark-mode .cover-title,
body.dark-mode .cover-subtitle,
body.dark-mode .cover-volume,
body.dark-mode .cover-city,
body.dark-mode .cover-year { color: #e2e8f0; }
body.dark-mode .editable-content { color: #e2e8f0; }
body.dark-mode .pre-textual-title { color: #e2e8f0; }
body.dark-mode .secao-primaria,
body.dark-mode .secao-secundaria,
body.dark-mode .secao-terciaria,
body.dark-mode .secao-quaternaria { color: #e2e8f0; }
body.dark-mode .nature-text,
body.dark-mode .nature-input,
body.dark-mode .nature-field label { color: #cbd5e1; }
body.dark-mode .ficha-editor { color: #e2e8f0; }
body.dark-mode .ficha-note { color: #94a3b8; }
body.dark-mode .tabela-ibge { color: #e2e8f0; }
body.dark-mode .tabela-ibge thead tr { border-color: #94a3b8; }
body.dark-mode .tabela-titulo,
body.dark-mode .tabela-fonte { color: #e2e8f0; }
body.dark-mode .ilustracao-titulo,
body.dark-mode .ilustracao-fonte { color: #e2e8f0; }
body.dark-mode .citacao-longa { color: #cbd5e1; }
body.dark-mode .apendice-title { color: #e2e8f0; }
body.dark-mode .assinatura-block { color: #e2e8f0; }
body.dark-mode .keywords-block { color: #e2e8f0; }
body.dark-mode .abrev-table { color: #e2e8f0; }
body.dark-mode .sumario-content { color: #e2e8f0; }
body.dark-mode .sumario-dots { border-bottom-color: #475569; }
body.dark-mode .lista-content { color: #e2e8f0; }
body.dark-mode .lista-dots { border-bottom-color: #475569; }
body.dark-mode .epigrafe-text { color: #e2e8f0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: #111;
  min-height: 100vh;
  transition: background 0.3s;
}

/* ---------- TOOLBAR ---------- */
.toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--toolbar-h);
  background: var(--toolbar-bg);
  color: var(--toolbar-text);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  z-index: 1000;
  overflow-x: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 5px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(255,255,255,0.12); }
.hamburger-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #e0e6f0;
  border-radius: 2px;
  transition: all 0.2s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 899;
}
.sidebar-overlay.active { display: block; }

.toolbar-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  margin-right: 12px;
  color: #fff;
}
.brand-version { font-weight: 400; font-size: 11px; color: #94a3b8; }
.brand-icon { font-size: 20px; }

.toolbar-groups { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }

.tool-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.tool-group:last-child { border-right: none; }

.tool-btn {
  background: transparent;
  color: var(--toolbar-text);
  border: none;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: background 0.15s;
}
.tool-btn:hover { background: rgba(255,255,255,0.12); }
.tool-btn.fmt { min-width: 28px; font-size: 14px; }
.tool-btn.btn-danger { color: #fca5a5; }
.tool-btn.btn-danger:hover { background: rgba(220,38,38,0.25); color: #fecaca; }

/* Botões de limpar seção no modal */
.btn-clear-section {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-clear-section:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* Botão "Limpar tudo" no modal */
.btn-danger-full {
  width: 100%;
  background: #dc2626;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-danger-full:hover { background: #b91c1c; }

.tool-select {
  background: rgba(255,255,255,0.08);
  color: var(--toolbar-text);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}
.tool-select option { background: #1e2533; color: #e0e6f0; }

.stats-group { gap: 6px; }
.stat-badge {
  background: rgba(255,255,255,0.1);
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
}

/* ---------- SIDEBAR ---------- */
.sidebar {
  position: fixed;
  top: var(--toolbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-y: auto;
  padding: 12px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-header h3 { font-size: 13px; font-weight: 700; color: #e0e6f0; }
.btn-refresh {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 14px;
  transition: background 0.15s;
}
.btn-refresh:hover { background: rgba(255,255,255,0.18); color: #fff; }

.toc-content { font-size: 12px; line-height: 1.6; }
.toc-empty { color: #64748b; font-style: italic; font-size: 11px; }

.toc-item { cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: background 0.12s; }
.toc-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.toc-item.level-1 { font-weight: 700; margin-top: 4px; }
.toc-item.level-2 { padding-left: 12px; }
.toc-item.level-3 { padding-left: 24px; font-size: 11px; }
.toc-item.level-4 { padding-left: 36px; font-size: 11px; color: #94a3b8; }

.sidebar-section h4 { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.section-nav { display: flex; flex-direction: column; gap: 2px; }
.section-nav-item {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.12s;
}
.section-nav-item:hover { background: rgba(255,255,255,0.06); color: #e0e6f0; }
.section-nav-item.hidden { opacity: 0.4; text-decoration: line-through; }

/* ---------- MAIN CONTAINER ---------- */
.main-container {
  margin-top: var(--toolbar-h);
  margin-left: var(--sidebar-w);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: calc(100vh - var(--toolbar-h));
}

/* ---------- PÁGINA A4 ---------- */
.page {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--page-bg);
  box-shadow: var(--page-shadow);
  position: relative;
  padding: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
  display: flex;
  flex-direction: column;
  page-break-after: always;
  overflow: visible;
}

/* Verso: margens invertidas */
.page-verso {
  padding-left: var(--margin-right);
  padding-right: var(--margin-left);
}

/* ---------- PAGINAÇÃO ---------- */
.page[data-page-num]::after {
  content: attr(data-page-num);
  position: absolute;
  top: 20px;
  right: var(--page-num-offset);
  font-family: var(--font-body);
  font-size: 10pt;
  color: #111;
  z-index: 10;
  pointer-events: none;
}
.page-verso[data-page-num]::after {
  right: auto;
  left: var(--page-num-offset);
}

/* Números de página extras para conteúdo que transborda */
.page-overflow-num {
  position: absolute;
  font-family: var(--font-body);
  font-size: 10pt;
  color: #111;
  pointer-events: none;
  z-index: 10;
}

/* Divisores visuais de página no editor */
.page-break-line {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 8;
  /* Espaçamento visual entre páginas sem cobrir o texto */
  margin-top: 6px;
  margin-bottom: 6px;
}
.page-break-line::before {
  content: '';
  display: block;
  border-top: 2px dashed #93c5fd;
  width: 100%;
}
.page-break-line-label {
  position: absolute;
  right: 8px;
  top: 3px;
  font-size: 9px;
  color: #3b82f6;
  background: var(--page-bg);
  padding: 0 6px;
  font-family: var(--font-body);
  border-radius: 3px;
  white-space: nowrap;
}

/* Faixas que simulam as margens superior e inferior nas páginas extras */
.page-margin-band {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 7;
  background: var(--page-bg);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--page-num-offset);
  font-family: var(--font-body);
  font-size: 10pt;
  color: #111;
}

@media print {
  .page-overflow-num,
  .page-break-line,
  .page-margin-band { display: none !important; }
  
  /* Remove scrollbars no PDF/Impressão */
  body, html, .main-container, .page {
    overflow: visible !important;
    height: auto !important;
  }
}

/* ---------- SECTION LABEL (editor only) ---------- */
.section-label {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--label-bg);
  color: var(--label-color);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.badge-required { background: #2563eb; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 9px; }
.badge-optional { background: #6b7280; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 9px; }
.badge-info { background: #0891b2; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 9px; }

.btn-remove-section {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 1px 6px;
  cursor: pointer;
  font-size: 11px;
}
.btn-remove-section:hover { background: #dc2626; }

/* ---------- OPCIONAL (seção removível) ---------- */
.optional-section.hidden { display: none !important; }

/* ---------- CAPA ---------- */
.page-cover {
  display: flex;
  flex-direction: column;
  /* height fixo = A4 menos os paddings internos: 1123px - 113px - 76px = 934px de área útil
     Mas precisamos da altura total da page para o spacer-flex funcionar na tela */
  height: var(--page-h);
}

/* Folha de rosto: mesma lógica de altura fixa */
#sec-rosto {
  height: var(--page-h);
}

.cover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* height: 100% garante que o cover-spacer-flex tenha espaço sobrando */
  height: 100%;
  width: 100%;
}

.cover-field { width: 100%; text-align: center; margin-bottom: 4px; }
.cover-spacer { flex: 0 0 60px; }
.cover-spacer-flex { flex: 1; }

.cover-input {
  width: 100%;
  border: none;
  border-bottom: 1px dashed #ccc;
  background: transparent;
  text-align: center;
  font-family: var(--font-body);
  color: #111;
  padding: 4px 0;
  outline: none;
  transition: border-color 0.2s, border-style 0.2s;
}
.cover-input:focus { border-bottom-color: var(--accent); }
.cover-input::placeholder { color: #9ca3af; }
/* Quando preenchido, o sublinhado dashed some */
.cover-input.has-value { border-bottom-color: transparent; }

.cover-institution {
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
}
.cover-author { font-size: 12pt; text-transform: uppercase; color: #111; }
.cover-title {
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  color: #111;
}
.cover-subtitle { font-size: 12pt; color: #111; }
.cover-volume { font-size: 12pt; color: #555; }
.cover-city { font-size: 12pt; color: #111; }
.cover-year { font-size: 12pt; color: #111; }

/* ---------- CONTEÚDO DE PÁGINA ---------- */
.page-content { flex: 1; display: flex; flex-direction: column; }

/* ---------- TÍTULOS PRÉ-TEXTUAIS ---------- */
.pre-textual-title {
  font-family: var(--font-body);
  font-size: 12pt;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: #111;
}

/* ---------- TÍTULOS DE SEÇÕES NUMERADAS (ABNT NBR 6024) ---------- */
.secao-primaria {
  font-family: var(--font-body);
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  color: #111;
  margin-top: 0;
  margin-bottom: 24px; /* 1,5 espaços após */
}

.secao-secundaria {
  font-family: var(--font-body);
  font-size: 12pt;
  font-weight: 700;
  text-align: left;
  color: #111;
  margin-top: 24px;
  margin-bottom: 24px;
}

.secao-terciaria {
  font-family: var(--font-body);
  font-size: 12pt;
  font-weight: 700;
  font-style: italic;
  text-align: left;
  color: #111;
  margin-top: 24px;
  margin-bottom: 24px;
}

.secao-quaternaria {
  font-family: var(--font-body);
  font-size: 12pt;
  font-style: italic;
  text-align: left;
  color: #111;
  margin-top: 24px;
  margin-bottom: 24px;
}

/* ---------- TEXTO CORRIDO ---------- */
.editable-content {
  font-family: var(--font-body);
  font-size: 12pt;
  line-height: 1.5;
  color: #111;
  text-align: justify;
  flex: 1;
  outline: none;
  min-height: 60px;
}

.editable-content p {
  text-indent: 1.25cm;
  margin-bottom: 0;
}

/* Sem recuo em primeiros parágrafos após título e em parágrafos especiais */
.editable-content h1 + p,
.editable-content h2 + p,
.editable-content h3 + p,
.editable-content h4 + p {
  text-indent: 1.25cm;
}

/* Focus visual */
.editable-content:focus {
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.2);
  border-radius: 2px;
}

/* ---------- CONTEÚDO TEXTUAL ---------- */
.textual-content { min-height: 200px; } /* altura mínima apenas para edição; cresce livremente com o conteúdo */

/* ---------- CITAÇÃO LONGA ---------- */
.citacao-longa {
  margin: 12px 0 12px 4cm;
  font-size: 10pt;
  line-height: 1.0;
  text-align: justify;
  color: #111;
  text-indent: 0 !important;
}
.citacao-longa p { text-indent: 0 !important; }

/* ---------- CITAÇÃO CURTA ---------- */
.citacao-curta { display: inline; }

/* ---------- NOTA DE RODAPÉ ---------- */
.rodape-area {
  border-top: 5cm solid transparent;
  border-top: 1px solid #ccc;
  margin-top: auto;
  padding-top: 6px;
  font-size: 10pt;
  line-height: 1.0;
}
.rodape-item { margin-bottom: 2px; }

/* ---------- ILUSTRAÇÃO ---------- */
.ilustracao-block {
  margin: 16px 0;
  page-break-inside: avoid;
  break-inside: avoid;
}
.ilustracao-titulo {
  font-size: 10pt;
  text-align: center;
  color: #111;
  margin-bottom: 8px;
  font-family: var(--font-body);
}
.ilustracao-img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid #ddd;
}
.ilustracao-img-placeholder {
  width: 100%;
  min-height: 200px;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
}
.ilustracao-fonte {
  font-size: 10pt;
  color: #111;
  margin-top: 6px;
  font-family: var(--font-body);
}
.ilustracao-nota { font-size: 10pt; color: #555; font-family: var(--font-body); }

/* ---------- TABELA IBGE ---------- */
.tabela-block {
  margin: 16px 0;
  page-break-inside: avoid;
  break-inside: avoid;
  width: 100%;
}
.tabela-titulo {
  font-size: 10pt;
  text-align: left;
  color: #111;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-weight: normal;
}
.tabela-ibge {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 10pt;
  color: #111;
}
.tabela-ibge thead tr { border-top: 2px solid #111; border-bottom: 1px solid #111; }
.tabela-ibge tfoot tr { border-top: 2px solid #111; }
.tabela-ibge th, .tabela-ibge td {
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.tabela-ibge th { font-weight: 700; }
.tabela-ibge tbody td { border-bottom: none; }
.tabela-fonte {
  font-size: 10pt;
  color: #111;
  margin-top: 4px;
  font-family: var(--font-body);
}

/* ---------- FOLHA DE ROSTO NATUREZA ---------- */
.rosto-nature-block {
  width: 50%;
  align-self: flex-end;
  font-size: 12pt;
  line-height: 1.0;
  color: #111;
  margin: 20px 0;
}
.nature-text {
  font-family: var(--font-body);
  font-size: 12pt;
  line-height: 1.0;
  color: #111;
  margin-bottom: 8px;
  outline: none;
}
.nature-text:focus { box-shadow: inset 0 0 0 1px rgba(37,99,235,0.3); }
.nature-field { margin-top: 6px; font-size: 12pt; display: flex; flex-direction: column; gap: 2px; }
.nature-field label { font-size: 10pt; color: #555; }
.nature-input {
  border: none;
  border-bottom: 1px dashed #bbb;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12pt;
  color: #111;
  padding: 2px 0;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.nature-input:focus { border-bottom-color: var(--accent); }
.nature-input.has-value { border-bottom-color: transparent; }

/* ---------- APROVAÇÃO ---------- */
.aprovacao-wrapper {
  font-family: var(--font-body);
  font-size: 12pt;
  line-height: 1.5;
  color: #111;
}

/* Autor: centralizado, caixa alta, negrito */
.aprovacao-autor {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Título: centralizado, caixa alta, negrito */
.aprovacao-titulo {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Inputs dentro da aprovação herdam o estilo cover-input mas com ajustes */
.aprovacao-input-autor,
.aprovacao-input-titulo {
  text-align: center !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12pt;
  width: 100%;
}

.aprovacao-input-nat {
  font-size: 12pt;
  line-height: 1.5;
  width: 100%;
  margin-bottom: 4px;
  text-align: justify;
}

.aprovacao-input-data {
  width: 180px;
  text-align: center;
  font-size: 12pt;
}

.aprovacao-input-membro {
  font-weight: 700;
  font-size: 12pt;
  width: 100%;
  text-align: center;
}

.aprovacao-input-inst {
  color: #444;
  font-size: 12pt;
  width: 100%;
  text-align: center;
}

/* Bloco de natureza: 50% da largura, alinhado à direita */
.aprovacao-natureza {
  width: 50%;
  margin-left: auto;
  font-size: 12pt;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 32px;
}

/* "Aprovado em:" centralizado */
.aprovacao-data {
  text-align: center;
  margin-bottom: 16px;
}

/* "BANCA EXAMINADORA" centralizado, negrito, caixa alta */
.aprovacao-banca-titulo {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Bloco de assinatura: centralizado */
.assinatura-block {
  margin-top: 32px;
  text-align: center;
}
.assinatura-linha {
  letter-spacing: 0;
  margin-bottom: 2px;
}
.assinatura-nome {
  font-weight: 700;
  margin-bottom: 2px;
}
.assinatura-inst {
  color: #444;
  margin-bottom: 0;
}

body.dark-mode .page-margin-band {
  background: var(--page-bg);
  color: #e2e8f0;
  border-color: #334155 !important;
}
body.dark-mode .page-break-line-label {
  color: #60a5fa;
  background: var(--page-bg);
}
body.dark-mode .assinatura-inst { color: #94a3b8; }
body.dark-mode .aprovacao-input-inst { color: #94a3b8; }

/* ---------- DEDICATÓRIA ---------- */
.dedicatoria-content { justify-content: flex-end; }
.dedicatoria-text {
  width: 50%;
  align-self: flex-end;
  line-height: 1.5;
  font-size: 12pt;
}

/* ---------- EPÍGRAFE ---------- */
.epigrafe-content { justify-content: flex-end; }
.epigrafe-text {
  width: 50%;
  align-self: flex-end;
  line-height: 1.5;
  font-size: 12pt;
  font-style: italic;
}
.epigrafe-autor {
  text-align: right;
  font-style: normal;
  font-size: 12pt;
  text-indent: 0 !important;
}

/* ---------- RESUMO ---------- */
.resumo-text p { text-indent: 0 !important; line-height: 1.5; }
.keywords-block {
  margin-top: 16px;
  font-size: 12pt;
  line-height: 1.5;
}
.keywords-input {
  display: inline;
  text-align: left !important;
  font-size: 12pt;
  font-weight: normal;
  width: calc(100% - 140px);
  vertical-align: baseline;
}

/* ---------- PLACEHOLDER para contenteditable ---------- */
/* Div-level placeholder */
[contenteditable].has-placeholder:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  font-style: italic;
  pointer-events: none;
  white-space: pre-wrap;
}
[contenteditable].has-placeholder:focus::before {
  display: none;
}
/* Paragraph-level placeholder */
p.has-placeholder:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  font-style: italic;
  pointer-events: none;
  display: block;
}
/* h1-level placeholder */
h1.has-placeholder:empty::before,
h1.has-placeholder.placeholder-active::before {
  content: attr(data-placeholder);
  color: #aaa;
  font-weight: 700;
  text-transform: uppercase;
  pointer-events: none;
}

/* In dark mode, placeholders slightly brighter */
body.dark-mode [contenteditable].has-placeholder:empty::before,
body.dark-mode p.has-placeholder:empty::before,
body.dark-mode h1.has-placeholder:empty::before {
  color: #64748b;
}

/* Cursor insertion zone indicator */
.insert-cursor-zone {
  position: relative;
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.insert-cursor-zone::after {
  content: '⬅ Inserção aqui';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 9px;
  color: var(--accent);
  background: rgba(37,99,235,0.08);
  padding: 1px 5px;
  border-radius: 0 0 0 4px;
  pointer-events: none;
  font-family: var(--font-body);
  font-style: normal;
}

/* ---------- FICHA CATALOGRÁFICA (NBR 14724:2024) ----------
   Tamanho padrão: 12,5cm × 7,5cm (largura × altura mínima)
   Posicionada na parte inferior, centralizada — verso da folha de rosto. */
.ficha-content { justify-content: flex-end; }
.ficha-box {
  border: 1px solid #111;
  padding: 12px 16px;
  font-size: 10pt;
  line-height: 1.4;
  /* Tamanho ABNT: 12,5cm largura × 7,5cm altura mínima */
  width: 12.5cm;
  min-height: 7.5cm;
  max-width: 100%; /* responsividade em telas pequenas */
  margin: 0 auto;
  box-sizing: border-box;
}
.ficha-editor {
  font-family: 'Courier New', monospace;
  font-size: 10pt;
  outline: none;
  white-space: pre-wrap;
  min-height: 100px;
}
.ficha-note {
  font-size: 9pt;
  text-align: center;
  margin-top: 8px;
  color: #555;
  outline: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
.ficha-note:focus {
  border-bottom-color: var(--accent);
}
body.dark-mode .ficha-note { color: #94a3b8; }
body.dark-mode .ficha-box { border-color: #475569; color: #e2e8f0; }
body.dark-mode .ficha-editor { color: #e2e8f0; }

/* ---------- SUMÁRIO (NBR 6027:2012) ----------
   Todos os itens alinhados à esquerda, sem recuo.
   Hierarquia demonstrada APENAS por tipografia,
   nunca por deslocamento (padding/margin-left). */
.sumario-content { font-size: 12pt; }
.sumario-item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 6px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.15s;
}
.sumario-item:hover { color: var(--accent); }
/* Nível 1: MAIÚSCULAS + negrito */
.sumario-item.nivel-1 { font-weight: 700; text-transform: uppercase; }
/* Nível 2: Negrito, capitalização normal — sem recuo */
.sumario-item.nivel-2 { font-weight: 700; text-transform: none; }
/* Nível 3: Itálico, peso normal — sem recuo */
.sumario-item.nivel-3 { font-style: italic; font-weight: 400; text-transform: none; }
/* Nível 4: Itálico, sem destaque — sem recuo */
.sumario-item.nivel-4 { font-style: italic; font-weight: 400; text-transform: none; }
.sumario-dots {
  flex: 1;
  border-bottom: 1px dotted #999;
  margin: 0 6px 3px;
}
.sumario-page { white-space: nowrap; }

/* ---------- LISTA ---------- */
.lista-content { font-size: 12pt; }
.lista-item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 6px;
  font-family: var(--font-body);
}
.lista-dots { flex: 1; border-bottom: 1px dotted #999; margin: 0 6px 3px; }
.lista-empty { color: #9ca3af; font-size: 11px; font-style: italic; }

/* ---------- ABREVIATURAS ---------- */
.abrev-table { width: 100%; border-collapse: collapse; font-size: 12pt; }
.abrev-table td { padding: 3px 0; vertical-align: top; }
.abrev-sigla { width: 120px; font-weight: 700; }

/* ---------- ERRATA ---------- */
.errata-table {
  border-collapse: collapse;
  font-size: 12pt;
  margin-top: 12px;
  width: 100%;
  table-layout: fixed;
}
.errata-table th, .errata-table td {
  border: 1px solid #111;
  padding: 8px 10px;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Larguras proporcionais: Folha 12%, Linha 12%, Onde se lê 35%, Leia-se 35%, botão 6% */
.errata-table th:nth-child(1), .errata-table td:nth-child(1) { width: 12%; }
.errata-table th:nth-child(2), .errata-table td:nth-child(2) { width: 12%; }
.errata-table th:nth-child(3), .errata-table td:nth-child(3) { width: 35%; }
.errata-table th:nth-child(4), .errata-table td:nth-child(4) { width: 35%; }
.errata-table th:nth-child(5), .errata-table td:nth-child(5) { width: 6%; }
.errata-table tbody td {
  min-height: 36px;
  height: 36px;
  line-height: 1.5;
}
.errata-table td[contenteditable="true"] { cursor: text; }
.errata-table th { background: #f1f5f9; font-weight: 700; }

.btn-del-errata-row {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s;
}
.btn-del-errata-row:hover { background: #fca5a5; }

.errata-referencia {
  text-indent: 0 !important;
  text-align: left !important;
  line-height: 1 !important;
  margin-bottom: 12px;
}

body.dark-mode .errata-table th { background: #2d3f55; color: #e2e8f0; }
body.dark-mode .errata-table th,
body.dark-mode .errata-table td { border-color: #475569; color: #e2e8f0; }

/* ---------- REFERÊNCIAS ---------- */
.referencias-lista {
  display: flex;
  flex-direction: column;
  gap: 0; /* separação controlada pelo margin do ref-item */
}
.ref-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  position: relative;
}
.ref-texto {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12pt;
  line-height: 1.0; /* espaço simples — NBR 6023:2025 */
  text-align: left;
  text-indent: 0 !important;
  margin-bottom: 1em; /* uma linha em branco de espaço simples entre referências */
  outline: none;
  min-height: 1.2em;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
.ref-texto:focus {
  border-bottom-color: rgba(37,99,235,0.3);
}
.btn-del-ref {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.15s;
}
.btn-del-ref:hover { background: #fca5a5; }

/* ---------- LISTAS EDITÁVEIS (Abreviaturas / Símbolos) ---------- */
.lista-editavel {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lista-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.lista-row:hover { border-bottom-color: #e5e7eb; }

.lista-col-sigla {
  width: 130px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 12pt;
  font-weight: 700;
  color: #111;
  border: none;
  border-bottom: 1px dashed #ccc;
  background: transparent;
  outline: none;
  padding: 2px 4px;
  transition: border-color 0.2s;
}
.lista-col-sigla:focus { border-bottom-color: var(--accent); }

.lista-col-desc {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12pt;
  color: #111;
  border: none;
  border-bottom: 1px dashed #ccc;
  background: transparent;
  outline: none;
  padding: 2px 4px;
  transition: border-color 0.2s;
}
.lista-col-desc:focus { border-bottom-color: var(--accent); }

.btn-del-row {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.btn-del-row:hover { background: #fca5a5; }

/* Barra de adicionar linha */
.lista-add-bar {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-add-row {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-body);
  transition: background 0.15s;
}
.btn-add-row:hover { background: var(--accent-hover); }
.btn-add-row-sec {
  background: #6b7280;
}
.btn-add-row-sec:hover { background: #4b5563; }

/* Dark mode listas */
body.dark-mode .lista-col-sigla,
body.dark-mode .lista-col-desc,
body.dark-mode .ref-texto { color: #e2e8f0; border-bottom-color: #475569; }
body.dark-mode .btn-del-row,
body.dark-mode .btn-del-ref { background: #7f1d1d; color: #fca5a5; }
body.dark-mode .lista-row:hover { border-bottom-color: #334155; }

/* ---------- APÊNDICE / ANEXO ---------- */
.apendice-title {
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #111;
  margin-bottom: 24px;
}

/* ---------- BOTÕES ---------- */
.btn-add-ref {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-body);
}
.btn-add-ref:hover { background: var(--accent-hover); }

/* ---------- MODAL ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-box-lg { width: 640px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.modal-header h3 { font-size: 15px; font-weight: 700; color: #111; }
.modal-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.15s;
}
.modal-close:hover { color: #111; }

.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-body label { font-size: 12px; font-weight: 600; color: #374151; }
.modal-insert-hint {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.5;
  margin-bottom: 4px;
}
.modal-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s;
}
.modal-input:focus { border-color: var(--accent); }

.modal-footer {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  justify-content: flex-end;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
}
.btn-secondary:hover { background: #e5e7eb; }

.ref-preview { margin-top: 8px; }
.ref-preview label { font-size: 12px; font-weight: 600; color: #374151; }
.ref-preview-text {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  min-height: 60px;
  color: #111;
  font-family: var(--font-body);
}

/* ---------- NOTIFICAÇÃO ---------- */
.notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111827;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.notification.show {
  opacity: 1;
  transform: translateY(0);
}
.notification.success { background: #059669; }
.notification.error { background: #dc2626; }

/* ============================================================
   IMPRESSÃO / PDF
   ============================================================ */
@media print {
  @page {
    size: A4;
    margin: 3cm 2cm 2cm 3cm; /* top right bottom left — ABNT NBR 14724 */
  }

  body { background: #fff; font-family: Arial, sans-serif; }

  .no-print,
  .toolbar,
  .sidebar,
  .section-label,
  .btn-remove-section,
  .btn-add-ref,
  .notification,
  .page-overflow-num,
  .page-break-line,
  .page-margin-band { display: none !important; }

  .main-container {
    display: block !important;  /* flex impede break-before:page nos filhos — ABNT NBR 14724 */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cada .page ocupa no mínimo uma página impressa */
  .page {
    width: 100%;
    min-height: 0;
    /* Remove as margens internas — @page já cuida delas */
    padding: 0 !important;
    box-shadow: none;
    page-break-before: always;
    break-before: page;
    /* Permite que conteúdo longo quebre entre páginas impressas */
    page-break-inside: auto;
    break-inside: auto;
    overflow: visible;
  }

  /* Capa: nunca numera, começa nova página */
  .page-cover { page-break-before: always; break-before: page; }

  /* Capa e folha de rosto: altura definida na impressão para que
     o cover-spacer-flex empurre cidade/ano para o rodapé da mesma página.
     23.7cm = 29.7cm (A4) - 3cm (margem topo) - 2cm (margem base) */
  .page-cover,
  #sec-rosto:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    height: 23.7cm !important;
    min-height: 0 !important;
  }

  .page-cover .cover-content,
  #sec-rosto .cover-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    width: 100% !important;
    align-items: center !important;
  }

  .cover-spacer-flex {
    flex: 1 !important;
  }

  .page-verso {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .optional-section.hidden { display: none !important; }

  /* Seções sem classe optional-section que também podem ser ocultadas */
  #sec-rosto.hidden,
  #sec-aprovacao.hidden,
  #sec-resumo.hidden,
  #sec-abstract.hidden,
  #sec-sumario.hidden,
  #sec-referencias.hidden { display: none !important; }

  .editable-content:focus { box-shadow: none; }

  /* Oculta o campo Volume da capa quando vazio na impressão (controlado via JS) */
  [data-print-hidden="true"] {
    display: none !important;
  }

  /* textualArea deve ser block para que break-before funcione nos filhos */
  #textualArea {
    display: block !important;
  }

  /* Esconde sublinhados dashed na impressão */
  .cover-input,
  .nature-input,
  .keywords-input,
  .lista-col-sigla,
  .lista-col-desc,
  .ref-texto {
    border-bottom: none !important;
  }

  /* Esconde botões de ação na impressão */
  .btn-del-row,
  .btn-del-ref,
  .btn-del-errata-row,
  .btn-add-row,
  .lista-add-bar { display: none !important; }

  /* Inputs de aprovação: remove underline na impressão */
  .aprovacao-input-autor,
  .aprovacao-input-titulo,
  .aprovacao-input-nat,
  .aprovacao-input-data,
  .aprovacao-input-membro,
  .aprovacao-input-inst {
    border-bottom: none !important;
  }

  /* Esconde placeholders de contenteditable na impressão */
  [contenteditable].has-placeholder:empty::before,
  p.has-placeholder:empty::before,
  h1.has-placeholder:empty::before { display: none !important; }

  /* Esconde zona de inserção na impressão */
  .insert-cursor-zone::after { display: none !important; }
  .insert-cursor-zone { outline: none !important; }

  /* ── NUMERAÇÃO NA IMPRESSÃO ─────────────────────────────────────────────
     ABNT NBR 14724:2024:
     - Capa: não contada, sem número visível
     - Pré-textuais (rosto→sumário): contadas, sem número visível
     - Textuais (introdução em diante): contadas, número visível

     ESTRATÉGIA:
     O counter(page) do browser é gerenciado 100% dentro das @page rules.
     A @page capa usa counter-reset: page 0, fazendo a capa valer 0
     (não conta). A folha de rosto fica valendo 1, e assim a numeração
     cresce corretamente a partir daí.
     As seções pré-textuais usam @page semnum (sem @top-right), então
     o número cresce mas não é exibido.
     As seções textuais usam @page default que mostra counter(page).

     IMPORTANTE: counter-reset DENTRO de @page rules é o único mecanismo
     confiável — counter-reset em elementos HTML não afeta counter(page).
  ──────────────────────────────────────────────────────────────────────── */

  /* @page nomeada para a capa: reseta o counter para 0 aqui,
     então a capa vale 0 (não conta) e o rosto automaticamente vale 1 */
  @page capa {
    counter-reset: page 0;
    @top-right { content: none; }
  }

  /* @page sem número — pré-textuais contam mas não exibem */
  @page semnum {
    @top-right { content: none; }
  }

  /* @page padrão: número no canto superior direito, a 2cm da borda */
  @page {
    @top-right {
      content: counter(page);
      font-family: Arial, sans-serif;
      font-size: 10pt;
      color: #000;
    }
  }

  /* Aplica @page capa SOMENTE na capa */
  .page-cover { page: capa; }

  /* Ficha catalográfica: não contada — ABNT NBR 14724:2024 seção 5.3 */
  @page ficha { counter-reset: page 0; @top-right { content: none; } }
  #sec-ficha { page: ficha; }
  #sec-ficha .page-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 100% !important;
    min-height: 23.7cm !important;
  }
  #sec-ficha .ficha-box {
    width: 12.5cm !important;
    min-height: 7.5cm !important;
    margin: 0 auto !important;
  }

  /* Seções pré-textuais: contam mas sem número visível */
  #sec-rosto,
  #sec-errata,
  #sec-aprovacao,
  #sec-dedicatoria,
  #sec-agradecimentos,
  #sec-epigrafe,
  #sec-resumo,
  #sec-abstract,
  #sec-listailustracoes,
  #sec-listatabelas,
  #sec-abreviaturas,
  #sec-simbolos,
  #sec-sumario {
    page: semnum;
  }

  /* Esconde o número de tela (::after) na impressão — o counter já cuida */
  .page[data-page-num]::after {
    display: none !important;
  }

  /* Esconde campos de input vazios na impressão */
  .cover-input:placeholder-shown {
    display: none !important;
  }
  /* Esconde o container do volume se o input estiver vazio */
  .cover-volume-field:has(input:placeholder-shown) {
    display: none !important;
  }
  /* Esconde campos específicos se estiverem vazios na impressão */
  .cover-field:has(#coverSubtitle:placeholder-shown),
  .cover-field:has(#rostoSubtitle:placeholder-shown) {
    display: none !important;
  }

  /* ── SEÇÕES PRIMÁRIAS (ABNT NBR 14724:2024) ────────────────────────────
     Cada seção primária deve iniciar em folha separada (ABNT 5.9).
     A .textual-page garante break-before:page para a div inteira.
     O h1.secao-primaria NÃO deve ter break próprio para evitar
     dupla quebra de página — a div pai já cumpre a regra.
  ─────────────────────────────────────────────────────────────────────── */

  /* Cada .textual-page SEMPRE inicia em nova folha — regra absoluta ABNT */
  #textualArea .page.textual-page,
  #textualArea > .page {
    display: block !important;
    page-break-before: always !important;
    break-before: page !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  /* O h1 dentro da .textual-page NÃO deve forçar quebra adicional */
  #textualArea .page.textual-page h1.secao-primaria,
  h1.secao-primaria {
    page-break-before: avoid !important;
    break-before: avoid !important;
    margin-top: 0;
  }

  /* Subseções: nunca quebram página sozinhas */
  h2.secao-secundaria,
  h3.secao-terciaria,
  h4.secao-quaternaria {
    page-break-before: auto;
    break-before: auto;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Evita que um título de subseção fique isolado no fim de uma página */
  h2.secao-secundaria,
  h3.secao-terciaria,
  h4.secao-quaternaria {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Errata: garante que a tabela ocupe exatamente a área de conteúdo da página.
     Reverte o display:block do responsive e força table-layout:fixed */
  .errata-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    overflow: visible !important;
  }
}

/* ---------- RESPONSIVIDADE ---------- */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 900;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  .main-container { margin-left: 0; padding: 16px; }
  .page {
    width: 100%;
    max-width: var(--page-w);
    box-sizing: border-box;
    overflow-x: hidden;
  }
  /* Tabela da errata: scroll horizontal na tela, mas já é table-layout:fixed
     então não estoura — o overflow-x é só por segurança */
  .errata-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lista-row { flex-wrap: wrap; gap: 4px; }
  .lista-col-sigla { width: 100px; min-width: 60px; flex-shrink: 1; }
  .lista-col-desc { flex: 1; min-width: 0; }
  .ref-item { flex-wrap: wrap; }
  .lista-add-bar { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 600px) {
  .toolbar { flex-wrap: wrap; height: auto; padding: 6px; }
  .page { padding: 32px 14px 16px 14px; box-sizing: border-box; }
  .lista-col-sigla { width: 80px; }
  .errata-table th, .errata-table td { font-size: 10pt; padding: 4px; }
}

@media (max-width: 480px) {
  /* Reduz fonte da tabela errata em telas muito pequenas para evitar
     quebra de palavra nas colunas estreitas ("Folha", "Linha") */
  .errata-table th,
  .errata-table td {
    font-size: 8.5pt;
    padding: 3px;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ============================================================
   MODAL DE SÍMBOLOS E FÓRMULAS MATEMÁTICAS
   ============================================================ */

.math-modal-box {
  max-width: 720px;
  width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.math-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

body.dark-mode .math-modal-tabs {
  background: #1e293b;
  border-bottom-color: #334155;
}

.math-tab {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all 0.15s;
  border-bottom: 3px solid transparent;
}

.math-tab:hover { background: rgba(37,99,235,0.07); color: #2563eb; }

.math-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: rgba(37,99,235,0.06);
  font-weight: 600;
}

.math-tab-content {
  display: none;
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}

.math-tab-content.active { display: block; }

.math-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 10px 0 6px;
}

.math-section-label:first-child { margin-top: 0; }

.math-symbols-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}

.sym-btn {
  min-width: 44px;
  height: 40px;
  padding: 4px 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 15px;
  font-family: 'Times New Roman', Georgia, serif;
  cursor: pointer;
  color: #1e293b;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sym-btn:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}

body.dark-mode .sym-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

body.dark-mode .sym-btn:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Fórmulas prontas */
.math-formulas-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formula-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}

.formula-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
  border-left-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37,99,235,0.15);
}

.formula-name {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.formula-expr {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 15px;
  color: #1e293b;
  font-style: italic;
}

body.dark-mode .formula-btn {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .formula-btn:hover {
  background: #172554;
  border-color: #2563eb;
}

body.dark-mode .formula-expr { color: #e2e8f0; }
body.dark-mode .formula-name { color: #94a3b8; }

.math-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 0 0 10px 10px;
  flex-shrink: 0;
}

body.dark-mode .math-modal-footer {
  background: #1e293b;
  border-top-color: #334155;
}

.math-hint {
  font-size: 12px;
  color: #94a3b8;
}