/* ================================================================
   DETALHE — estilos compartilhados por TODAS as páginas de detalhe
   (modelos, dashboards, processos). Depende de tokens.css.
   Renderizado por assets/js/detalhe-renderer.js a partir de
   window.PAGINA definido em cada dados.js.
   ================================================================ */

/* ---------- Breadcrumb ---------- */

.trilha{
  padding:18px 0;
  border-bottom:1px solid var(--linha);
}
.trilha a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-med); text-decoration:none;
}
.trilha a:hover{ color:var(--marca); text-decoration:underline; }
.trilha span{ color:var(--tinta-fraca); margin:0 8px; }

/* ---------- Cabeçalho ---------- */

.cabecalho{
  padding:40px 0 28px;
  border-bottom:1px solid var(--linha);
}
.cabecalho-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marca); margin:0 0 14px;
}
.cabecalho-titulo{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.6rem, 3.4vw, 2.3rem);
  line-height:1.15; letter-spacing:-.02em;
  margin:0 0 10px;
}
.cabecalho-subtitulo{
  font-size:1rem; color:var(--tinta-med); max-width:64ch;
  margin:0 0 26px;
}

.metadados{
  display:flex; flex-wrap:wrap; gap:22px 40px;
  padding-top:20px; border-top:1px solid var(--linha-fina);
}
.metadado{ min-width:120px; }
.metadado-rotulo{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-fraca); margin:0 0 5px;
}
.metadado-valor{
  font-size:.95rem; font-weight:600; color:var(--tinta); margin:0;
}

/* ---------- Seções ---------- */

.secao{ padding:36px 0; border-bottom:1px solid var(--linha-fina); }
.secao:last-of-type{ border-bottom:0; }
.secao-titulo{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  letter-spacing:-.01em; margin:0 0 18px;
}

.bloco{ margin:0 0 22px; }
.bloco:last-child{ margin-bottom:0; }
.bloco-titulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-med); margin:0 0 10px;
}

.texto p{ font-size:.98rem; color:var(--tinta); max-width:72ch; margin:0 0 12px; line-height:1.65; }
.texto p:last-child{ margin-bottom:0; }

/* ---------- Listas ---------- */

.lista-conteudo{ margin:0; padding-left:22px; }
.lista-conteudo li{ font-size:.96rem; color:var(--tinta); margin-bottom:9px; max-width:70ch; line-height:1.55; }
.lista-conteudo li:last-child{ margin-bottom:0; }
.lista-nota{
  display:block; margin-top:4px;
  font-size:.85rem; color:var(--tinta-med);
  border-left:2px solid var(--linha); padding-left:10px;
}

/* ---------- Callouts ---------- */

.callout{
  border-left:3px solid var(--linha);
  background:var(--papel-alto);
  border-radius:0 4px 4px 0;
  padding:14px 18px;
}
.callout-titulo{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 8px; font-weight:600;
}
.callout p{ font-size:.94rem; margin:0 0 8px; line-height:1.6; }
.callout p:last-child{ margin-bottom:0; }

.callout--aviso{ border-left-color:var(--revisao); }
.callout--aviso .callout-titulo{ color:var(--revisao); }

.callout--sucesso{ border-left-color:var(--marca); }
.callout--sucesso .callout-titulo{ color:var(--marca); }

.callout--info{ border-left-color:var(--tinta-fraca); }
.callout--info .callout-titulo{ color:var(--tinta-med); }

/* ---------- Tabelas ---------- */

.tabela-wrap{ overflow-x:auto; border:1px solid var(--linha); border-radius:4px; }
table.tabela{
  width:100%; border-collapse:collapse; font-size:.9rem;
}
table.tabela th, table.tabela td{
  text-align:left; padding:10px 14px; vertical-align:top;
  border-bottom:1px solid var(--linha-fina);
}
table.tabela th{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-fraca); background:var(--papel-alto);
  border-bottom:1px solid var(--linha);
}
table.tabela tr:last-child td{ border-bottom:0; }
table.tabela td{ color:var(--tinta); }

/* ---------- Código / expressões técnicas ---------- */

pre.codigo{
  margin:0; padding:14px 16px;
  background:var(--campo); color:var(--sobre-campo);
  border-radius:4px; overflow-x:auto;
  font-family:var(--mono); font-size:.85rem; line-height:1.5;
}
pre.codigo code{ color:var(--ciano); }

/* ---------- Link cruzado ---------- */

.link-cruzado{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--linha); border-radius:4px;
  padding:16px 18px;
  transition:border-color .12s ease, background .12s ease;
}
.link-cruzado:hover{ border-color:var(--marca-viva); background:var(--papel-alto); }
.link-cruzado-rotulo{
  font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--marca);
  margin:0 0 5px;
}
.link-cruzado-rotulo::after{ content:' →'; }
.link-cruzado-desc{ font-size:.88rem; color:var(--tinta-med); margin:0; }

/* ---------- Imagem ---------- */

.imagem{ margin:0 0 6px; text-align:center; }
.imagem img{ max-width:200px; width:100%; height:auto; }
.imagem figcaption{ margin-top:12px; font-size:.85rem; color:var(--tinta-med); }

/* ---------- Pendente (mesma definição usada no catálogo) ---------- */

.pendente{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--revisao); background:rgba(168,117,16,.12);
  border:1px solid rgba(168,117,16,.35); border-radius:3px;
  padding:2px 8px; white-space:normal;
}
.pendente::before{ content:'⚠'; font-size:9px; }

/* ---------- Controle de versões / Pendências (seções fixas) ---------- */

.secao-fixa{ padding:36px 0; }
.secao-fixa.pendencias-box{
  background:var(--papel-alto);
  border-top:1px solid var(--linha-fina);
}

.pendencias-lista{ margin:0; padding-left:22px; }
.pendencias-lista li{
  font-size:.95rem; color:var(--tinta); margin-bottom:10px; max-width:70ch; line-height:1.55;
}
.pendencias-lista li:last-child{ margin-bottom:0; }
.pendencias-lista li::marker{ color:var(--revisao); }

.rodape-detalhe{
  border-top:1px solid var(--campo);
  padding:26px 0 56px;
  font-size:.85rem; color:var(--tinta-med);
}
.rodape-detalhe a{ color:var(--marca); }

/* ---------- Responsivo ---------- */

@media (max-width:860px){
  .metadados{ gap:16px 28px; }
  table.tabela th, table.tabela td{ padding:8px 10px; }
}