/* =====================================================================
   PADRÃO OFICIAL DE RELATÓRIOS CENA
   Documento corporativo, não tela de aplicativo: linhas finas, sem
   sombras, cantos retos, azul institucional predominante e dourado
   apenas como destaque.

   Escopo: tudo vive sob .cena-rel, para não vazar para o app.
   Layouts: .cena-rel-page--executive (capa) e --detail (analíticas).
   ===================================================================== */

.cena-rel {
  /* ---- azul institucional ---- */
  --cena-navy: #173955;
  --cena-navy-dark: #102b42;
  --cena-navy-soft: #244c68;
  --cena-blue-muted: #dce6ed;

  /* ---- dourado: destaque, nunca protagonista ---- */
  --cena-gold: #c97820;
  --cena-gold-dark: #a85f12;
  --cena-gold-light: #f7e6cf;

  /* ---- azul secundário ---- */
  --cena-blue-soft: #eef4f7;

  /* ---- neutros quentes ---- */
  --cena-white: #ffffff;
  --cena-offwhite: #faf9f7;
  --cena-gray-50: #faf9f7;
  --cena-gray-100: #f4f2ee;
  --cena-gray-200: #e5e1db;
  --cena-gray-300: #d5d2cc;
  --cena-gray-500: #7a7a75;
  --cena-gray-700: #464a4d;
  --cena-gray-900: #17212a;

  /* ---- semânticos ---- */
  --cena-success: #3f8f74;
  --cena-success-bg: #e5f3ed;
  --cena-warning: #c97820;
  --cena-warning-bg: #f8e9d5;
  --cena-danger: #a94a45;
  --cena-danger-bg: #f7e5e3;
  --cena-info: #48738f;
  --cena-info-bg: #e6eff4;
  --cena-neutral-bg: #eeecE7;
  --report-border: var(--cena-gray-200);

  --report-font: "Montserrat", Arial, Helvetica, sans-serif;

  /* A4 horizontal: 297×210mm com 0 de margem interna — a folga é do @page */
  --page-w: 297mm;
  --page-h: 210mm;
}

.cena-rel, .cena-rel * { box-sizing: border-box; }
/* O app fixa a fonte em h1/h2/h3 e regra direta vence herança: o relatório
   precisa declarar a própria tipografia nos elementos, não só no container. */
.cena-rel,
.cena-rel h1, .cena-rel h2, .cena-rel h3, .cena-rel h4, .cena-rel h5, .cena-rel h6,
.cena-rel p, .cena-rel span, .cena-rel b, .cena-rel strong, .cena-rel small, .cena-rel em,
.cena-rel th, .cena-rel td, .cena-rel dt, .cena-rel dd, .cena-rel li, .cena-rel button {
  font-family: var(--report-font);
}
.cena-rel h1, .cena-rel h2, .cena-rel h3, .cena-rel h4, .cena-rel h5,
.cena-rel p, .cena-rel dl, .cena-rel dd, .cena-rel ul, .cena-rel table { margin: 0; }
.cena-rel {
  background: var(--cena-gray-100);
  color: var(--cena-gray-900);
  padding: 16px;
  font: 400 11px/1.45 var(--report-font);
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   PÁGINA
   ===================================================================== */
.cena-rel-page {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  min-height: var(--page-h);
  margin: 0 auto;
  background: var(--cena-white);
  border: 1px solid var(--cena-gray-200);
  overflow: hidden;
}
.cena-rel-page + .cena-rel-page { margin-top: 18px; }

/* ---------------------------------------------------------------------
   LAYOUT 1 — EXECUTIVE (capa)
   --------------------------------------------------------------------- */
.cena-rel-page--executive { display: grid; grid-template-columns: 62mm 1fr; }

.cena-rel-side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 13mm 9mm 9mm;
  background: var(--cena-navy);
  color: var(--cena-white);
  overflow: hidden;
}
/* aspect-ratio da arte oficial (1346×564): reserva a altura antes de a
   imagem carregar, senão a página se mede menor do que vai ficar */
.cena-rel-side-logo { width: 34mm; height: auto; aspect-ratio: 1346 / 564; margin-bottom: 11mm; }
.cena-rel-side-rule { height: 1px; background: rgba(255, 255, 255, .22); margin: 0 0 6mm; }
.cena-rel-side-item { margin-bottom: 6mm; }
.cena-rel-side-label {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cena-gold);
}
.cena-rel-side-value {
  margin-top: 2.5mm;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.cena-rel-side-value small { display: block; font-size: 9px; font-weight: 400; color: #b7c8d6; }
.cena-rel-side-foot {
  margin-top: auto;
  position: relative;
  z-index: 1;
  font-size: 8px;
  line-height: 1.7;
  color: #9fb3c4;
}
/* marca d'água discreta no pé da sidebar, como na referência */
.cena-rel-side-mark {
  position: absolute;
  left: -6mm; right: -6mm; bottom: -4mm;
  height: 40mm;
  opacity: .1;
  pointer-events: none;
}

.cena-rel-main { padding: 11mm 11mm 9mm; background: var(--cena-gray-50); display: flex; flex-direction: column; }

/* ---------------------------------------------------------------------
   LAYOUT 2 — DETAIL (analíticas)
   --------------------------------------------------------------------- */
.cena-rel-page--detail { padding: 11mm 12mm 13mm; background: var(--cena-white); }
.cena-rel-detail-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14mm;
  margin-bottom: 6mm;
}
.cena-rel-detail-logo { width: 30mm; height: auto; aspect-ratio: 1346 / 564; }

/* =====================================================================
   CABEÇALHO EDITORIAL
   ===================================================================== */
.cena-rel-eyebrow {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cena-gold);
}
.cena-rel-title {
  margin-top: 2.5mm;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.08;
  color: var(--cena-navy);
}
.cena-rel-page--detail .cena-rel-title { font-size: 21px; }
.cena-rel-lead {
  margin-top: 2.5mm;
  max-width: 118mm;
  font-size: 9.5px;
  color: var(--cena-gray-500);
}
.cena-rel-meta { text-align: right; font-size: 8.5px; line-height: 1.75; color: var(--cena-gray-500); }
.cena-rel-meta b { color: var(--cena-gray-700); font-weight: 600; }

/* destaque emoldurado do canto superior direito (capa) */
.cena-rel-headline-box {
  flex: 0 0 auto;
  min-width: 48mm;
  padding: 4mm 6mm;
  border: 1px solid var(--cena-gold);
  background: var(--cena-white);
  text-align: center;
}
.cena-rel-headline-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--cena-navy);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cena-rel-headline-value small { font-size: 11px; font-weight: 400; color: var(--cena-gray-500); }
.cena-rel-headline-sub { font-size: 9px; color: var(--cena-gray-700); }
.cena-rel-headline-label {
  margin-top: 2mm;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cena-gray-500);
}
.cena-rel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8mm; }

/* =====================================================================
   KPIs — faixa contínua, sem cartão arredondado
   ===================================================================== */
.cena-rel-kpis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--cena-gray-200);
  background: var(--cena-white);
  margin-top: 6mm;
}
.cena-rel-kpis--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr)); }
.cena-rel-kpi { position: relative; padding: 3.5mm 4mm; border-right: 1px solid var(--cena-gray-200); }
.cena-rel-kpi:last-child { border-right: 0; }
.cena-rel-kpi--accent::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--cena-gold);
}
.cena-rel-kpi-label {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cena-gray-500);
  line-height: 1.35;
}
.cena-rel-kpi-value {
  margin-top: 1.8mm;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--cena-navy);
  font-variant-numeric: tabular-nums;
}
.cena-rel-kpi-value small { font-size: 10px; font-weight: 500; }
.cena-rel-kpi-detail { margin-top: 1mm; font-size: 8px; color: var(--cena-gray-500); }
.cena-rel-kpi-value--gold { color: var(--cena-gold); }
.cena-rel-kpi-value--success { color: var(--cena-success); }

/* pílulas de resumo do topo das páginas detail */
.cena-rel-chips { display: flex; flex-wrap: wrap; gap: 2mm; margin-top: 5mm; }
.cena-rel-chip {
  padding: 1.6mm 3.2mm;
  border: 1px solid var(--cena-gray-200);
  background: var(--cena-white);
  font-size: 8.5px;
  color: var(--cena-gray-700);
}
.cena-rel-chip b { color: var(--cena-navy); font-weight: 600; }

/* =====================================================================
   PAINÉIS E GRADE DA CAPA
   ===================================================================== */
.cena-rel-grid { display: grid; gap: 4mm; margin-top: 5mm; }
/* na capa as duas faixas de painéis dividem a sobra, em vez de deixar
   um vazio no pé da página */
.cena-rel-main > .cena-rel-grid { flex: 1 1 auto; }
.cena-rel-grid--2 { grid-template-columns: 1fr 1fr; }
.cena-rel-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cena-rel-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cena-gray-200);
  background: var(--cena-white);
  padding: 4mm 4.5mm;
  min-width: 0;
}
.cena-rel-panel-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--cena-navy);
  margin-bottom: 3.5mm;
}
.cena-rel-panel-note { margin-top: 3mm; font-size: 8px; color: var(--cena-gray-500); line-height: 1.6; }
/* margin-top auto: a faixa fica colada no pé do painel mesmo quando ele
   estica para preencher a página */
.cena-rel-panel-strip {
  margin: auto -4.5mm -4mm;
  padding: 2.5mm 4.5mm;
  background: var(--cena-gold-light);
  border-top: 1px solid var(--cena-gray-200);
  font-size: 8.5px;
  color: var(--cena-gray-700);
}
.cena-rel-panel-strip b { color: var(--cena-navy); font-weight: 600; }

/* =====================================================================
   SEÇÕES NUMERADAS (detail)
   ===================================================================== */
.cena-rel-section { margin-top: 7mm; }
.cena-rel-section:first-child { margin-top: 0; }
.cena-rel-section-head {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  padding-bottom: 2mm;
  border-bottom: 1.5px solid var(--cena-navy);
}
.cena-rel-section-num { font-size: 12px; font-weight: 700; color: var(--cena-navy); }
.cena-rel-section-title { font-size: 12px; font-weight: 600; color: var(--cena-navy); }
.cena-rel-section-desc { margin-top: 2.5mm; font-size: 9px; color: var(--cena-gray-500); max-width: 175mm; }
.cena-rel-section-caption {
  margin-top: 3mm;
  font-size: 9px;
  font-weight: 600;
  color: var(--cena-gray-700);
}
.cena-rel-section-caption span { font-weight: 400; color: var(--cena-gray-500); }

/* =====================================================================
   TABELAS — o componente mais importante
   ===================================================================== */
.cena-rel-table-wrap { margin-top: 2.5mm; overflow-x: auto; }
.cena-rel-table { width: 100%; border-collapse: collapse; font-size: 8.5px; }
.cena-rel-table thead th {
  padding: 2mm 2.2mm;
  background: var(--cena-navy);
  color: var(--cena-white);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
  border-right: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}
.cena-rel-table thead th:last-child { border-right: 0; }
.cena-rel-table tbody td {
  padding: 1.9mm 2.2mm;
  border-bottom: 1px solid var(--cena-gray-200);
  color: var(--cena-gray-700);
  vertical-align: top;
}
.cena-rel-table tbody tr:nth-child(even) td { background: var(--cena-gray-50); }
.cena-rel-table tbody tr { break-inside: avoid; }

.cena-rel-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cena-rel-table .center { text-align: center; }
.cena-rel-table .key { color: var(--cena-navy); font-weight: 600; }
.cena-rel-table .muted { color: var(--cena-gray-500); }
.cena-rel-table .wrap { white-space: normal; overflow-wrap: anywhere; min-width: 24mm; max-width: 44mm; }

/* total em azul, subtotal em dourado claro — como na referência */
.cena-rel-table tfoot td,
.cena-rel-table tr.total td {
  padding: 2.2mm;
  background: var(--cena-navy);
  color: var(--cena-white);
  font-weight: 600;
  border-bottom: 0;
}
.cena-rel-table tr.subtotal td {
  padding: 2.2mm;
  background: var(--cena-gold-light);
  border-top: 1px solid var(--cena-gold);
  border-bottom: 0;
  color: var(--cena-navy);
  font-weight: 600;
}
.cena-rel-table-empty {
  padding: 8mm;
  text-align: center;
  font-size: 9px;
  color: var(--cena-gray-500);
  border: 1px dashed var(--cena-gray-200);
  background: var(--cena-gray-50);
}

/* tabela compacta usada dentro dos painéis da capa */
.cena-rel-table--mini { font-size: 8px; }
.cena-rel-table--mini thead th { padding: 1.5mm 1.8mm; font-size: 6.5px; background: var(--cena-white); color: var(--cena-gray-500); border-right: 0; border-bottom: 1px solid var(--cena-gray-200); }
.cena-rel-table--mini tbody td { padding: 1.6mm 1.8mm; }
.cena-rel-table--mini tbody tr:nth-child(even) td { background: transparent; }

/* =====================================================================
   STATUS — discreto, nunca botão
   ===================================================================== */
.cena-rel-status {
  display: inline-block;
  padding: .8mm 2mm;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--cena-neutral-bg);
  color: var(--cena-gray-700);
}
.cena-rel-status--success { background: var(--cena-success-bg); color: var(--cena-success); }
.cena-rel-status--warning { background: var(--cena-warning-bg); color: var(--cena-warning); }
.cena-rel-status--danger { background: var(--cena-danger-bg); color: var(--cena-danger); }
.cena-rel-status--info { background: var(--cena-info-bg); color: var(--cena-info); }

/* =====================================================================
   PREMISSAS DA SIMULAÇÃO
   ===================================================================== */
.cena-rel-assumps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2mm; margin-top: 2.5mm; }
.cena-rel-assump { padding: 2.6mm 3.2mm; background: var(--cena-gray-50); border: 1px solid var(--report-border); }
.cena-rel-assump-label {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cena-gray-500);
}
.cena-rel-assump-value {
  margin-top: 1mm;
  font-size: 11px;
  font-weight: 700;
  color: var(--cena-navy);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   RANKING — barras horizontais
   ===================================================================== */
.cena-rel-hbars { margin-top: 1.5mm; }
.cena-rel-hbar { display: grid; grid-template-columns: 34mm 1fr 17mm; align-items: center; gap: 2.5mm; padding: 1.1mm 0; }
.cena-rel-hbar + .cena-rel-hbar { border-top: 1px solid var(--cena-gray-100); }
.cena-rel-hbar-label { font-size: 8px; font-weight: 600; color: var(--cena-gray-700); overflow-wrap: anywhere; }
.cena-rel-hbar-label small { display: block; font-size: 6.5px; font-weight: 400; color: var(--cena-gray-500); }
.cena-rel-hbar-track { height: 2.8mm; background: var(--cena-gray-100); }
.cena-rel-hbar-fill { display: block; height: 100%; background: var(--cena-navy); }
.cena-rel-hbar-fill.gold { background: var(--cena-gold); }
.cena-rel-hbar-fill.muted { background: var(--cena-gray-300); }
.cena-rel-hbar-value { font-size: 8px; font-weight: 600; color: var(--cena-navy); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =====================================================================
   CARTÃO DE PERMUTANTE — discreto, documento e não CRM
   ===================================================================== */
.cena-rel-perms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5mm; margin-top: 2.5mm; }
.cena-rel-perm { padding: 3mm 3.5mm; border: 1px solid var(--report-border); background: var(--cena-white); min-width: 0; }
.cena-rel-perm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 3mm; }
.cena-rel-perm-nome { font-size: 9.5px; font-weight: 700; color: var(--cena-navy); overflow-wrap: anywhere; }
.cena-rel-perm-linha { display: flex; justify-content: space-between; gap: 3mm; margin-top: 1.6mm; font-size: 8px; }
.cena-rel-perm-linha span { color: var(--cena-gray-500); }
.cena-rel-perm-linha b { color: var(--cena-gray-700); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cena-rel-perm-ult { margin-top: 2mm; padding-top: 2mm; border-top: 1px solid var(--cena-gray-100); font-size: 8px; color: var(--cena-gray-700); line-height: 1.5; }
.cena-rel-perm-ult time { font-weight: 700; color: var(--cena-gray-500); margin-right: 1.5mm; }

/* =====================================================================
   NOTA INTERPRETATIVA
   ===================================================================== */
.cena-rel-note {
  margin-top: 3.5mm;
  padding: 3mm 4mm;
  background: var(--cena-gray-50);
  border-left: 2.5px solid var(--cena-gold);
  font-size: 8.5px;
  line-height: 1.65;
  color: var(--cena-gray-700);
}
.cena-rel-note b { color: var(--cena-navy); font-weight: 600; }
.cena-rel-note p + p { margin-top: 1.8mm; }

/* =====================================================================
   MÉTRICAS E PROGRESSO
   ===================================================================== */
.cena-rel-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 3mm; padding: 1.3mm 0; }
.cena-rel-metric + .cena-rel-metric { border-top: 1px solid var(--cena-gray-200); }
.cena-rel-metric-label { font-size: 8.5px; color: var(--cena-gray-500); }
.cena-rel-metric-value { font-size: 10px; font-weight: 600; color: var(--cena-navy); font-variant-numeric: tabular-nums; }

.cena-rel-progress { margin-top: 2mm; }
.cena-rel-progress-track { height: 2mm; background: var(--cena-gray-200); overflow: hidden; }
.cena-rel-progress-fill { display: block; height: 100%; background: var(--cena-navy); }
.cena-rel-progress-fill--gold { background: var(--cena-gold); }
.cena-rel-progress-legend {
  display: flex; justify-content: space-between; margin-top: 1.2mm;
  font-size: 7.5px; color: var(--cena-gray-500);
}

/* =====================================================================
   GRÁFICOS (SVG puro — sem biblioteca)
   ===================================================================== */
.cena-rel-chart { display: flex; align-items: center; gap: 4mm; min-width: 0; }
.cena-rel-chart svg { flex: 0 0 auto; }
.cena-rel-chart-side { flex: 1; min-width: 0; }
.cena-rel-legend { font-size: 8px; }
.cena-rel-legend-row { display: grid; grid-template-columns: 3mm 1fr auto auto; align-items: center; gap: 2mm; padding: 1.4mm 0; }
.cena-rel-legend-row + .cena-rel-legend-row { border-top: 1px solid var(--cena-gray-200); }
.cena-rel-legend-dot { width: 2.4mm; height: 2.4mm; }
.cena-rel-legend-value { font-variant-numeric: tabular-nums; color: var(--cena-gray-700); }
.cena-rel-legend-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cena-navy); min-width: 11mm; text-align: right; }
.cena-rel-legend-row--total { border-top: 1.5px solid var(--cena-navy); font-weight: 600; }
.cena-rel-legend-row--total .cena-rel-legend-value { color: var(--cena-navy); }

.cena-rel-bars { display: flex; align-items: flex-end; gap: 2mm; height: 26mm; margin-top: 2mm; padding-top: 4mm; }
.cena-rel-bar-col { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.cena-rel-bar-stack { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 1px; }
.cena-rel-bar-value {
  position: absolute; left: 0; right: 0; bottom: 100%;
  margin-bottom: .8mm;
  text-align: center;
  font-size: 7px; font-weight: 600; color: var(--cena-gray-700);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cena-rel-bar { flex: 1 1 auto; width: 100%; background: var(--cena-navy); }
.cena-rel-bar-extra { flex: 0 0 auto; width: 100%; background: var(--cena-gold); }
.cena-rel-bar-labels { display: flex; gap: 2mm; margin-top: 1.5mm; }
.cena-rel-bar-label { flex: 1; text-align: center; font-size: 7.5px; font-weight: 600; color: var(--cena-gray-700); }
.cena-rel-bar-label small { display: block; font-size: 6.5px; font-weight: 400; color: var(--cena-gray-500); }

.cena-rel-donut-center { font-variant-numeric: tabular-nums; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.cena-rel-footer {
  position: absolute;
  left: 12mm; right: 12mm; bottom: 6mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6mm;
  padding-top: 2mm;
  border-top: 1px solid var(--cena-gray-200);
  font-size: 7.5px;
  color: var(--cena-gray-500);
}
.cena-rel-footer b { color: var(--cena-navy); font-weight: 600; letter-spacing: .04em; }

/* =====================================================================
   AÇÕES — só na tela, fora do papel e da captura do PDF
   ===================================================================== */
.cena-rel-actions {
  display: flex; justify-content: flex-end; gap: 6px;
  width: 100%; max-width: var(--page-w); margin: 0 auto 10px;
}
.cena-rel-btn {
  padding: 7px 14px;
  border: 1px solid var(--cena-gray-200);
  background: var(--cena-white);
  color: var(--cena-gray-700);
  font: 600 11px var(--report-font);
  cursor: pointer;
}
.cena-rel-btn:hover { border-color: var(--cena-navy); color: var(--cena-navy); }
.cena-rel-btn--primary { background: var(--cena-navy); border-color: var(--cena-navy); color: var(--cena-white); }
.cena-rel-btn--primary:hover { background: var(--cena-navy-dark); color: var(--cena-white); }
.cena-rel-btn:focus-visible { outline: 2px solid var(--cena-gold); outline-offset: 2px; }

/* =====================================================================
   LINHA DO TEMPO — capítulos por terreno
   ===================================================================== */
.cena-rel-tl { position: relative; margin-top: 2.5mm; padding-left: 4mm; }
.cena-rel-tl::before { content: ""; position: absolute; left: 1mm; top: 1.5mm; bottom: 1.5mm; width: 1px; background: var(--cena-gray-200); }
.cena-rel-ev { position: relative; padding-bottom: 3mm; }
.cena-rel-ev:last-child { padding-bottom: 0; }
.cena-rel-ev::before { content: ""; position: absolute; left: -4mm; top: 1mm; width: 2mm; height: 2mm; border-radius: 99px; background: var(--cena-navy); transform: translateX(0.1mm); }
.cena-rel-ev--gold::before { background: var(--cena-gold); }
.cena-rel-ev time { font-size: 7.5px; font-weight: 700; letter-spacing: .06em; color: var(--cena-gray-500); }
.cena-rel-ev b { font-size: 8.5px; color: var(--cena-navy); }
.cena-rel-ev p { margin: 1mm 0 0; font-size: 8.5px; color: var(--cena-gray-700); line-height: 1.5; overflow-wrap: anywhere; }

/* =====================================================================
   PREVIEW — tela dedicada por cima do app; controles fora do papel
   ===================================================================== */
.cena-rel-preview {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #454b52;
}
.cena-rel-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--cena-navy-dark);
  color: var(--cena-white);
}
.cena-rel-preview-bar b { font: 600 13px var(--report-font); letter-spacing: .02em; }
.cena-rel-preview-bar small { font: 400 11px var(--report-font); color: #9fb3c4; }
.cena-rel-preview-bar .grow { flex: 1; }
.cena-rel-preview-body { flex: 1; overflow: auto; padding: 18px 0 40px; }
.cena-rel-preview-body .cena-rel { background: transparent; }

/* =====================================================================
   IMPRESSÃO — A4 horizontal
   ===================================================================== */
@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: #fff !important; }
  body * { visibility: hidden; }
  .cena-rel, .cena-rel * { visibility: visible; }
  .cena-rel { position: absolute; inset: 0; padding: 0; background: #fff; }
  .cena-rel-preview { position: static; background: #fff; display: block; }
  .cena-rel-preview-bar { display: none !important; }
  .cena-rel-preview-body { overflow: visible; padding: 0; }
  .cena-rel-actions, .cena-rel-no-print { display: none !important; }
  .cena-rel-page { max-width: none; border: 0; break-after: page; }
  .cena-rel-page:last-child { break-after: auto; }
  .cena-rel-page + .cena-rel-page { margin-top: 0; }
  .cena-rel-table thead { display: table-header-group; }
  .cena-rel-table tbody tr, .cena-rel-panel, .cena-rel-note, .cena-rel-kpis { break-inside: avoid; }
  .cena-rel-section-head { break-after: avoid; }
  .cena-rel-side, .cena-rel-table thead th, .cena-rel-table tfoot td,
  .cena-rel-table tr.total td, .cena-rel-table tr.subtotal td,
  .cena-rel-status, .cena-rel-note, .cena-rel-panel-strip,
  .cena-rel-table tbody tr:nth-child(even) td, .cena-rel-bar, .cena-rel-bar-extra {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Tela estreita: o A4 não vira dashboard — apenas rola na horizontal. */
@media (max-width: 1120px) {
  .cena-rel { padding: 8px; overflow-x: auto; }
  .cena-rel-page { min-width: var(--page-w); }
  .cena-rel-actions { max-width: none; }
}