/* ============================================================
   REDES.LAB ON · Modelo de relatório (documento paginado)
   Páginas A4 empilhadas com sombra, identidade Vale Sans.
   Usa as variáveis do styles.css: funciona no claro e no escuro.
   É o entregável que a Vale vê: capricho proposital.
   ============================================================ */

/* ---- barra de controle (alternância Mês 5 / Mês 10 / Final) ---- */
.doc-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.doc-seg{
  display:inline-flex;gap:4px;padding:4px;
  background:var(--surface-sunk);border-radius:var(--r-pill);
}
.doc-seg button{
  border:none;background:transparent;color:var(--body);
  font-family:var(--serif);font-weight:600;font-size:12.5px;
  padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;
  transition:all .15s ease;
}
.doc-seg button.on{
  background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow);font-weight:800;
}

/* ---- a mesa: páginas empilhadas ---- */
.doc-desk{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:10px 0 30px;
}
.doc-pg{
  position:relative;width:100%;max-width:820px;
  aspect-ratio:210/297;overflow:hidden;
  background:var(--surface);border-radius:6px;
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  padding:56px 60px 46px;
  font-family:var(--serif);color:var(--ink);
}
@media (max-width:900px){
  .doc-pg{aspect-ratio:auto;min-height:60vh;padding:34px 26px 30px;}
}

/* cabeçalho e rodapé de página */
.doc-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.doc-wm{font-size:14px;}
.doc-wm.claro{color:#fff;}
.doc-wm.claro i.on{-webkit-text-stroke:0;}
.doc-secao{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body-soft);
  text-align:right;
}
.doc-foot{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--body-soft);
}

/* ---- capa ---- */
.doc-pg.capa{padding:0;}
.doc-capa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.doc-capa-veu{
  position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(42,16,24,.28) 0%,rgba(42,16,24,.62) 55%,rgba(42,16,24,.9) 100%);
}
.doc-pg.capa .doc-foot{
  position:relative;z-index:2;border-top-color:rgba(255,255,255,.25);
  color:rgba(255,255,255,.8);margin:0 60px 46px;
}
.doc-capa-txt{
  position:relative;z-index:2;margin-top:auto;
  padding:0 60px 34px;color:#fff;
  display:flex;flex-direction:column;gap:12px;
}
.doc-capa-k{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amarelo-neon);
}
.doc-capa-txt h1{
  font-size:46px;line-height:1.02;letter-spacing:-.02em;
  font-weight:900;font-style:italic;margin:0;
}
.doc-capa-sub{font-size:15px;font-weight:600;opacity:.92;}
.doc-capa-meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;opacity:.78;
}
@media (max-width:900px){
  .doc-capa-txt{padding:120px 26px 26px;}
  .doc-capa-txt h1{font-size:32px;}
  .doc-pg.capa .doc-foot{margin:0 26px 26px;}
}

/* ---- corpo ---- */
.doc-corpo{display:flex;flex-direction:column;gap:14px;min-height:0;}
.doc-h{
  font-size:19px;font-weight:800;letter-spacing:-.01em;margin-top:8px;
  padding-left:12px;border-left:3px solid var(--magenta-vivo);
}
.doc-corpo > .doc-h:first-child{margin-top:0;}
.doc-corpo p{font-size:12.5px;line-height:1.65;color:var(--body);max-width:64ch;margin:0;}

/* sumário */
.doc-sumario{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:34px;
}
.doc-sumario li{
  display:flex;align-items:baseline;gap:8px;
  font-size:12.5px;color:var(--ink);padding:7px 0;
  border-bottom:1px dotted var(--rule);break-inside:avoid;
}
.doc-sumario li span{flex:1;}
.doc-sumario li b{font-family:var(--mono);font-size:11px;color:var(--body-soft);}
@media (max-width:640px){.doc-sumario{columns:1;}}

/* kpis */
.doc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media (max-width:760px){.doc-kpis{grid-template-columns:repeat(2,1fr);}}
.doc-kpi{
  background:var(--surface-sunk);border-radius:12px;padding:13px 14px;
  display:flex;flex-direction:column;gap:3px;
}
.doc-kpi-k{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--body-soft);
}
.doc-kpi b{font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--magenta-vivo);}
.doc-kpi-u{font-size:10.5px;color:var(--body);}

/* citação de leitura */
.doc-cita{
  font-size:15px;line-height:1.5;font-weight:600;font-style:italic;
  color:var(--ink);padding:14px 18px;margin-top:4px;
  border-left:3px solid var(--amarelo-neon);
  background:color-mix(in srgb,var(--amarelo-neon) 8%,transparent);
  border-radius:0 12px 12px 0;max-width:60ch;
}

/* tabelas do documento */
/* a página tem overflow:hidden; a tabela rola dentro deste contêiner
   em vez de ser cortada no celular */
.doc-roll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:640px){
  .doc-roll .doc-tab{min-width:540px;}
}
.doc-tab{width:100%;border-collapse:collapse;font-size:11.5px;}
.doc-tab th{
  text-align:left;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--body-soft);
  padding:7px 10px;border-bottom:1.5px solid var(--rule);
}
.doc-tab td{
  padding:6.5px 10px;border-bottom:1px solid var(--rule-soft);
  color:var(--ink);vertical-align:middle;
}
.doc-tab tr:last-child td{border-bottom:none;}
.doc-tab-sm{font-size:10.5px;}
.doc-tab-sm td{padding:4.5px 10px;}
.doc-num{font-weight:800;white-space:nowrap;}
.doc-mut{color:var(--body-soft);font-size:.94em;}
.doc-cid{display:block;font-family:var(--mono);font-size:9px;color:var(--body-soft);}
.doc-bar{display:flex;align-items:center;gap:8px;min-width:110px;}
.doc-bar i{display:block;height:6px;border-radius:4px;min-width:3px;}
.doc-bar b{font-size:10.5px;font-weight:800;}

/* nota metodológica */
.doc-nota{
  font-size:10.5px;line-height:1.6;color:var(--body);
  background:var(--surface-sunk);border-radius:10px;padding:10px 14px;
}
.doc-nota b{color:var(--ink);}

/* ESG */
.doc-esg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:760px){.doc-esg{grid-template-columns:1fr;}}
.doc-esg-c{border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.doc-esg-h{
  color:#fff;font-weight:800;font-size:12px;letter-spacing:.02em;
  padding:8px 12px;
}
.doc-esg-b{padding:4px 12px 8px;}
.doc-esg-i{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:10.5px;color:var(--body);padding:5.5px 0;
  border-bottom:1px solid var(--rule-soft);
}
.doc-esg-i:last-child{border-bottom:none;}
.doc-esg-i b{font-size:11.5px;font-weight:800;color:var(--ink);white-space:nowrap;}

/* leituras por eixo */
.doc-leituras{display:flex;flex-direction:column;gap:8px;}
.doc-leitura{display:flex;align-items:flex-start;gap:12px;}
.doc-leitura span{
  flex:0 0 auto;color:#fff;font-weight:800;font-size:10px;
  letter-spacing:.04em;padding:3px 10px;border-radius:var(--r-pill);
  margin-top:2px;
}
.doc-leitura p{font-size:11.5px;line-height:1.6;color:var(--body);margin:0;}

/* narrativa: fotos e relatos */
.doc-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:640px){.doc-fotos{grid-template-columns:1fr;}}
.doc-fig{margin:0;}
.doc-fig img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;display:block;
}
.doc-fig figcaption{
  font-size:10px;color:var(--body);padding-top:5px;line-height:1.4;
}
.doc-fig figcaption span{
  display:block;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--body-soft);
}
.doc-relatos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (max-width:760px){.doc-relatos{grid-template-columns:1fr;}}
.doc-relato{
  background:var(--surface-sunk);border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
}
.doc-relato-h b{font-size:12px;font-weight:800;display:block;}
.doc-relato-h span{font-family:var(--mono);font-size:9px;color:var(--body-soft);}
.doc-relato p{font-size:11px;line-height:1.6;color:var(--body);margin:0;}

/* anexos e assinaturas */
.doc-anexos{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
@media (max-width:640px){.doc-anexos{grid-template-columns:1fr;}}
.doc-anexo{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid var(--rule);border-radius:11px;padding:10px 12px;
}
.doc-anexo-ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;
  background:color-mix(in srgb,var(--magenta-vivo) 12%,transparent);
  color:var(--magenta-vivo);
  display:flex;align-items:center;justify-content:center;
}
.doc-anexo b{display:block;font-size:11.5px;font-weight:800;}
.doc-anexo span{font-size:10px;color:var(--body);line-height:1.45;}
.doc-assina{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
  margin-top:18px;padding-top:6px;
}
.doc-assina > div{display:flex;flex-direction:column;gap:6px;}
.doc-assina i{display:block;height:1px;background:var(--ink);opacity:.55;margin-top:26px;}
.doc-assina span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--body-soft);
}

/* modo escuro: papel levemente elevado para a pilha respirar */
html[data-mode="escuro"] .doc-pg{
  box-shadow:0 22px 60px rgba(0,0,0,.5);
  border:1px solid var(--rule-soft);
}