/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 30 2026 | 18:19:21 */
/* ============================================================================
   cp-pages-painel-editorial-guia.css — prefixo cp-peg-
   Guia de uso do Painel Editorial (/painel-editorial-guia/), ajuda INTERNA
   do time que publica no Em Pauta.

   Documento, nao painel: coluna unica de leitura, sem KPI nem tabela densa.
   Por isso nao reusa cp-pages-painel.css (prefixo cp-pnl-), que e' desenhado
   pra grade de metricas.

   Paleta ancorada no amarelo da marca. O amarelo cheio (#F7D44A) so em
   superficie; em texto vai o rebaixado (#8a6d05), que passa em contraste
   sobre fundo claro.
   ========================================================================= */

/* ── Tokens locais ───────────────────────────────────────────────────── */
.cp-ds .cp-peg-hero,
.cp-ds .cp-peg-sec {
  --peg-ink: #1a1a1a;
  --peg-soft: #55524a;
  --peg-faint: #8a867a;
  --peg-line: #ddd9cd;
  --peg-line-soft: #e9e6dc;
  --peg-surface: #ffffff;
  --peg-surface-alt: #efeee8;
  --peg-accent: #8a6d05;
  --peg-accent-face: #f7d44a;
  --peg-alert: #9c2b1e;
  --peg-alert-bg: #f6e7e4;
}

/* ── Secoes: breakout obrigatorio (CLAUDE.md §4) ─────────────────────── */
.cp-ds .cp-peg-hero,
.cp-ds .cp-peg-sec {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #f7f6f2;
  padding: 0 24px !important;
}
.cp-ds .cp-peg-hero { padding-top: 52px !important; padding-bottom: 30px !important; }
.cp-ds .cp-peg-sec { padding-top: 34px !important; padding-bottom: 34px !important; }
.cp-ds .cp-peg-sec-last { padding-bottom: 72px !important; }

/* UM container por secao, nunca `.cp-peg-sec > *`. Centralizar cada filho
   direto nao funciona aqui: p/ul/tabela declaram `margin` SHORTHAND com
   !important (obrigatorio contra o BuddyBoss, CLAUDE.md §1), e o shorthand
   zera o `auto` das laterais. O sintoma era titulo de secao centrado com o
   paragrafo colado na borda esquerda. */
.cp-ds .cp-peg-hero-in,
.cp-ds .cp-peg-in { max-width: 820px; margin-left: auto !important; margin-right: auto !important; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.cp-ds .cp-peg-hero-in { border-bottom: 2px solid var(--peg-ink); padding-bottom: 30px !important; }
.cp-ds .cp-peg-eyebrow {
  font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .18em;
  text-transform: uppercase; color: var(--peg-faint) !important;
  margin: 0 0 16px 0 !important; line-height: 1.4 !important;
}
.cp-ds h1.cp-peg-h1 {
  font-size: 40px !important; font-weight: 800 !important; line-height: 1.1 !important;
  letter-spacing: -.02em; color: var(--peg-ink) !important; margin: 0 0 16px 0 !important;
}
.cp-ds .cp-peg-standfirst {
  font-size: 17px !important; line-height: 1.55 !important; color: var(--peg-soft) !important;
  margin: 0 !important; max-width: 62ch;
}
.cp-ds .cp-peg-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px;
}
.cp-ds .cp-peg-meta-item {
  font-size: 12.5px !important; color: var(--peg-faint) !important; line-height: 1.4 !important;
}
.cp-ds a.cp-peg-back, .cp-ds a.cp-peg-back:visited {
  font-size: 13.5px !important; font-weight: 700 !important; color: var(--peg-accent) !important;
  text-decoration: none !important; line-height: 1.4 !important;
}
.cp-ds a.cp-peg-back:hover { text-decoration: underline !important; }

/* ── Cabecalho de secao ──────────────────────────────────────────────── */
.cp-ds .cp-peg-sechead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.cp-ds .cp-peg-secnum {
  font-size: 14px !important; font-weight: 700 !important; color: var(--peg-accent) !important;
  font-variant-numeric: tabular-nums; flex: none; line-height: 1.4 !important;
}
.cp-ds h2.cp-peg-h2 {
  font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.02em;
  line-height: 1.22 !important; color: var(--peg-ink) !important; margin: 0 !important;
}
.cp-ds h3.cp-peg-h3 {
  font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: -.01em;
  color: var(--peg-ink) !important; margin: 26px 0 8px 0 !important; line-height: 1.35 !important;
}

/* ── Texto ───────────────────────────────────────────────────────────── */
.cp-ds p.cp-peg-p {
  font-size: 15.5px !important; line-height: 1.62 !important; color: var(--peg-ink) !important;
  margin: 0 0 13px 0 !important; max-width: 66ch;
}
.cp-ds p.cp-peg-p:last-child { margin-bottom: 0 !important; }
.cp-ds p.cp-peg-lead { color: var(--peg-soft) !important; }
.cp-ds .cp-peg-soft { color: var(--peg-soft) !important; }
.cp-ds ul.cp-peg-list { margin: 12px 0 14px 0 !important; padding-left: 20px !important; max-width: 66ch; }
.cp-ds ul.cp-peg-list li {
  font-size: 15.5px !important; line-height: 1.6 !important; color: var(--peg-ink) !important;
  margin: 0 0 8px 0 !important;
}
.cp-ds .cp-peg-dont li strong { color: var(--peg-alert) !important; }
.cp-ds code.cp-peg-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px !important; background: var(--peg-surface-alt);
  border: 1px solid var(--peg-line-soft); border-radius: 4px; padding: 1px 5px !important;
  color: var(--peg-ink) !important;
}

/* ── Tabelas ─────────────────────────────────────────────────────────── */
.cp-ds .cp-peg-tablewrap { overflow-x: auto; margin: 16px 0 !important; }
.cp-ds table.cp-peg-table { border-collapse: collapse; width: 100%; margin: 0 !important; }
.cp-ds table.cp-peg-table th {
  text-align: left; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .1em;
  text-transform: uppercase; color: var(--peg-faint) !important;
  padding: 0 14px 8px 0 !important; border-bottom: 1px solid var(--peg-line); white-space: nowrap;
}
.cp-ds table.cp-peg-table td {
  font-size: 14.5px !important; line-height: 1.5 !important; color: var(--peg-ink) !important;
  padding: 10px 14px 10px 0 !important; border-bottom: 1px solid var(--peg-line-soft);
  vertical-align: top;
}
.cp-ds table.cp-peg-table tr:last-child td { border-bottom: 0; }
.cp-ds .cp-peg-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ds .cp-peg-syntax td:first-child { white-space: nowrap; padding-right: 20px !important; }

.cp-ds .cp-peg-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700 !important; }
.cp-ds .cp-peg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }

/* ── Barras de recorte ───────────────────────────────────────────────── */
.cp-ds .cp-peg-bar { display: inline-flex; align-items: center; gap: 10px; min-width: 180px; width: 100%; }
.cp-ds .cp-peg-bar-track {
  flex: 1; height: 9px; border-radius: 5px; background: var(--peg-surface-alt);
  border: 1px solid var(--peg-line-soft); overflow: hidden; display: block;
}
.cp-ds .cp-peg-bar-fill { height: 100%; background: var(--peg-accent-face); display: block; }
.cp-ds .cp-peg-bar-thin { background: var(--peg-alert); }
.cp-ds .cp-peg-bar-num {
  font-size: 12.5px !important; color: var(--peg-soft) !important; font-variant-numeric: tabular-nums;
  line-height: 1.4 !important;
}

/* ── Fluxo ───────────────────────────────────────────────────────────── */
.cp-ds .cp-peg-flow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 !important; }
.cp-ds .cp-peg-stage {
  flex: 1 1 150px; background: var(--peg-surface); border: 1px solid var(--peg-line);
  border-radius: 8px; padding: 13px 15px !important;
}
.cp-ds .cp-peg-stage-live { border-color: var(--peg-accent-face); box-shadow: inset 3px 0 0 var(--peg-accent-face); }
.cp-ds .cp-peg-stage-name {
  font-size: 14.5px !important; font-weight: 700 !important; color: var(--peg-ink) !important;
  margin: 0 0 3px 0 !important; line-height: 1.35 !important;
}
.cp-ds .cp-peg-stage-desc {
  font-size: 13px !important; line-height: 1.45 !important; color: var(--peg-soft) !important;
  margin: 0 !important;
}

/* ── Area segura ─────────────────────────────────────────────────────── */
.cp-ds .cp-peg-safe {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px);
  gap: 24px; align-items: center; margin: 20px 0 !important;
}
.cp-ds .cp-peg-svg { width: 100%; height: auto; display: block; }
.cp-ds .cp-peg-figcap {
  font-size: 12.5px !important; color: var(--peg-faint) !important; margin: 8px 0 0 0 !important;
  line-height: 1.4 !important;
}

/* ── Callouts ────────────────────────────────────────────────────────── */
.cp-ds .cp-peg-rule {
  background: var(--peg-surface); border: 1px solid var(--peg-line);
  border-left: 4px solid var(--peg-accent-face); border-radius: 0 8px 8px 0;
  padding: 18px 20px !important; margin: 20px 0 !important; max-width: 66ch;
}
.cp-ds .cp-peg-rule-label {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em;
  text-transform: uppercase; color: var(--peg-accent) !important;
  margin: 0 0 7px 0 !important; line-height: 1.4 !important;
}
.cp-ds .cp-peg-note {
  background: var(--peg-alert-bg); border: 1px solid rgba(156, 43, 30, .28);
  border-radius: 8px; padding: 15px 17px !important; margin: 18px 0 !important; max-width: 66ch;
}
.cp-ds .cp-peg-note-label {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em;
  text-transform: uppercase; color: var(--peg-alert) !important;
  margin: 0 0 6px 0 !important; line-height: 1.4 !important;
}

/* ── Checklist ───────────────────────────────────────────────────────── */
.cp-ds ul.cp-peg-check { list-style: none; margin: 14px 0 0 0 !important; padding: 0 !important; max-width: 66ch; }
.cp-ds ul.cp-peg-check li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15.5px !important; line-height: 1.55 !important; color: var(--peg-ink) !important;
  padding: 10px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--peg-line-soft);
}
.cp-ds ul.cp-peg-check li:last-child { border-bottom: 0; }
.cp-ds .cp-peg-box {
  flex: none; width: 15px; height: 15px; margin-top: 4px;
  border: 1.5px solid var(--peg-faint); border-radius: 3px; display: block;
}

/* ── Rodape ──────────────────────────────────────────────────────────── */
.cp-ds .cp-peg-foot { margin-top: 30px !important; }
.cp-ds a.cp-peg-btn, .cp-ds a.cp-peg-btn:visited {
  display: inline-block; background: var(--peg-accent-face); color: #1a1a1a !important;
  font-size: 14.5px !important; font-weight: 700 !important; text-decoration: none !important;
  padding: 11px 20px !important; border-radius: 8px; line-height: 1.3 !important;
}
.cp-ds a.cp-peg-btn:hover { filter: brightness(.94); }

/* ── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cp-ds h1.cp-peg-h1 { font-size: 30px !important; }
  .cp-ds h2.cp-peg-h2 { font-size: 20px !important; }
  .cp-ds .cp-peg-safe { grid-template-columns: 1fr; }
  .cp-ds .cp-peg-hero { padding-top: 34px !important; }
}
@media (max-width: 480px) {
  .cp-ds h1.cp-peg-h1 { font-size: 26px !important; }
  .cp-ds .cp-peg-stage { flex: 1 1 100%; }
  .cp-ds p.cp-peg-p, .cp-ds ul.cp-peg-list li { font-size: 15px !important; }
}