/* ================================================================
   Op. Contêineres — escopo .opcont-page (fit-to-viewport, no body scroll)
   Tudo cabe dentro do espaço disponível abaixo do header do portal (42px).
   ================================================================ */

.opcont-page{
  --bg: #FFFFFF;
  --surface: #F7F8FB;
  --surface-2: #F1F4F9;
  --surface-3: #EEF1F6;
  --rule: #E5E9F0;
  --rule-strong: #CBD2DC;
  --ink: #1F2937;
  --ink-soft: #374151;
  --muted: #6B7280;
  --muted-2: #9CA3AF;

  --blue: #2563EB;
  --blue-soft: #60A5FA;
  --blue-bg: #DBEAFE;
  --blue-bg-2: #EFF6FF;
  --green: #10B981;
  --green-soft: #34D399;
  --green-bg: #D1FAE5;
  --green-bg-2: #ECFDF5;
  --orange: #F59E0B;
  --orange-soft: #FBBF24;
  --orange-bg: #FEF3C7;
  --orange-bg-2: #FFFBEB;
  --red: #EF4444;
  --red-bg: #FEE2E2;
  --red-bg-2: #FEF2F2;

  --chart-grid: rgba(31,41,55,0.08);
  --chart-axis: rgba(31,41,55,0.30);

  --opc-header-h: 40px;
  --opc-tabs-h: 34px;
  --opc-side-w: 200px;
  --opc-pad-x: 24px;
  --opc-pad-y: 10px;
  --opc-portal-header-h: 42px;

  /* Container ocupa toda a viewport útil abaixo do header do portal */
  display:block;
  width:100%;
  height: calc(100vh - var(--opc-portal-header-h));
  background: var(--surface);
  color: var(--ink);
  font-family: "Geist","Inter","Helvetica Neue",Arial,sans-serif;
  font-feature-settings: "ss01","cv11";
  letter-spacing: -0.005em;
  overflow: hidden;
}
.opcont-page *{ box-sizing: border-box; }

/* Neutraliza o padding do <main> do portal só nesta pagina,
   pra colar o cabecalho da pagina no menu principal */
main:has(> .opcont-page){ padding: 0 !important; }

.opcont-page .app{
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: var(--opc-side-w) 1fr;
  grid-template-rows: var(--opc-header-h) 1fr;
  grid-template-areas:
    "h h"
    "s m";
  background: var(--surface);
  min-height: 0;
}
.opcont-page .app-header{ grid-area: h; }
.opcont-page .opc-tabs{ grid-area: s; }
.opcont-page .app-main{ grid-area: m; min-width: 0; }

/* ---- App header (single row, compact) ---- */
.opcont-page .app-header{
  height: var(--opc-header-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--opc-pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-shrink: 0;
}
.opcont-page .opc-header-left{ display:flex; align-items:center; min-width:0; }
.opcont-page .opc-page-h2{
  margin:0; display:inline-flex; align-items:center; gap:10px;
  font-family:"Geist",sans-serif; font-weight:700; font-size:18px;
  letter-spacing:-0.01em; color:var(--ink); line-height:1;
}
.opcont-page .opc-page-h2 .dash-title-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
}
.opcont-page .opc-page-h2 .dash-title-icon svg{ width:18px; height:18px; }

.opcont-page .app-header-right{ display:flex; align-items:center; gap:8px; }
.opcont-page .chip{
  font-family:"Geist",sans-serif; font-size:11px; color:var(--muted); font-weight:500;
  padding:4px 9px; border:1px solid var(--rule); border-radius:6px; background:var(--surface);
}
.opcont-page .chip strong{ color:var(--ink); font-weight:600; }
.opcont-page .status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  background:var(--blue-bg-2); color:var(--blue); border:1px solid var(--blue-bg);
}
.opcont-page .status-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }

/* ---- Sidebar Tabs (vertical) ---- */
.opcont-page .opc-tabs{
  width: var(--opc-side-w);
  height: 100%;
  background: var(--bg);
  border-right: 1px solid var(--rule);
  padding: 10px 8px;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
}
.opcont-page .opc-tabs button{
  appearance: none; background: transparent;
  width: 100%; height: auto; min-height: 36px;
  padding: 8px 10px 8px 12px; cursor: pointer;
  font-family: "Geist",sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--muted);
  border: none; border-left: 3px solid transparent;
  border-radius: 6px;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  display: flex; align-items: center; gap: 10px; white-space: normal; text-align: left;
}
.opcont-page .opc-tabs button:hover{ color: var(--ink); background: var(--surface-2); }
.opcont-page .opc-tabs button.active{
  color: var(--ink); background: var(--surface-2);
  border-left-color: var(--blue);
}
.opcont-page .opc-tabs button .num{
  background: var(--surface-2); color: var(--muted);
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  min-width: 22px; text-align: center; flex-shrink: 0;
}
.opcont-page .opc-tabs button.active .num{ background: var(--blue); color: #fff; }

.opcont-page .opc-tabs::-webkit-scrollbar{ width:6px; }
.opcont-page .opc-tabs::-webkit-scrollbar-thumb{ background: var(--rule-strong); border-radius: 3px; }
.opcont-page .opc-tabs::-webkit-scrollbar-track{ background: transparent; }

/* Sidebar shrink em telas estreitas */
@media (max-width: 1100px){
  .opcont-page{ --opc-side-w: 56px; }
  .opcont-page .opc-tabs button{
    flex-direction: column; gap: 4px; padding: 8px 4px;
    font-size: 9.5px; text-align: center; line-height: 1.1;
  }
  .opcont-page .opc-tabs button .num{ font-size: 9px; padding: 1px 5px; }
}

/* ---- Page content ---- */
.opcont-page .app-main{
  flex: 1; min-height: 0;
  padding: var(--opc-pad-y) var(--opc-pad-x);
  overflow: hidden;
}
.opcont-page .tab-panel{ display:none; height:100%; width:100%; overflow-y:auto; overflow-x:hidden; }
.opcont-page .tab-panel.active{ display:flex; flex-direction:column; animation: opcFadeIn 160ms ease; min-height:0; }
.opcont-page .tab-panel::-webkit-scrollbar{ width:8px; height:8px; }
.opcont-page .tab-panel::-webkit-scrollbar-thumb{ background: var(--rule-strong); border-radius:4px; }
.opcont-page .tab-panel::-webkit-scrollbar-track{ background: transparent; }
@keyframes opcFadeIn{ from{opacity:0;} to{opacity:1;} }

/* ---- Block (card) ---- */
.opcont-page .block{
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; min-height: 0;
}
.opcont-page .block-header{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 10px; flex-shrink: 0;
}
.opcont-page .block-title{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:22px; line-height:1.05; letter-spacing:-0.015em; color:var(--ink); margin:0;
}
.opcont-page .block-title .em{ font-style:italic; color:var(--blue); }
.opcont-page .block-title .em.green{ color:var(--green); }
.opcont-page .block-title .em.orange{ color:var(--orange); }
.opcont-page .block-title .em.ink{ color:var(--ink); }
.opcont-page .block-subtitle{
  font-family:"Geist",sans-serif; font-size:11.5px; color:var(--muted);
  font-weight:500; margin:4px 0 0; letter-spacing:-0.005em;
}
.opcont-page .block-meta{
  font-family:"Geist",sans-serif; font-size:10.5px; color:var(--muted); font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; text-align:right; line-height:1.5;
}
.opcont-page .block-meta .big{
  display:block; font-family:"Instrument Serif",serif; font-size:17px;
  color:var(--ink); text-transform:none; letter-spacing:-0.005em; font-weight:400; margin-bottom:1px;
}

/* eyebrow */
.opcont-page .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Geist",sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin-bottom:6px;
}
.opcont-page .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.opcont-page .eyebrow.pos .dot{ background:var(--green); }
.opcont-page .eyebrow.orange .dot{ background:var(--orange); }
.opcont-page .eyebrow.ink .dot{ background:var(--ink); }

/* ---- KPI cards ---- */
.opcont-page .kpi-card{
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 0;
}
.opcont-page .kpi-card.green{ background:var(--green-bg-2); border-color:var(--green-bg); }
.opcont-page .kpi-card.blue{ background:var(--blue-bg-2); border-color:var(--blue-bg); }
.opcont-page .kpi-card.orange{ background:var(--orange-bg-2); border-color:var(--orange-bg); }
.opcont-page .kpi-card.ink{ background:#0F172A; border-color:#0F172A; color:#fff; }
.opcont-page .kpi-card .label{
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:7px;
}
.opcont-page .kpi-card.ink .label{ color: rgba(255,255,255,0.6); }
.opcont-page .kpi-card .label .tag{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 5px; border-radius:4px;
  background:var(--ink); color:#fff; font-size:9px; font-weight:800; letter-spacing:0;
}
.opcont-page .kpi-card.green .label .tag{ background:var(--green); }
.opcont-page .kpi-card.blue .label .tag{ background:var(--blue); }
.opcont-page .kpi-card.orange .label .tag{ background:var(--orange); }
.opcont-page .kpi-card.ink .label .tag{ background:#fff; color:var(--ink); }
.opcont-page .kpi-card .val{
  font-family:"Geist",sans-serif; font-weight:700; font-size:36px; line-height:1;
  letter-spacing:-0.03em; color:var(--ink); margin:6px 0 4px;
}
.opcont-page .kpi-card.green .val{ color:var(--green); }
.opcont-page .kpi-card.blue .val{ color:var(--blue); }
.opcont-page .kpi-card.orange .val{ color:var(--orange); }
.opcont-page .kpi-card.ink .val{ color:#fff; }
.opcont-page .kpi-card .val .suffix{ font-size:18px; opacity:0.6; font-weight:500; margin-left:2px; }
.opcont-page .kpi-card .sub{
  font-family:"Geist",sans-serif; font-size:11px; color:var(--muted); font-weight:500;
}
.opcont-page .kpi-card.ink .sub{ color: rgba(255,255,255,0.7); }
.opcont-page .kpi-card .sub strong{ color:var(--ink); font-weight:600; }
.opcont-page .kpi-card.ink .sub strong{ color:#fff; }

/* ---- Grids ---- */
.opcont-page .row{ display:grid; gap:12px; }
.opcont-page .grid-2{ grid-template-columns: 1fr 1fr; }
.opcont-page .grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.opcont-page .grid-4{ grid-template-columns: repeat(4, 1fr); }
.opcont-page .grid-1-2{ grid-template-columns: 1fr 2fr; }
.opcont-page .grid-2-1{ grid-template-columns: 2fr 1fr; }
.opcont-page .grid-3-1{ grid-template-columns: 3fr 1fr; }
.opcont-page .flex-1{ flex:1; min-height:0; }

/* ---- Numbers / text ---- */
.opcont-page .num{
  font-family:"Geist",sans-serif; font-variant-numeric: tabular-nums;
  font-weight:600; letter-spacing:-0.01em;
}
.opcont-page .pos{ color: var(--green); }
.opcont-page .neg{ color: var(--red); }
.opcont-page .body{ font-size:13px; line-height:1.5; color: var(--ink-soft); }
.opcont-page .body.sm{ font-size:12px; color: var(--muted); }
.opcont-page .body strong{ color: var(--ink); font-weight:600; }

/* ---- DRE Table ---- */
.opcont-page table.dre{
  width:100%; border-collapse: collapse;
  font-family:"Geist",sans-serif; font-variant-numeric: tabular-nums;
}
.opcont-page table.dre th,
.opcont-page table.dre td{
  padding: 5px 9px; text-align: right; font-size: 12.5px; font-weight: 500;
  border-bottom: 1px solid var(--rule); letter-spacing: -0.005em;
}
.opcont-page table.dre th{
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; text-align: right; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.opcont-page table.dre th:first-child,
.opcont-page table.dre td:first-child{ text-align:left; font-size:12px; }
.opcont-page table.dre td:first-child{ color: var(--ink-soft); font-weight:500; }
.opcont-page table.dre tr.head td{
  font-weight:700; color:var(--ink); font-size:12.5px; background:var(--surface);
  padding-top:7px; padding-bottom:7px;
}
.opcont-page table.dre tr.indent td:first-child{
  padding-left:22px; color:var(--muted); font-size:11px; font-weight:500;
}
.opcont-page table.dre tr.total td{
  font-weight:700; color:var(--ink); font-size:14px;
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);
  padding-top:8px; padding-bottom:8px; background:var(--surface-2);
}
.opcont-page table.dre td.col-total{ font-weight:700; color:var(--ink); background:var(--surface); }
.opcont-page table.dre tr.total td.col-total{ background:var(--surface-3); }
.opcont-page table.dre td.pos{ color:var(--green); }
.opcont-page table.dre td.neg{ color:var(--red); }

/* Margin rows (Margem Bruta %, Margem EBIT %) */
.opcont-page table.dre tr.margin-row td{
  font-size:10.5px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  padding-top:4px; padding-bottom:6px;
  border-bottom:1px dashed var(--rule);
  background:transparent;
}
.opcont-page table.dre tr.margin-row td:first-child{
  padding-left:22px; color:var(--muted); font-size:10.5px; font-weight:600;
}
.opcont-page table.dre tr.margin-row td.col-total{ background:var(--surface); }

/* ---- Charts ---- */
.opcont-page .chart{
  width:100%; font-family:"Geist",sans-serif;
  flex:1; min-height:0; display:flex;
}
.opcont-page .chart svg{ display:block; width:100%; height:100%; max-height:100%; overflow:visible; }
.opcont-page .chart .axis-text{ font-family:"Geist",sans-serif; font-size:10px; fill:var(--muted); font-weight:500; }
.opcont-page .chart .grid line{ stroke: var(--chart-grid); stroke-width:1; }
.opcont-page .chart .axis line{ stroke: var(--chart-axis); stroke-width:1; }

/* ---- Legend ---- */
.opcont-page .legend{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  font-family:"Geist",sans-serif; font-size:11px; color:var(--ink-soft); font-weight:500;
}
.opcont-page .legend .item{ display:flex; align-items:center; gap:6px; }
.opcont-page .legend .sw{ width:10px; height:10px; border-radius:2px; }

/* ---- Phase / Callout ---- */
.opcont-page .phase{
  padding:9px 13px; border-radius:8px; border:1px solid var(--rule); background:var(--bg);
}
.opcont-page .phase.green{ background:var(--green-bg-2); border-color:var(--green-bg); }
.opcont-page .phase.orange{ background:var(--orange-bg-2); border-color:var(--orange-bg); }
.opcont-page .phase.blue{ background:var(--blue-bg-2); border-color:var(--blue-bg); }
.opcont-page .phase.gray{ background:var(--surface); border-color:var(--rule); }
.opcont-page .phase-eyebrow{
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  margin-bottom:5px; display:flex; align-items:center; gap:7px;
}
.opcont-page .phase-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--muted); }
.opcont-page .phase.green .phase-eyebrow{ color:var(--green); }
.opcont-page .phase.green .phase-eyebrow .dot{ background:var(--green); }
.opcont-page .phase.orange .phase-eyebrow{ color:var(--orange); }
.opcont-page .phase.orange .phase-eyebrow .dot{ background:var(--orange); }
.opcont-page .phase.blue .phase-eyebrow{ color:var(--blue); }
.opcont-page .phase.blue .phase-eyebrow .dot{ background:var(--blue); }
.opcont-page .phase-title{
  font-family:"Instrument Serif",serif; font-size:16px; line-height:1.1;
  letter-spacing:-0.01em; color:var(--ink); margin:0;
}
.opcont-page .phase.green .phase-title{ color:var(--green); }
.opcont-page .phase.orange .phase-title{ color:var(--orange); }
.opcont-page .phase.blue .phase-title{ color:var(--blue); }
.opcont-page .phase p{ margin:3px 0 0; font-size:11.5px; color:var(--ink-soft); line-height:1.4; }

/* Stat tile */
.opcont-page .stat-tile{
  padding:10px 13px; border-radius:8px; border:1px solid var(--rule); background:var(--bg);
}
.opcont-page .stat-tile.green{ background:var(--green-bg-2); border-color:var(--green-bg); }
.opcont-page .stat-tile.orange{ background:var(--orange-bg-2); border-color:var(--orange-bg); }
.opcont-page .stat-tile.gray{ background:var(--surface); }
.opcont-page .stat-tile .lbl-tiny{
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.opcont-page .stat-tile .num-big{
  font-family:"Geist",sans-serif; font-size:20px; font-weight:700; line-height:1;
  letter-spacing:-0.025em; color:var(--ink);
}
.opcont-page .stat-tile.green .num-big{ color:var(--green); }
.opcont-page .stat-tile.orange .num-big{ color:var(--orange); }
.opcont-page .stat-tile p{ font-size:11px; color:var(--muted); margin:4px 0 0; }

/* Callout */
.opcont-page .callout{
  padding:9px 13px; background:var(--surface);
  border:1px solid var(--rule); border-radius:8px;
  border-left:3px solid var(--ink);
}
.opcont-page .callout.green{ border-left-color:var(--green); background:var(--green-bg-2); border-color:var(--green-bg); }
.opcont-page .callout.orange{ border-left-color:var(--orange); background:var(--orange-bg-2); border-color:var(--orange-bg); }
.opcont-page .callout.blue{ border-left-color:var(--blue); background:var(--blue-bg-2); border-color:var(--blue-bg); }
.opcont-page .callout .label{
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.opcont-page .callout .val{
  font-family:"Geist",sans-serif; font-size:15px; font-weight:700;
  color:var(--ink); letter-spacing:-0.015em; line-height:1.15;
}
.opcont-page .callout.green .val{ color:var(--green); }
.opcont-page .callout.orange .val{ color:var(--orange); }
.opcont-page .callout.blue .val{ color:var(--blue); }
.opcont-page .callout p{ margin:4px 0 0; font-size:11.5px; color:var(--ink-soft); line-height:1.4; }

/* Bullet list */
.opcont-page ul.clean{ list-style:none; padding:0; margin:0; }
.opcont-page ul.clean li{
  padding:6px 0; border-bottom:1px solid var(--rule);
  display:flex; gap:12px; align-items:baseline;
}
.opcont-page ul.clean li:last-child{ border-bottom:none; }
.opcont-page ul.clean li .idx{
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.06em; min-width:32px;
  padding:2px 6px; border-radius:4px; text-align:center; display:inline-block;
  background:var(--surface-2); color:var(--ink);
}
.opcont-page ul.clean.green li .idx{ background:var(--green-bg); color:var(--green); }
.opcont-page ul.clean.orange li .idx{ background:var(--orange-bg); color:var(--orange); }
.opcont-page ul.clean li .txt{ font-size:12px; color:var(--ink-soft); line-height:1.45; }
.opcont-page ul.clean li .txt strong{ color:var(--ink); font-weight:600; }

/* Timeline (horizontal compact) */
.opcont-page .timeline{ display:flex; align-items:stretch; gap:0; padding:6px 0; }
.opcont-page .timeline-item{
  flex:1; position:relative; padding:14px 12px 0 18px; border-left:1px solid var(--rule);
}
.opcont-page .timeline-item:first-child{ border-left:none; padding-left:0; }
.opcont-page .timeline-item .dot-marker{
  position:absolute; left:-7px; top:0; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid var(--bg); box-shadow:0 0 0 1.5px var(--ink);
}
.opcont-page .timeline-item:first-child .dot-marker{ left:0; }
.opcont-page .timeline-item.green .dot-marker{ background:var(--green); box-shadow:0 0 0 1.5px var(--green); }
.opcont-page .timeline-item.orange .dot-marker{ background:var(--orange); box-shadow:0 0 0 1.5px var(--orange); }
.opcont-page .timeline-item.muted .dot-marker{ background:var(--muted); box-shadow:0 0 0 1.5px var(--muted); opacity:0.7; }
.opcont-page .timeline-item .when{
  font-family:"Geist",sans-serif; font-size:10px; color:var(--muted);
  letter-spacing:0.1em; font-weight:700; text-transform:uppercase;
}
.opcont-page .timeline-item.green .when{ color:var(--green); }
.opcont-page .timeline-item.orange .when{ color:var(--orange); }
.opcont-page .timeline-item .what{
  font-family:"Instrument Serif",serif; font-size:15px; line-height:1.15; margin:3px 0 4px;
}
.opcont-page .timeline-item p{ margin:0; font-size:11px; color:var(--ink-soft); line-height:1.4; }

/* Hero strip (overview) */
.opcont-page .hero-strip{
  position:relative;
  border:1px solid var(--rule);
  border-radius:12px;
  overflow:hidden;
  display:flex; align-items:center;
  background:#D6E5F5;
  min-height: 220px;
}
.opcont-page .hero-strip .hero-bg{ position:absolute; inset:0; z-index:0; }
.opcont-page .hero-strip .hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.opcont-page .hero-strip .hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 40%, rgba(255,255,255,0.40) 70%, rgba(255,255,255,0.10) 100%);
}
.opcont-page .hero-strip .hero-text{
  position:relative; z-index:1;
  padding:22px 26px; max-width:62%;
}
.opcont-page .hero-strip h1{
  font-family:"Instrument Serif",Georgia,serif; font-weight:400;
  font-size:28px; line-height:1.02; letter-spacing:-0.02em; margin:0; color:var(--ink);
}
.opcont-page .hero-strip h1 .em{ font-style:italic; color:var(--blue); }
.opcont-page .hero-strip p{ margin:9px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

/* Divider label */
.opcont-page .divider-label{
  font-family:"Geist",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.opcont-page .divider-label::after{ content:""; flex:1; height:1px; background:var(--rule); }

/* ================================================================
   Layout adaptativo por proporção de tela (aspect ratio)
   Classe aplicada via JS em .opcont-page conforme window.innerWidth/innerHeight:
     .opc-ar-compact  → 4:3 / 5:4   (aspectRatio <= 1.40)  ex.: 1280x1024, 1024x768
     .opc-ar-standard → 16:9        (1.40 < aspectRatio < 2.00)  ex.: 1920x1080, 1366x768  [padrão]
     .opc-ar-wide     → 21:9 / ultra-wide (aspectRatio >= 2.00)  ex.: 2560x1080, 3440x1440
   A reorganização é automática (sem configuração manual do usuário).
   ================================================================ */

/* --- 4:3 / 5:4 — compacto: menos colunas lado a lado, margens menores --- */
.opcont-page.opc-ar-compact{ --opc-pad-x: 14px; --opc-side-w: 176px; }
.opcont-page.opc-ar-compact .grid-4{ grid-template-columns: 1fr 1fr; }
.opcont-page.opc-ar-compact .grid-3{ grid-template-columns: 1fr 1fr; }
.opcont-page.opc-ar-compact .grid-1-2,
.opcont-page.opc-ar-compact .grid-2-1,
.opcont-page.opc-ar-compact .grid-3-1{ grid-template-columns: 1fr; }
/* tabelas largas: scroll interno só nos blocos com tabela, em vez de estourar a largura */
.opcont-page.opc-ar-compact .block:has(table.dre){ overflow-x: auto; }
.opcont-page.opc-ar-compact table.dre{ min-width: 520px; }
.opcont-page.opc-ar-compact .hero-strip .hero-text{ max-width: 80%; }

/* --- 21:9 / ultra-wide — limita a largura do conteúdo e centraliza --- */
.opcont-page.opc-ar-wide .tab-panel{
  width: 100%;
  max-width: clamp(1280px, 86vw, 1720px);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Dark mode: leve adaptação para integrar ao portal ---- */
.dark .opcont-page{
  --bg: #111827;
  --surface: #0F172A;
  --surface-2: #1E293B;
  --surface-3: #334155;
  --rule: rgba(255,255,255,0.08);
  --rule-strong: rgba(255,255,255,0.18);
  --ink: #F1F5F9;
  --ink-soft: #CBD5E1;
  --muted: #94A3B8;
  --muted-2: #64748B;
  --chart-grid: rgba(255,255,255,0.08);
  --chart-axis: rgba(255,255,255,0.30);
}