/* Blocos padronizados de documento (Nota / Alerta / Tabela) + prose.
   Usado pelo editor (StandardDocEditor) e pelo leitor (DocumentReaderPro). */

/* ── CSS vars do tema — sobrescritas por applyTheme() ───────────────────── */
:root {
  --doc-accent:       #4a9e22;  /* accent-600 (verde Metryka default) */
  --doc-accent-50:    #f3faec;
  --doc-accent-100:   #e3f4cf;
  --theme-accent-400: #82c945;
  --theme-accent-500: #5cb82e;
  --theme-accent-600: #4a9e22;
}

@media print {
  body:has(.metrika-print-root) * {
    visibility: hidden !important;
  }

  body:has(.metrika-print-root) .metrika-print-root,
  body:has(.metrika-print-root) .metrika-print-root * {
    visibility: visible !important;
  }

  body:has(.metrika-print-root) .metrika-print-root {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #0f172a !important;
  }

  body:has(.metrika-print-root) .metrika-print-header,
  body:has(.metrika-print-root) .metrika-print-document {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    margin: 0 0 12px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #0f172a !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  body:has(.metrika-print-root) .metrika-print-header .overflow-hidden {
    overflow: visible !important;
  }

  body:has(.metrika-print-root) .metrika-print-document {
    margin-bottom: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Grid do leitor reserva colunas das laterais mesmo ocultas — colapsa para 1 coluna. */
  body:has(.metrika-print-root) .metrika-print-grid {
    display: block !important;
    gap: 0 !important;
  }

  body:has(.metrika-print-root) .metrika-print-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body:has(.metrika-print-root) .metrika-print-document .overflow-hidden,
  body:has(.metrika-print-root) .metrika-print-main .overflow-hidden,
  body:has(.metrika-print-root) .metrika-print-main .overflow-x-auto {
    overflow: visible !important;
  }

  body:has(.metrika-print-root) .doc-content {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
  }

  body:has(.metrika-print-root) .metrika-print-header *,
  body:has(.metrika-print-root) .metrika-print-document * {
    box-shadow: none !important;
    text-shadow: none !important;
    color: #0f172a !important;
  }

  body:has(.metrika-print-root) .metrika-print-header h1,
  body:has(.metrika-print-root) .metrika-print-header h2,
  body:has(.metrika-print-root) .metrika-print-header p,
  body:has(.metrika-print-root) .metrika-print-header span {
    color: #0f172a !important;
  }

  body:has(.metrika-print-root) .print-hidden {
    display: none !important;
    visibility: hidden !important;
  }

  @page {
    margin: 14mm;
  }
}

/* ── Títulos com numeração automática e cor do tema ─────────────────────── */
.doc-content { counter-reset: h2-ct; }

.doc-content h2 {
  counter-increment: h2-ct;
  counter-reset: h3-ct;
  font-size: 1.25em; font-weight: 800; margin: 1.4em 0 .4em; color: #0f172a;
}
.doc-content h2::before {
  content: counter(h2-ct) ". ";
  color: var(--doc-accent, #4a9e22);
  font-weight: 900;
}

.doc-content h3 {
  counter-increment: h3-ct;
  font-size: 1.08em; font-weight: 700; margin: 1.2em 0 .35em; color: #0f172a;
  padding-left: 1.25em;    /* recuo visual em relação ao h2 */
}
.doc-content h3::before {
  content: counter(h2-ct) "." counter(h3-ct) " ";
  color: var(--doc-accent, #4a9e22);
  font-weight: 800;
}

/* dark mode headings */
.dark .doc-content h2, .dark .doc-content h3, .dark .doc-content strong { color: #f1f5f9; }

/* ── Corpo ───────────────────────────────────────────────────────────────── */
.doc-content p { margin: 0 0 1em; }
.dark .doc-content p { color: #cbd5e1; }
.doc-content strong { font-weight: 700; color: #0f172a; }

/* ── Lista numerada — numeração romana + cor do tema ─────────────────────── */
.doc-content ol {
  list-style: none !important;
  counter-reset: ol-ct;
  margin: 0 0 1em;
  padding-left: 2.8em;
}
.doc-content ol li {
  counter-increment: ol-ct;
  position: relative;
  margin: .45em 0;
}
.doc-content ol li::before {
  content: counter(ol-ct, upper-roman);
  position: absolute;
  left: -2.6em;
  top: .05em;
  min-width: 2.2em;
  text-align: right;
  color: var(--doc-accent, #4a9e22);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ── Lista com marcador — bullet com cor do tema ────────────────────────── */
.doc-content ul {
  list-style: none !important;
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.doc-content ul li {
  position: relative;
  margin: .3em 0;
}
.doc-content ul li::before {
  content: '•';
  position: absolute;
  left: -1.1em;
  top: 0;
  color: var(--doc-accent, #4a9e22);
  font-weight: 900;
  font-size: 1.15em;
  line-height: 1.45;
}

/* ── Imagem ──────────────────────────────────────────────────────────────── */
.doc-content img { display: block; max-width: 100%; border-radius: 12px; margin: 1em auto; }

/* ── Sidebar nav — sem scrollbar visível (setas indicativas no componente) ─ */
.sidebar-nav-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar-nav-scroll::-webkit-scrollbar {
  display: none;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.doc-content a {
  color: var(--doc-accent, #4a9e22);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: opacity .15s;
}
.doc-content a:hover { opacity: .75; }
.dark .doc-content a { color: var(--doc-accent, #82c945); }
.doc-content a.doc-cite {
  background: var(--doc-accent-50, #f3faec);
  border-radius: 4px;
  padding: 0 3px;
  border: 1px solid var(--doc-accent-100, #e3f4cf);
  text-decoration: none;
}
.dark .doc-content a.doc-cite {
  background: rgba(74, 158, 34, 0.15);
  border-color: rgba(74, 158, 34, 0.35);
  color: #a3e635;
}

/* ── Blockquote ─────────────────────────────────────────────────────────── */
.doc-content blockquote {
  border-left: 3px solid var(--doc-accent, #4a9e22);
  background: var(--doc-accent-50, #f3faec);
  color: #334155;
  margin: 1.2em 0;
  padding: .7em 1.1em;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.dark .doc-content blockquote { background: rgba(74,158,34,.1); color: #cbd5e1; }

/* ── Nota / Alerta ───────────────────────────────────────────────────────── */
.doc-cb { display: flex; gap: .7rem; align-items: flex-start; border-radius: 12px; border: 1px solid; padding: .8rem .95rem; margin: 1.1em 0; font-size: .95em; line-height: 1.6; }
.doc-cb .doc-cb-ic { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px; font-weight: 800; font-size: .78rem; flex: none; margin-top: .05rem; }
.doc-cb .doc-cb-bd { min-width: 0; }
.doc-note  { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.doc-note  .doc-cb-ic { background: #2563eb; color: #fff; }
.doc-alert { background: #fffbeb; border-color: #fde68a; color: #854d0e; }
.doc-alert .doc-cb-ic { background: #f59e0b; color: #fff; }
.dark .doc-note  { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.32); color: #bfdbfe; }
.dark .doc-alert { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); color: #fde68a; }

/* ── Tabela padronizada ──────────────────────────────────────────────────── */
.doc-table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .93em; overflow: hidden; }
.doc-table thead { border-bottom: 2px solid #e2e8f0; }
.doc-table th {
  background: #f8fafc;
  text-align: left;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  padding: .6rem 1rem;
}
.doc-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
}
.doc-table tr:last-child td { border-bottom: none; }
.doc-table td:first-child { font-weight: 600; color: #0f172a; }
/* dark */
.dark .doc-table thead { border-bottom-color: #1e293b; }
.dark .doc-table th  { background: #0f172a; color: #475569; }
.dark .doc-table td  { border-bottom-color: #1e293b; color: #cbd5e1; }
.dark .doc-table td:first-child { color: #f1f5f9; }

/* ── rich-editor-content (ManualContentWithEmbeds) ──────────────────────── */
.rich-editor-content h2 { font-size: 1.25em; font-weight: 800; margin: 1.4em 0 .4em; color: #0f172a; }
.rich-editor-content h3 { font-size: 1.08em; font-weight: 700; margin: 1.2em 0 .35em; color: #0f172a; }
.dark .rich-editor-content h2, .dark .rich-editor-content h3 { color: #f1f5f9; }

/* POP/SOP editor + reader */
.pop-sop {
  --accent: #5cb82e;
  --accent-strong: #4a9e22;
  --accent-fg: #ffffff;
  --accent-soft: #eef7e6;
  --accent-soft-fg: #3c7d1a;
  --accent-shadow: rgba(92,184,46,.32);
  --pop-accent: #5cb82e;
  --pop-accent-strong: #4a9e22;
  --pop-soft: #eef7e6;
  --pop-soft-fg: #3c7d1a;
}
.dark .pop-sop {
  --accent-soft: rgba(92, 184, 46, .14);
  --accent-soft-fg: #bff09c;
  --pop-soft: rgba(92, 184, 46, .14);
  --pop-soft-fg: #bff09c;
}
.pop-sop .font-serif {
  font-family: Georgia, "Times New Roman", serif;
}
.pop-paper {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px -24px rgba(15,23,42,.18);
}
.pop-sop .paper {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px -24px rgba(15,23,42,.18);
}
.dark .pop-sop .paper {
  background: rgb(15 23 42);
  border-color: rgb(30 41 59);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.55);
}
.dark .pop-paper {
  background: rgb(15 23 42);
  border-color: rgb(30 41 59);
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.55);
}
.pop-sop .bg-accent { background: var(--accent); color: var(--accent-fg); }
.pop-sop .bg-accent-strong { background: var(--accent-strong); color: var(--accent-fg); }
.pop-sop .btn-accent { background: var(--accent); color: var(--accent-fg); transition: background .18s, transform .18s, box-shadow .18s; }
.pop-sop .btn-accent:hover { background: var(--accent-strong); }
.pop-sop .text-accent { color: var(--accent); }
.dark .pop-sop .text-accent { color: color-mix(in srgb, var(--accent) 75%, white); }
.pop-sop .text-on-soft { color: var(--accent-soft-fg); }
.pop-sop .bg-accent-soft { background: var(--accent-soft); }
.pop-sop .border-accent { border-color: var(--accent); }
.pop-sop .ring-accent:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); }
.pop-sop .shadow-accent { box-shadow: 0 14px 30px -12px var(--accent-shadow); }
.pop-sop .accent-fill { background: var(--accent); }
.pop-sop .tnum { font-variant-numeric: tabular-nums; }
.pop-sop .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.pop-sop .scroll-thin::-webkit-scrollbar-thumb { background: rgba(148,163,184,.42); border-radius: 99px; }
.pop-sop .scroll-thin::-webkit-scrollbar-track { background: transparent; }
.pop-sop .no-scrollbar::-webkit-scrollbar { display: none; }
.pop-sop .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.pop-no-scrollbar::-webkit-scrollbar { display: none; }
.pop-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes popFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pop-sop .fade-up { animation: popFadeUp .35s cubic-bezier(.22,.61,.36,1) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.pop-sop .pop-in { animation: popIn .28s cubic-bezier(.22,.61,.36,1) both; }
.pop-sop .step-indent::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgb(226 232 240);
}
.dark .pop-sop .step-indent::before { background: rgb(51 65 85); }
@keyframes popSoftPulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
.pop-pulse { animation: popSoftPulse 2.2s ease-in-out infinite; }
@media print {
  .pop-sop aside,
  .pop-sop button { display: none !important; }
  .pop-sop header:not(.metrika-print-header *) { display: none !important; }
  .pop-paper { box-shadow: none !important; border: none !important; }
}