*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:       #002f5f;
  --navy-dark:  #001e3e;
  --blue:       #0057b8;
  --blue-light: #e8f0fc;
  --blue-mid:   #ccddf5;
  --green:      #1a7f37;
  --green-bg:   #dafbe1;
  /* Verde dos botões (download / nova seção): mesmo tom do status "Concluído" */
  --green-btn:       #22c55e;
  --green-btn-hover: #16a34a;
  --red:        #c0392b;
  --red-bg:     #fde8e6;
  --orange:     #9a5700;
  --orange-bg:  #fff3cd;
  --yellow:     #e6a817;
  --yellow-bg:  #fef9e7;
  --gray-50:    #f6f8fa;
  --gray-100:   #eaeef2;
  --gray-200:   #d0d7de;
  --gray-300:   #afb8c1;
  --gray-400:   #8c959f;
  --gray-600:   #57606a;
  --gray-800:   #24292f;
  --white:      #ffffff;
  --sidebar-w:  270px;
  --radius:     8px;
  --shadow:     0 1px 3px rgba(0,0,0,.10), 0 1px 8px rgba(0,0,0,.06);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.12);
  /* Barras de rolagem — alinhadas ao fundo claro da página */
  --scrollbar-w: 9px;
  --scrollbar-track: #e4e9f0;
  --scrollbar-thumb: #9aa8ba;
  --scrollbar-thumb-hover: #6b7c90;
  /* App (home, editor, modais): Sora. Conteúdo da especificação / export: --font-spec (Inter). */
  --font-app: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-spec: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
  scrollbar-gutter: stable;
}

/* Firefox + WebKit: seguem `html[data-theme]` via variáveis em :root / tema escuro */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-w);
  height: var(--scrollbar-w);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 100px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

body {
  font-family: var(--font-app);
  background: var(--gray-50);
  color: var(--gray-800);
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR — mesmo visual em claro e escuro (gradiente azul profundo) */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: linear-gradient(180deg, #061525 0%, #030a14 100%);
  border-right: 1px solid rgba(30, 74, 120, 0.55);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 100;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(0, 0, 0, 0.22);
}
#sidebar::-webkit-scrollbar {
  width: var(--scrollbar-w);
}
#sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 100px;
  margin: 8px 0 10px;
}
#sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
#sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
  background-clip: padding-box;
}

.sidebar-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .logo-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  display: block; margin-bottom: 4px;
}
.sidebar-brand .doc-title {
  font-size: 13px; font-weight: 700; color: #f6f8ff; line-height: 1.35;
}
.sidebar-brand .doc-version {
  display: inline-block; margin-top: 6px;
  background: var(--blue); color: #ffffff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
}
#sidebar nav { padding: 10px 0 24px; flex: 1; }

.nav-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(175, 205, 240, 0.5);
  padding: 14px 18px 4px;
}
.nav-item {
  display: block; padding: 6px 18px; font-size: 12.5px;
  color: rgba(220, 235, 255, 0.88); text-decoration: none;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent; line-height: 1.4;
}
.nav-item:hover, .nav-item.active {
  background: rgba(100, 170, 255, 0.26);
  color: #ffffff;
  border-left-color: #8ec8ff;
}
.nav-item.sub { padding-left: 30px; font-size: 11.5px; color: rgba(175, 205, 240, 0.72); }
.nav-item.new-item { color: #9dc8ff; }

/* MAIN */
#main {
  margin-left: var(--sidebar-w);
  flex: 1; min-width: 0;
  padding: 36px 44px 80px;
  max-width: 1020px;
}

/* DOC HEADER */
.doc-header {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); padding: 32px 36px;
  margin-bottom: 36px; box-shadow: var(--shadow-lg);
}
.doc-header h1 {
  font-size: 22px; font-weight: 800;
  margin-bottom: 20px; line-height: 1.3;
}
.doc-header h1 span { color: #7ab8ff; }
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.meta-item {
  background: rgba(255,255,255,.08); border-radius: 6px; padding: 10px 14px;
}
.meta-item .label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 3px;
}
.meta-item .value { font-size: 13px; font-weight: 600; color: var(--white); }
.meta-item .value code {
  font-size: 12px; background: rgba(255,255,255,.12);
  padding: 1px 5px; border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  /* Fallback (HTML antigo sem modificador) = mesmo visual que “outro” */
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
/* Cores por etapa (cabeçalho azul-marinho) */
.status-badge--outro {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
.status-badge--rascunho {
  background: rgba(140, 149, 159, 0.38);
  color: #f0f3f6;
  border-color: rgba(255, 255, 255, 0.18);
}
.status-badge--em-revisao {
  background: rgba(230, 168, 23, 0.28);
  color: #ffe8a3;
  border-color: rgba(245, 200, 80, 0.55);
}
.status-badge--em-desenvolvimento {
  background: rgba(0, 87, 184, 0.5);
  color: #d6e9ff;
  border-color: rgba(122, 184, 255, 0.55);
}
.status-badge--em-validacao {
  background: rgba(139, 92, 246, 0.38);
  color: #ede9fe;
  border-color: rgba(196, 181, 253, 0.5);
}
.status-badge--concluido {
  background: rgba(26, 127, 55, 0.48);
  color: #c8f7d4;
  border-color: rgba(86, 212, 138, 0.45);
}
.status-badge--arquivado {
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
}
.history-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.history-tag {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; color: rgba(255,255,255,.75);
}
.history-tag.new {
  background: rgba(0,87,184,.4); border-color: #7ab8ff;
  color: #cce4ff; font-weight: 700;
}

/* SECTIONS */
section {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 28px 32px;
  margin-bottom: 24px; box-shadow: var(--shadow);
}
section.new-section {
  border-color: var(--blue-mid);
  box-shadow: var(--shadow), 0 0 0 1px var(--blue-mid);
}
section h2 {
  font-size: 17px; font-weight: 800; color: var(--navy);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--blue-mid);
  display: flex; align-items: center; gap: 10px;
}
section h2 .sec-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--navy); color: var(--white);
  border-radius: 50%; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
section h2 .new-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: var(--blue); color: white;
  padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
}
section h3 {
  font-size: 14px; font-weight: 700; color: var(--gray-800);
  margin: 20px 0 10px; display: flex; align-items: center; gap: 7px;
}

p { line-height: 1.7; color: var(--gray-800); margin-bottom: 10px; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 20px; }
li { line-height: 1.7; margin-bottom: 4px; }
strong { font-weight: 700; }
code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12.5px; background: var(--gray-100);
  border: 1px solid var(--gray-200); padding: 1px 5px;
  border-radius: 4px; color: var(--navy);
}
pre {
  background: #1e2329; border-radius: 8px;
  padding: 18px 20px; margin: 12px 0; overflow-x: auto;
}
pre code {
  background: none; border: none; padding: 0;
  color: #e6edf3; font-size: 13px; line-height: 1.65;
}

/* CALLOUTS */
.callout {
  border-left: 4px solid; border-radius: 0 6px 6px 0;
  padding: 12px 16px; margin: 14px 0;
  font-size: 13.5px; line-height: 1.6;
}
.callout.info    { border-color: var(--blue);   background: var(--blue-light); }
.callout.warn    { border-color: var(--yellow);  background: var(--yellow-bg); }
.callout.danger  { border-color: var(--red);     background: var(--red-bg); }
.callout.success { border-color: var(--green);   background: var(--green-bg); }
.callout .callout-title {
  font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px;
}
.callout.info    .callout-title { color: var(--blue); }
.callout.warn    .callout-title { color: var(--orange); }
.callout.danger  .callout-title { color: var(--red); }
.callout.success .callout-title { color: var(--green); }

/* TABLES */
.table-wrap {
  overflow-x: auto; margin: 12px 0;
  border-radius: 6px; border: 1px solid var(--gray-200);
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--navy-dark);
}
tbody tr { border-bottom: 1px solid var(--gray-100); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--gray-50); }
tbody tr:hover { background: var(--blue-light); }
tbody td { padding: 10px 14px; vertical-align: top; line-height: 1.6; }
tbody td:first-child { font-weight: 600; white-space: nowrap; }

/* Cabeçalho de Requisição (capa EF Daycoval) */
.req-header-table { width: 100%; border-collapse: collapse; }
.req-header-table th.req-th {
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 9px 14px; text-align: left;
  border: 1px solid var(--navy-dark); white-space: nowrap;
}
.req-header-table td {
  padding: 9px 14px; border: 1px solid var(--gray-200);
  vertical-align: middle; line-height: 1.5;
}
.req-header-table td:first-child { font-weight: 400; white-space: normal; }
.req-chamado-desc { color: var(--gray-600); font-weight: 400; }

/* Comparativo Antes / Agora: colunas de largura igual */
.comparativo-table { table-layout: fixed; }
.comparativo-table th { width: 50%; }
.comparativo-table tbody td:first-child { font-weight: 400; white-space: normal; }

.rule-id {
  display: inline-block;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; font-weight: 700;
  background: var(--blue-light); color: var(--blue);
  border: 1px solid var(--blue-mid);
  padding: 2px 7px; border-radius: 4px;
}

/* LOG LEVEL BADGES */
.log-info  { display:inline-block; padding:2px 8px; border-radius:4px; font-family:monospace; font-size:11px; font-weight:700; background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; }
.log-warn  { display:inline-block; padding:2px 8px; border-radius:4px; font-family:monospace; font-size:11px; font-weight:700; background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.log-error { display:inline-block; padding:2px 8px; border-radius:4px; font-family:monospace; font-size:11px; font-weight:700; background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.log-warn-recover { display:inline-block; padding:2px 8px; border-radius:4px; font-family:monospace; font-size:11px; font-weight:700; background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.log-critical { display:inline-block; padding:2px 8px; border-radius:4px; font-family:monospace; font-size:11px; font-weight:700; background:#4c0519; color:#fecdd3; border:1px solid #9f1239; }
tr.row-critical td { background: #fff1f2; }

tr.row-warn  td { background: #fffbeb; }
tr.row-error td { background: #fff5f5; }

/* ENDPOINT CARDS */
.endpoint-header {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--blue-light); border: 1px solid var(--blue-mid);
  border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; flex-wrap: wrap;
}
.endpoint-header.danger {
  border-color: #fca5a5; background: #fff5f5;
}
.http-badge {
  display: inline-flex; align-items: center;
  background: var(--blue); color: var(--white);
  font-family: monospace; font-size: 11px; font-weight: 800;
  padding: 4px 9px; border-radius: 5px; flex-shrink: 0; margin-top: 2px;
}
.http-badge.red { background: var(--red); }
.endpoint-path {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px; font-weight: 700; color: var(--navy); word-break: break-all;
}
.endpoint-desc { font-size: 12.5px; color: var(--gray-600); margin-top: 2px; }
.endpoint-desc.danger { color: var(--red); }

.sub-section {
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: 6px; padding: 14px 16px; margin: 12px 0;
}
.sub-section h4 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--gray-600); margin-bottom: 8px;
}

/* CONTRACT BOXES */
.contract-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0;
}
@media(max-width: 700px) { .contract-grid { grid-template-columns: 1fr; } }
.contract-box {
  border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden;
}
.contract-box-header {
  padding: 8px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
}
.contract-box-header.request  { background: #e8f0fc; color: var(--blue); }
.contract-box-header.response { background: var(--green-bg); color: var(--green); }
.contract-box-header.error    { background: var(--red-bg); color: var(--red); }
.contract-box pre.contract-pre,
.contract-box pre {
  margin: 0;
  border-radius: 0;
  background: #1e2329;
}
/* Fundo único no <pre>; imports/HTML antigos podem ter <span> dentro do <code> com fundo claro */
.contract-box pre code,
.contract-box pre code.contract-code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #c9d1d9;
  font-size: 13px;
  line-height: 1.65;
}
.contract-box pre code *,
.contract-box pre code.contract-code * {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* FLOW DIAGRAM */
.flow-diagram {
  display: flex; flex-direction: column;
  align-items: center; gap: 0; padding: 8px 0;
}
.flow-box {
  width: 100%; max-width: 420px;
  border: 2px solid; border-radius: 8px; padding: 16px 20px; text-align: center;
}
.flow-box.team-api    { border-color: var(--blue);  background: var(--blue-light); }
.flow-box.team-app    { border-color: #7c3aed;      background: #f5f3ff; }
.flow-box.team-client { border-color: var(--green); background: var(--green-bg); }
.flow-box .flow-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  border-radius: 20px; padding: 2px 9px; margin-bottom: 6px;
}
.team-api   .flow-tag { background: var(--blue);  color: #fff; }
.team-app   .flow-tag { background: #7c3aed;      color: #fff; }
.team-client .flow-tag { background: var(--green); color: #fff; }
.flow-box .flow-name  { font-size: 14px; font-weight: 800; color: var(--gray-800); margin-bottom: 8px; }
.flow-box .flow-desc  { font-size: 12.5px; color: var(--gray-600); line-height: 1.55; }
.flow-box .flow-badge {
  display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.7); border-radius: 4px;
  padding: 2px 8px; color: var(--gray-600);
}
.flow-arrow {
  display: flex; flex-direction: column;
  align-items: center; padding: 6px 0; gap: 2px; color: var(--gray-400);
}
.flow-arrow span  { font-size: 20px; line-height: 1; }
.flow-arrow label { font-size: 11px; font-weight: 600; color: var(--gray-600); }

/* AUTH HEADER DISPLAY */
.header-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 12px 16px; margin: 6px 0; background: var(--gray-50);
}
.header-key {
  font-family: monospace; font-size: 13px; font-weight: 700;
  color: var(--navy); background: var(--blue-light);
  border: 1px solid var(--blue-mid); padding: 3px 9px; border-radius: 4px;
  white-space: nowrap;
}
.header-required {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--red-bg); color: var(--red);
  border: 1px solid #fca5a5; border-radius: 20px; padding: 2px 9px;
}

/* RESOLUTION CHAIN */
.chain-box {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 8px; padding: 14px 18px; margin: 14px 0;
}
.chain-step {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12.5px; font-weight: 700; color: var(--navy);
  background: var(--blue-light); border: 1px solid var(--blue-mid);
  padding: 5px 12px; border-radius: 5px;
}
.chain-arrow {
  font-size: 16px; color: var(--gray-400); padding: 0 8px; font-weight: 700;
}
.chain-label {
  font-size: 10px; color: var(--gray-600); margin-top: 3px;
  text-align: center; display: block;
}
.chain-item { display: flex; flex-direction: column; align-items: center; }

/* CHECKLIST — ícones Material (template EF de referência) */
.checklist { list-style: none; padding: 0; margin: 6px 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--gray-100);
  font-size: 13.5px; line-height: 1.55;
}
.checklist li:last-child { border-bottom: none; }
.checklist li.checklist-empty-hint {
  color: var(--gray-500);
  font-style: normal;
  display: block;
}
.checklist li.checklist-empty-hint em {
  font-style: italic;
}
.checklist li > .material-symbols-outlined {
  font-size: 17px;
  color: var(--gray-300);
  flex-shrink: 0;
  margin-top: 2px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.checklist li.checklist-item-done > .material-symbols-outlined {
  color: var(--green);
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* REQUISITO FUNCIONAL (cartão RF — template de referência) */
.rf-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.rf-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.rf-badge {
  background: var(--navy);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.rf-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
  flex: 1;
  min-width: 120px;
}
.rf-meta {
  font-size: 11.5px;
  color: var(--gray-600);
  margin-bottom: 10px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.rf-meta > span { display: flex; align-items: center; gap: 4px; }
.rf-meta .material-symbols-outlined { font-size: 15px; color: var(--gray-400); }
.badge-alta  { background: #fde8e8; color: #b91c1c; font-weight: 700; padding: 1px 8px; border-radius: 9999px; font-size: 10px; }
.badge-media { background: #fff3cd; color: #92400e; font-weight: 700; padding: 1px 8px; border-radius: 9999px; font-size: 10px; }
.badge-baixa { background: #e8f5e9; color: #15803d; font-weight: 700; padding: 1px 8px; border-radius: 9999px; font-size: 10px; }
.rf-block > h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 12px;
  margin-bottom: 4px;
}
.rf-block > p { margin-bottom: 8px; line-height: 1.6; }
.rf-block > p:last-of-type { margin-bottom: 0; }
.lgpd-tag { background: #fde8e8; color: #b91c1c; padding: 1px 6px; border-radius: 4px; font-weight: 600; font-size: 10px; }

/* STATUS BADGES */
.badge-blocker { display:inline-flex; align-items:center; gap:4px; background:var(--red-bg); color:var(--red); border:1px solid #fca5a5; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-review  { display:inline-flex; align-items:center; gap:4px; background:var(--orange-bg); color:var(--orange); border:1px solid #fcd34d; border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-pending { display:inline-flex; align-items:center; gap:4px; background:var(--gray-100); color:var(--gray-600); border:1px solid var(--gray-200); border-radius:20px; padding:3px 10px; font-size:11px; font-weight:700; white-space:nowrap; }

/* MONITORING */
.alert-crit { background: var(--red-bg); }
.alert-warn { background: var(--yellow-bg); }
.alert-crit td, .alert-warn td { vertical-align: middle; }

/* SCOPE TABLE */
.out-of-scope td:first-child { color: var(--gray-600); font-style: italic; font-weight: 400; }

/* PRODUCT SCOPE TABLE */
.product-scope-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.product-scope-table thead th {
  background: var(--gray-50); color: var(--gray-600);
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--gray-200);
}
.product-scope-table tbody tr { border-bottom: 1px solid var(--gray-100); }
.product-scope-table tbody tr:last-child { border-bottom: none; }
.product-scope-table tbody tr.in-scope { background: #f0fdf4; }
.product-scope-table tbody tr.out-scope { background: var(--gray-50); }
.product-scope-table tbody tr.in-scope:hover  { background: #dcfce7; }
.product-scope-table tbody tr.out-scope:hover { background: var(--gray-100); }
.product-scope-table tbody td { padding: 11px 14px; vertical-align: middle; line-height: 1.5; }
.product-scope-table tbody td:first-child { font-weight: 600; }
/* Claro: texto escuro nas linhas “no escopo” (contraste sobre fundo menta) */
.product-scope-table tbody tr.in-scope td {
  color: #134d2e;
}
.product-scope-table tbody tr.in-scope td a {
  color: #0369a1;
}
.scope-badge-yes {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-bg); color: var(--green);
  border: 1px solid #86efac; border-radius: 20px;
  padding: 3px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.scope-badge-no {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gray-100); color: var(--gray-600);
  border: 1px solid var(--gray-200); border-radius: 20px;
  padding: 3px 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.processor-tag {
  display: inline-block;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11.5px; font-weight: 600;
  background: var(--blue-light); color: var(--blue);
  border: 1px solid var(--blue-mid);
  padding: 2px 8px; border-radius: 4px;
}
.processor-tag.other {
  background: var(--orange-bg); color: var(--orange);
  border-color: #fcd34d;
}
.processor-tag.na {
  background: var(--gray-100); color: var(--gray-400);
  border-color: var(--gray-200);
}

/* Tema escuro: tabela produto × escopo — legível (sem fundo “claro” + texto claro) */
html[data-theme="dark"] .product-scope-table {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}
html[data-theme="dark"] .product-scope-table thead th {
  background: #0f2844;
  color: #b8d4f0;
  border-bottom-color: #1e4a78;
}
html[data-theme="dark"] .product-scope-table tbody tr {
  border-bottom-color: var(--gray-200);
}
html[data-theme="dark"] .product-scope-table tbody tr.in-scope {
  background: rgba(46, 160, 67, 0.16);
  color: #e6f6ec;
}
html[data-theme="dark"] .product-scope-table tbody tr.in-scope td {
  color: #dff7e8;
}
html[data-theme="dark"] .product-scope-table tbody tr.in-scope td strong,
html[data-theme="dark"] .product-scope-table tbody tr.in-scope td b {
  color: #ffffff;
}
html[data-theme="dark"] .product-scope-table tbody tr.in-scope:hover {
  background: rgba(46, 160, 67, 0.26);
}
html[data-theme="dark"] .product-scope-table tbody tr.out-scope {
  background: var(--gray-100);
}
html[data-theme="dark"] .product-scope-table tbody tr.out-scope td {
  color: #e6edf3;
}
html[data-theme="dark"] .product-scope-table tbody td a {
  color: #79c0ff;
}
html[data-theme="dark"] .product-scope-table tbody td p {
  color: inherit;
  margin: 0;
}
html[data-theme="dark"] .scope-badge-yes {
  background: rgba(46, 160, 67, 0.35);
  color: #c8ffe0;
  border-color: #3fb950;
}
html[data-theme="dark"] .scope-badge-no {
  background: var(--gray-200);
  color: #f0f6fc;
  border-color: var(--gray-300);
}
html[data-theme="dark"] .processor-tag {
  background: rgba(56, 139, 253, 0.2);
  color: #b6e0ff;
  border-color: rgba(88, 166, 255, 0.55);
}
html[data-theme="dark"] .processor-tag.other {
  background: rgba(227, 179, 65, 0.18);
  color: #ffe7a8;
  border-color: rgba(240, 193, 77, 0.5);
}
html[data-theme="dark"] .processor-tag.na {
  background: var(--gray-200);
  color: #e6edf3;
  border-color: var(--gray-300);
}

/*
 * Folha SPEC (A4) no editor ou export: overrides globais do dark para produto×escopo
 * e badges não podem “vencer” o miolo claro — repõe o aspecto do tema claro.
 */
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table {
  border: none;
  border-radius: 0;
  overflow: visible;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table thead th,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table thead th {
  background: var(--gray-50);
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr {
  border-bottom-color: var(--gray-100);
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.in-scope,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.in-scope {
  background: #f0fdf4;
  color: inherit;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.in-scope td,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.in-scope td {
  color: #134d2e;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.in-scope td strong,
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.in-scope td b,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.in-scope td strong,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.in-scope td b {
  color: inherit;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.in-scope:hover,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.in-scope:hover {
  background: #dcfce7;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.out-scope,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.out-scope {
  background: var(--gray-50);
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.out-scope td,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.out-scope td {
  color: inherit;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody tr.out-scope:hover,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody tr.out-scope:hover {
  background: var(--gray-100);
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody td a,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody td a {
  color: #0369a1;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .product-scope-table tbody td p,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .product-scope-table tbody td p {
  color: inherit;
  margin: 0;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .scope-badge-yes,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .scope-badge-yes {
  background: var(--green-bg);
  color: var(--green);
  border-color: #86efac;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .scope-badge-no,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .scope-badge-no {
  background: var(--gray-100);
  color: var(--gray-600);
  border-color: var(--gray-200);
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .processor-tag,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .processor-tag {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue-mid);
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .processor-tag.other,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .processor-tag.other {
  background: var(--orange-bg);
  color: var(--orange);
  border-color: #fcd34d;
}
html[data-theme="dark"] #editor-main.editor-spec-a4 .a4-page .processor-tag.na,
html[data-theme="dark"] body.ef-export-spec-a4 .a4-page .processor-tag.na {
  background: var(--gray-100);
  color: var(--gray-400);
  border-color: var(--gray-200);
}

/* MATRIZ CANAL x FUNCIONALIDADE */
.matriz-cf-wrap { overflow-x: auto; margin: 12px 0; border-radius: 6px; border: 1px solid var(--gray-200); }
.matriz-cf { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.matriz-cf thead th {
  background: var(--navy); color: var(--white);
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  padding: 8px 10px; text-align: center; border: 1px solid var(--navy-dark);
  vertical-align: middle;
}
.matriz-cf thead th.col-canal,
.matriz-cf thead th.col-subsistema,
.matriz-cf thead th.col-perfil {
  text-align: left; background: var(--navy-dark);
}
.matriz-cf tbody td {
  border: 1px solid var(--gray-200);
  padding: 7px 10px; vertical-align: middle; line-height: 1.4;
}
.matriz-cf tbody td.canal-cell { background: var(--gray-50); font-weight: 700; color: var(--navy); white-space: nowrap; }
.matriz-cf tbody td.subsistema-cell { background: var(--white); font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.matriz-cf tbody td.perfil-cell { background: var(--white); color: var(--gray-600); }
.matriz-cf tbody td.cell-status { text-align: center; font-weight: 700; font-size: 13px; }
.matriz-cf tbody td.cell-disponivel     { background: var(--green-bg);  color: var(--green); }
.matriz-cf tbody td.cell-em_dev         { background: var(--yellow-bg); color: var(--orange); }
.matriz-cf tbody td.cell-nao_disponivel { background: var(--red-bg);    color: var(--red); }
.matriz-cf tbody td.cell-nao_aplica     { background: var(--gray-100);  color: var(--gray-400); }
.matriz-cf tbody td.cell-empty          { background: var(--white); }

.matriz-cf-legenda {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--gray-600);
  margin-top: 8px; padding-left: 4px;
}
.matriz-cf-legenda span {
  display: inline-flex; align-items: center; gap: 4px;
}
.matriz-cf-legenda .chip {
  display: inline-block; width: 14px; height: 14px;
  border: 1px solid var(--gray-200); border-radius: 3px;
}
.matriz-cf-legenda .chip.cell-disponivel     { background: var(--green-bg); }
.matriz-cf-legenda .chip.cell-em_dev         { background: var(--yellow-bg); }
.matriz-cf-legenda .chip.cell-nao_disponivel { background: var(--red-bg); }
.matriz-cf-legenda .chip.cell-nao_aplica     { background: var(--gray-100); }

/* Imagens (parágrafo com markdown / bloco Imagem) */
.ef-figure {
  margin: 14px 0;
  text-align: center;
}
.ef-figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
}
.ef-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.4;
  text-align: center;
}
/* Imagens com largura definida: inline-block para fluir lado a lado */
.ef-figure[data-largura] {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 4px;
  margin: 8px 0;
}
/* Quando alinhamento é definido: usa block para que margin:auto funcione */
.ef-figure[data-largura][data-align] {
  display: block;
  padding: 0;
}
/* Linha de imagens lado a lado no documento exportado */
.ef-img-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
  margin: 14px 0;
}
.ef-img-row .ef-figure {
  margin: 0;
  padding: 0 4px;
  box-sizing: border-box;
}
#main .ef-inline-img,
#main img.ef-inline-img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
}

/* ─── Tema escuro azulado (<html data-theme="dark">) — superfícies em azul-petróleo, texto claro ─── */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Fundo do app / canvas (azul bem escuro — não preto puro) */
  --app-canvas-bg: #050a14;
  --navy:       #b8dcff;
  --navy-dark:  #020810;
  --blue:       #4da3ff;
  --blue-light: rgba(77, 163, 255, 0.16);
  --blue-mid:   #1a4a7a;
  --green:      #3dd68d;
  --green-bg:   rgba(61, 214, 141, 0.12);
  /* Verde dos botões (download / nova seção): mesmo tom do status "Concluído" */
  --green-btn:       #22c55e;
  --green-btn-hover: #16a34a;
  --red:        #ff7b72;
  --red-bg:     rgba(255, 123, 114, 0.12);
  --orange:     #e3b341;
  --orange-bg:  rgba(227, 179, 65, 0.12);
  --yellow:     #f0c14d;
  --yellow-bg:  rgba(240, 193, 77, 0.1);
  --gray-50:    #050a12;
  --gray-100:   #0a1524;
  --gray-200:   #1a3f66;
  --gray-300:   #2d5580;
  --gray-400:   #7a9ab8;
  --gray-600:   #9db6d4;
  --gray-800:   #eaf2fc;
  /* “Branco” = superfície de card/toolbar (azul muito escuro), não cor de texto */
  --white:      #0c1828;
  /* Scrollbar no tema escuro (canvas azul-petróleo) */
  --scrollbar-track: rgba(5, 12, 22, 0.92);
  --scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
}
html[data-theme="dark"] body {
  background: var(--app-canvas-bg);
  color: var(--gray-800);
}

/* ═══ Export HTML / preview: SPEC · Material Design 3 na área principal (sidebar clássica) ═══ */
body.ef-export-md3 {
  --md-primary: #0041a2;
  --md-primary-container: #0b57d0;
  --md-primary-fixed: #dae2ff;
  --md-on-primary: #ffffff;
  --md-surface-dim: #d7dade;
  --md-surface-lowest: #ffffff;
  --md-surface-low: #f1f4f7;
  --md-surface-container: #ebeef1;
  --md-outline-variant: #c3c6d6;
  --md-on-surface: #181c1f;
  --md-on-surface-variant: #424654;
  font-family: var(--font-spec);
  font-size: 10pt;
  color: var(--md-on-surface);
  background: var(--md-surface-dim);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body.ef-export-md3 .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}

/* Sidebar do export MD3: mesma família do miolo (documento). */
body.ef-export-md3 #sidebar {
  font-family: var(--font-spec);
}
body.ef-export-md3 #sidebar .nav-sec-emoji {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.92;
}

body.ef-export-md3 #main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  max-width: none;
  padding: 28px 32px 56px;
  background: transparent;
}

body.ef-export-md3 .ef-md3-shell {
  max-width: 920px;
  margin: 0 auto;
}

body.ef-export-md3 .ef-md3-page {
  width: 100%;
  min-height: 200px;
  padding: 48px 52px 40px;
  background: var(--md-surface-lowest);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(24, 28, 31, 0.12);
}

/* Cabeçalho MD3 */
body.ef-export-md3 .md3-doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--md-primary-fixed);
  margin-bottom: 22px;
}
body.ef-export-md3 .md3-doc-wordmark {
  font-size: 9pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--md-on-surface-variant);
}
body.ef-export-md3 .md3-doc-title {
  font-size: 16pt;
  font-weight: 700;
  color: var(--md-primary);
  line-height: 1.2;
  margin: 6px 0 0;
  letter-spacing: -0.02em;
}
body.ef-export-md3 .md3-doc-header-meta {
  text-align: right;
  font-size: 8.5pt;
  color: var(--md-on-surface-variant);
  line-height: 1.75;
  flex-shrink: 0;
}
body.ef-export-md3 .md3-doc-badge {
  display: inline-block;
  background: var(--md-primary-fixed);
  color: var(--md-primary);
  font-size: 7.5pt;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
body.ef-export-md3 .md3-doc-meta-lines strong {
  color: var(--md-on-surface);
  font-weight: 600;
}

body.ef-export-md3 .md3-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 9pt;
}
body.ef-export-md3 .md3-meta-table td {
  border: 1px solid var(--md-outline-variant);
  padding: 8px 12px;
  vertical-align: top;
}
body.ef-export-md3 .md3-meta-table td:first-child {
  background: var(--md-surface-low);
  font-weight: 600;
  color: var(--md-on-surface-variant);
  width: 34%;
  text-transform: uppercase;
  font-size: 7.5pt;
  letter-spacing: 0.07em;
}

body.ef-export-md3 .md3-history-block {
  margin-bottom: 26px;
}
body.ef-export-md3 .md3-history-label {
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  margin-bottom: 8px;
}
body.ef-export-md3 .md3-history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.ef-export-md3 .md3-history-chip {
  display: inline-block;
  background: var(--md-surface-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 10px;
  color: var(--md-on-surface-variant);
  line-height: 1.35;
}
body.ef-export-md3 .md3-history-chip--new {
  background: var(--md-primary-fixed);
  border-color: #93b4ff;
  color: var(--md-primary);
  font-weight: 700;
}

/* Status no cabeçalho (fundo claro) */
body.ef-export-md3 .md3-status-badge {
  display: inline-block;
  vertical-align: baseline;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid transparent;
}
body.ef-export-md3 .md3-status-badge.status-badge--outro {
  background: #eef2f7;
  color: #374151;
  border-color: #d1d5db;
}
body.ef-export-md3 .md3-status-badge.status-badge--rascunho {
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
body.ef-export-md3 .md3-status-badge.status-badge--em-revisao {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}
body.ef-export-md3 .md3-status-badge.status-badge--em-desenvolvimento {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}
body.ef-export-md3 .md3-status-badge.status-badge--em-validacao {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}
body.ef-export-md3 .md3-status-badge.status-badge--concluido {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}
body.ef-export-md3 .md3-status-badge.status-badge--arquivado {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

/* Seções (conteúdo SPEC) */
body.ef-export-md3 .ef-md3-section {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 28px;
}
body.ef-export-md3 .ef-md3-section.new-section {
  padding: 18px 20px;
  background: #f8fafc;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
body.ef-export-md3 .ef-md3-section h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-on-surface-variant);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--md-outline-variant);
}
body.ef-export-md3 .ef-md3-section:first-child h2 {
  margin-top: 0;
}
body.ef-export-md3 .ef-md3-section h2 .md3-sec-icon {
  color: var(--md-primary);
  font-size: 16px;
}
body.ef-export-md3 .ef-md3-section h2 .md3-sec-emoji {
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
}
body.ef-export-md3 .ef-md3-section h2 .sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  background: var(--md-primary-fixed);
  color: var(--md-primary);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
body.ef-export-md3 .ef-md3-section h2 .md3-sec-heading {
  flex: 1 1 160px;
  font-size: 11pt;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--md-on-surface);
}
body.ef-export-md3 .ef-md3-section h2 .new-badge {
  font-size: 9px;
  letter-spacing: 0.06em;
}
body.ef-export-md3 .ef-md3-section h3 {
  font-size: 10pt;
  font-weight: 600;
  color: var(--md-on-surface);
  margin: 16px 0 8px;
}
body.ef-export-md3 .ef-md3-section h4 {
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--md-primary);
  margin: 12px 0 6px;
}

body.ef-export-md3 .ef-md3-page p,
body.ef-export-md3 .ef-md3-page li {
  font-size: 10pt;
  line-height: 1.65;
  color: var(--md-on-surface);
}
body.ef-export-md3 .ef-md3-page code {
  background: var(--md-surface-container);
  color: var(--md-primary-container);
  border: 1px solid var(--md-outline-variant);
}
body.ef-export-md3 .ef-md3-page .contract-box pre code,
body.ef-export-md3 .ef-md3-page .contract-box pre code * {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #c9d1d9 !important;
}

/* Tabelas no miolo MD3 */
body.ef-export-md3 .ef-md3-page .table-wrap {
  border: 1px solid var(--md-outline-variant);
  border-radius: 8px;
  overflow: hidden;
  margin: 14px 0;
}
body.ef-export-md3 .ef-md3-page .table-wrap table thead th {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 8pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-bottom: none;
}
body.ef-export-md3 .ef-md3-page .table-wrap table thead th:first-child {
  border-radius: 0;
}
body.ef-export-md3 .ef-md3-page .table-wrap table tbody tr:nth-child(even) td {
  background: var(--md-surface-low);
}
body.ef-export-md3 .ef-md3-page .table-wrap table tbody td {
  border-color: var(--md-outline-variant);
  font-size: 9.5pt;
}

/* Callouts → tons SPEC */
body.ef-export-md3 .ef-md3-page .callout.info {
  border-left: 3px solid var(--md-primary);
  background: var(--md-primary-fixed);
  color: #001a4d;
  border-radius: 0 8px 8px 0;
}
body.ef-export-md3 .ef-md3-page .callout.warn {
  border-left: 3px solid #f59e0b;
  background: #fff8e1;
  color: #78350f;
}
body.ef-export-md3 .ef-md3-page .callout.danger {
  border-left: 3px solid #ba1a1a;
  background: #ffdad6;
  color: #93000a;
}
body.ef-export-md3 .ef-md3-page .callout.success {
  border-left: 3px solid #22c55e;
  background: #e8f5e9;
  color: #14532d;
}

body.ef-export-md3 .md3-doc-footer {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--md-outline-variant);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 7.5pt;
  color: #737785;
}
body.ef-export-md3 .md3-doc-footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.ef-export-md3 .md3-doc-footer .material-symbols-outlined {
  font-size: 15px;
  opacity: 0.85;
}

/* Blocos de diagrama / Mermaid (HTML cru ou futuros blocos) */
body.ef-export-md3 .ef-md3-page .diagram-block,
body.ef-export-md3 .ef-md3-page pre.mermaid {
  background: var(--md-surface-low);
  border: 1px solid var(--md-outline-variant);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0;
  overflow-x: auto;
}

@media print {
  body.ef-export-md3 .ef-md3-page {
    box-shadow: none;
    border-radius: 0;
  }
}

/* ═══ Export / preview: layout editorial SPEC (A4) — alinhado a refs/EF-2026-01-001-*.html (Inter 10pt, escalas pt) ═══ */
body.ef-export-spec-a4 {
  --primary: #0041a2;
  --primary-container: #0b57d0;
  --primary-fixed: #dae2ff;
  --on-primary: #ffffff;
  --surface-dim: #d7dade;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f4f7;
  --surface-container: #ebeef1;
  --surface-container-high: #e5e8ec;
  --on-surface: #181c1f;
  --on-surface-variant: #424654;
  --outline: #737785;
  --outline-variant: #c3c6d6;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  margin: 0;
  background: var(--surface-dim);
  font-family: var(--font-spec);
  font-size: 10pt;
  color: var(--on-surface);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Material: mesmo vocabulário que refs/EF-*.html — contorno FILL 0, peso 400, cor sólida (sem rgba translúcido) */
body.ef-export-spec-a4 .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  opacity: 1;
  color: var(--on-surface-variant);
}
body.ef-export-spec-a4 h2 .material-symbols-outlined,
body.ef-export-spec-a4 .spec-doc-section h2 .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  color: var(--primary);
  font-size: 15px;
}
body.ef-export-spec-a4 .spec-doc-section h2 .spec-sec-emoji {
  opacity: 1;
  filter: none;
}
body.ef-export-spec-a4 .ef-a4-viewport {
  box-sizing: border-box;
  width: 100%;
  max-width: 920px;
  margin: 32px auto 48px;
  padding: 0 12px;
}
body.ef-export-spec-a4 .a4-page {
  width: 860px;
  max-width: none;
  min-height: 1123px;
  margin: 0 auto;
  padding: 72px 80px;
  /* Mesmos tokens que :root claro — pré-visualização com html[data-theme="dark"] não herda cinzas do tema global */
  --navy: #002f5f;
  --navy-dark: #001e3e;
  --blue: #0057b8;
  --blue-light: #e8f0fc;
  --blue-mid: #ccddf5;
  --green: #1a7f37;
  --green-bg: #dafbe1;
  --red: #c0392b;
  --red-bg: #fde8e6;
  --orange: #9a5700;
  --orange-bg: #fff3cd;
  --yellow: #e6a817;
  --yellow-bg: #fef9e7;
  --gray-50: #f6f8fa;
  --gray-100: #eaeef2;
  --gray-200: #d0d7de;
  --gray-300: #afb8c1;
  --gray-400: #8c959f;
  --gray-600: #57606a;
  --gray-800: #24292f;
  --white: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  background: var(--surface-container-lowest);
  box-shadow: 0 4px 24px rgba(24, 28, 31, 0.12);
  overflow: hidden;
  position: relative;
}
/* Anula o cartão navy legado de `.doc-header` (#main / layout antigo): no A4 vale o ref (branco + linha). */
body.ef-export-spec-a4 .doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 24px;
  padding: 0 0 18px;
  border: none;
  border-bottom: 2px solid var(--primary-fixed);
}
body.ef-export-spec-a4 .doc-header-wordmark {
  font-size: 9pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-surface-variant);
}
body.ef-export-spec-a4 .doc-header-title {
  font-size: 16pt;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  margin-top: 6px;
  letter-spacing: -0.3px;
  max-width: 500px;
}
body.ef-export-spec-a4 .doc-header-meta {
  text-align: right;
  font-size: 8pt;
  color: var(--on-surface-variant);
  line-height: 1.9;
  flex-shrink: 0;
}
body.ef-export-spec-a4 .doc-header-badge {
  display: inline-block;
  background: var(--primary-fixed);
  color: var(--primary);
  font-size: 7.5pt;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
body.ef-export-spec-a4 .meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 9pt;
}
body.ef-export-spec-a4 .meta-table td {
  border: 1px solid var(--outline-variant);
  padding: 7px 12px;
  vertical-align: top;
}
body.ef-export-spec-a4 .meta-table td:first-child {
  background: var(--surface-container-low);
  font-weight: 600;
  color: var(--on-surface-variant);
  width: 30%;
  text-transform: uppercase;
  font-size: 7.5pt;
  letter-spacing: 0.07em;
}
body.ef-export-spec-a4 .spec-doc-section {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
body.ef-export-spec-a4 .spec-doc-section--new {
  padding: 18px 20px;
  background: #f8fafc;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  margin-bottom: 20px;
}
body.ef-export-spec-a4 .spec-doc-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  margin-top: 32px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--outline-variant);
}
body.ef-export-spec-a4 .spec-doc-section:first-child h2 {
  margin-top: 0;
}
body.ef-export-spec-a4 .spec-doc-section h2 .spec-sec-icon {
  font-size: 15px;
  line-height: 1;
}
body.ef-export-spec-a4 .spec-doc-section h2 .spec-sec-heading {
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  color: inherit;
  flex: 1 1 auto;
}
/* h2 direto na página (ex.: histórico), como refs/EF-*.html */
body.ef-export-spec-a4 .a4-page > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-surface-variant);
  margin-top: 32px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--outline-variant);
}
body.ef-export-spec-a4 .spec-doc-section h3 {
  font-size: 9.5pt;
  font-weight: 600;
  color: var(--on-surface);
  margin-top: 18px;
  margin-bottom: 6px;
}
body.ef-export-spec-a4 .spec-doc-section h4 {
  font-size: 9pt;
  font-weight: 600;
  color: var(--primary);
  margin-top: 12px;
  margin-bottom: 4px;
}
body.ef-export-spec-a4 .a4-page p {
  margin-bottom: 8px;
  line-height: 1.65;
}
body.ef-export-spec-a4 .a4-page ul,
body.ef-export-spec-a4 .a4-page ol {
  padding-left: 20px;
  margin-bottom: 10px;
}
body.ef-export-spec-a4 .a4-page li {
  margin-bottom: 4px;
  line-height: 1.55;
}
body.ef-export-spec-a4 .a4-page strong {
  font-weight: 600;
}
/* Título de seção com ** no inlineMd: .a4-page strong usa 600; aqui mantém 700 como o h2. */
body.ef-export-spec-a4 .spec-doc-section h2 .spec-sec-heading strong {
  font-weight: 700;
}
body.ef-export-spec-a4 .a4-page hr {
  border: none;
  border-top: 1px solid var(--outline-variant);
  margin: 20px 0;
}
body.ef-export-spec-a4 .rf-block {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
body.ef-export-spec-a4 .rf-badge {
  background: var(--primary);
  color: var(--on-primary);
  font-size: 7.5pt;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.ef-export-spec-a4 .rf-title { font-size: 10pt; }
body.ef-export-spec-a4 .rf-meta { font-size: 8pt; margin-bottom: 10px; }
body.ef-export-spec-a4 .rf-meta .material-symbols-outlined { font-size: 13px; }
body.ef-export-spec-a4 .rf-block > h4 {
  font-size: 9pt;
  font-weight: 600;
  color: var(--primary);
  margin-top: 10px;
  margin-bottom: 4px;
}
body.ef-export-spec-a4 .badge-alta,
body.ef-export-spec-a4 .badge-media,
body.ef-export-spec-a4 .badge-baixa { font-size: 7.5pt; }
body.ef-export-spec-a4 .checklist { padding-left: 0; margin-left: 0; }
body.ef-export-spec-a4 .checklist li {
  font-size: 9pt;
  padding: 5px 0;
  margin-bottom: 0;
}
body.ef-export-spec-a4 .checklist li > .material-symbols-outlined { font-size: 15px; }
body.ef-export-spec-a4 .table-wrap,
body.ef-export-spec-a4 .content-table {
  width: 100%;
  margin-bottom: 16px;
  font-size: 8.5pt;
}
body.ef-export-spec-a4 .table-wrap table,
body.ef-export-spec-a4 .content-table {
  width: 100%;
  border-collapse: collapse;
}
body.ef-export-spec-a4 .table-wrap thead th,
body.ef-export-spec-a4 .content-table thead th {
  background: var(--primary);
  color: var(--on-primary);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
body.ef-export-spec-a4 .table-wrap thead th:first-child,
body.ef-export-spec-a4 .content-table thead th:first-child {
  border-radius: 6px 0 0 0;
}
body.ef-export-spec-a4 .table-wrap thead th:last-child,
body.ef-export-spec-a4 .content-table thead th:last-child {
  border-radius: 0 6px 0 0;
}
body.ef-export-spec-a4 .table-wrap tbody tr:nth-child(even) td,
body.ef-export-spec-a4 .content-table tbody tr:nth-child(even) td {
  background: var(--surface-container-low);
}
body.ef-export-spec-a4 .table-wrap tbody td,
body.ef-export-spec-a4 .content-table tbody td {
  border: 1px solid var(--outline-variant);
  border-top: none;
  padding: 7px 12px;
  vertical-align: top;
  color: var(--on-surface);
}
body.ef-export-spec-a4 .callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 12px 0;
  font-size: 9pt;
  line-height: 1.55;
}
body.ef-export-spec-a4 .callout .callout-body {
  flex: 1;
  min-width: 0;
}
body.ef-export-spec-a4 .callout.info,
body.ef-export-spec-a4 .callout.callout-info {
  background: var(--primary-fixed);
  border-left: 3px solid var(--primary);
  color: #001a4d;
}
body.ef-export-spec-a4 .callout.warn,
body.ef-export-spec-a4 .callout.callout-warning {
  background: #fff8e1;
  border-left: 3px solid #f59e0b;
  color: #78350f;
}
body.ef-export-spec-a4 .callout.danger,
body.ef-export-spec-a4 .callout.callout-error {
  background: var(--error-container);
  border-left: 3px solid var(--error);
  color: var(--on-error-container);
}
body.ef-export-spec-a4 .callout.success,
body.ef-export-spec-a4 .callout.callout-check {
  background: #e8f5e9;
  border-left: 3px solid #22c55e;
  color: #14532d;
}
body.ef-export-spec-a4 .callout .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
body.ef-export-spec-a4 .callout.info .material-symbols-outlined,
body.ef-export-spec-a4 .callout.callout-info .material-symbols-outlined {
  color: var(--primary);
}
body.ef-export-spec-a4 .callout.warn .material-symbols-outlined,
body.ef-export-spec-a4 .callout.callout-warning .material-symbols-outlined {
  color: #f59e0b;
}
body.ef-export-spec-a4 .callout.danger .material-symbols-outlined,
body.ef-export-spec-a4 .callout.callout-error .material-symbols-outlined {
  color: var(--error);
}
body.ef-export-spec-a4 .callout.success .material-symbols-outlined,
body.ef-export-spec-a4 .callout.callout-check .material-symbols-outlined {
  color: #22c55e;
}
body.ef-export-spec-a4 .a4-page code {
  background: var(--surface-container-high);
  color: var(--primary-container);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 8.5pt;
}
body.ef-export-spec-a4 .contract-box pre code,
body.ef-export-spec-a4 .contract-box pre code * {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: var(--on-surface) !important;
}
body.ef-export-spec-a4 .diagram-block,
body.ef-export-spec-a4 pre.mermaid {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  padding: 20px;
  margin: 14px 0;
  overflow-x: auto;
}
body.ef-export-spec-a4 .diagram-caption {
  font-size: 8pt;
  color: var(--on-surface-variant);
  font-style: italic;
  margin-top: 10px;
  text-align: center;
}
body.ef-export-spec-a4 .lgpd-tag {
  font-size: 7.5pt;
}
body.ef-export-spec-a4 .pendente {
  background: #dae2ff;
  color: #0041a2;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
body.ef-export-spec-a4 .doc-footer {
  margin-top: 48px;
  padding-top: 14px;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7.5pt;
  color: var(--outline);
}
body.ef-export-spec-a4 .doc-footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.ef-export-spec-a4 .doc-footer-left .material-symbols-outlined {
  font-size: 13px;
  color: var(--primary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Pré-visualização em tema escuro: fundo no tom mais escuro do degradê; folha branca */
html[data-theme="dark"] body.ef-export-spec-a4 {
  --surface-dim: var(--app-canvas-bg);
  background: var(--app-canvas-bg);
  color: #181c1f;
}

@media print {
  body.ef-export-spec-a4 {
    background: white !important;
  }
  html[data-theme="dark"] body.ef-export-spec-a4 {
    background: white !important;
    color: #181c1f !important;
  }
  html[data-theme="dark"] body.ef-export-spec-a4 .a4-page {
    background: white !important;
    color: #181c1f !important;
    border: none !important;
    box-shadow: none !important;
  }
  body.ef-export-spec-a4 .ef-a4-viewport {
    width: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.ef-export-spec-a4 .a4-page {
    margin: 0;
    box-shadow: none;
    min-height: auto;
    transform: none !important;
  }
}