/* Blocos ilustrativos dos artigos gerados (pipeline artigos-iso). Paleta do design.css do iso42001. */
/* ==========================================================================
   Blocos ilustrativos dos artigos longos
   Figuras sao SVG inline (sem IA, sem binario): o texto dentro delas e'
   indexavel pelo buscador e legivel por LLM. Ver .ai/apoio/artigos/svg.py
   ========================================================================== */

.art-fig { margin: 2.4rem 0; }
.art-svg { display: block; max-width: 100%; height: auto; }
.art-fig-legenda,
.art-tabela caption {
  font-size: .86rem; color: #4A5A72; margin-top: .7rem;
  text-align: center; line-height: 1.5;
}
.art-tabela caption { margin: 0 0 .7rem; caption-side: top; font-weight: 600; }

/* foto: unica figura que vem de arquivo, e nao de SVG desenhado.
   width/height vem no HTML para o navegador reservar o espaco; aqui so' a
   escala fluida e o canto, para a foto nao brigar com os cards da pagina. */
.art-foto picture { display: block; }
.art-foto img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; box-shadow: 0 2px 14px rgba(10,31,68,.10);
}

/* tabela: rola no celular em vez de estourar a pagina */
.art-fig--tabela { overflow-x: auto; }
.art-tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.art-tabela th, .art-tabela td {
  padding: .62rem .8rem; text-align: left; border-bottom: 1px solid #E3EAF3;
}
.art-tabela thead th {
  background: #F6F9FC; color: #0B4A9E; font-weight: 700;
  border-bottom: 2px solid #DDE6F1; white-space: nowrap;
}
.art-tabela tbody tr:last-child td { border-bottom: none; }

/* caixas */
.art-box { margin: 2rem 0; padding: 1.1rem 1.3rem; border-radius: 8px; background: #F6F9FC; }
.art-box p { margin: .5rem 0 0; }
.art-box p:first-of-type { margin-top: 0; }
.art-box-tit {
  font-weight: 700; color: #0B4A9E; margin: 0 0 .45rem !important;
  font-size: .95rem; letter-spacing: .01em;
}
.art-box--destaque { border-left: 4px solid #0B4A9E; background: #F6F9FC; }
.art-box--alerta   { border-left: 4px solid #b45309; background: #FDF6EC; }
.art-box--caso     { border-left: 4px solid #6b7280; border-top: 1px solid #E3EAF3;
                     border-bottom: 1px solid #E3EAF3; }
.art-box--pergunta { border-left: 4px solid #0f766e; background: #EEF8F4; }

/* definicao no corpo */
.art-def { margin: 1.6rem 0; padding: .85rem 1.1rem; background: #F6F9FC; border-radius: 6px; }
.art-def dt { font-weight: 700; color: #0B4A9E; font-variant: small-caps;
              letter-spacing: .03em; margin: 0; }
.art-def dd { margin: .3rem 0 0; font-size: .95rem; }

/* numero grande */
.art-dado { text-align: center; padding: 1.3rem 1rem; border-top: 2px solid #DDE6F1;
            border-bottom: 2px solid #DDE6F1; }
.art-dado-num { display: block; font-family: 'IBM Plex Sans', system-ui, sans-serif;
                font-size: 2.9rem; line-height: 1.05; color: #0B4A9E; font-weight: 700; }
.art-dado-cap { margin-top: .5rem; font-size: .88rem; color: #4A5A72; }

/* checklist */
.art-check { margin: 2rem 0; padding: 1.1rem 1.3rem; border: 1px dashed #B9C8DC;
             border-radius: 8px; background: #fff; }
.art-check-tit { font-weight: 700; color: #0B4A9E; margin: 0 0 .6rem !important; }
.art-check ul { list-style: none; margin: 0; padding: 0; }
.art-check li { position: relative; padding-left: 1.7rem; margin: .42rem 0; }
.art-check li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: .82em; height: .82em; border: 1.5px solid #0B4A9E; border-radius: 2px;
}

/* chamada de referencia */
.art-cit { font-size: .72em; line-height: 0; }
.art-cit a { text-decoration: none; color: #0B4A9E; font-weight: 700;
             padding: 0 .12em; }
.art-cit a:hover { text-decoration: underline; }
.art-cit a::before { content: "["; }
.art-cit a::after  { content: "]"; }

/* referencias e glossario */
.art-refs, .art-glossario { margin-top: 3.2rem; padding-top: 1.6rem;
                            border-top: 2px solid #E3EAF3; }
.art-refs h2, .art-glossario h2 { font-size: 1.25rem; color: #0B4A9E; margin-bottom: 1rem; }
.art-refs-lista { font-size: .9rem; line-height: 1.65; padding-left: 1.4rem; }
.art-refs-lista li { margin: .6rem 0; }
.art-refs-lista cite { font-style: italic; }
.art-ref-volta { text-decoration: none; color: #6B7A92; margin-right: .25rem; }
.art-ref-volta:hover { color: #0B4A9E; }
.art-ref-acesso { color: #6B7A92; font-size: .85em; }
.art-glossario-lista dt { font-weight: 700; color: #0B4A9E; margin-top: .9rem; }
.art-glossario-lista dd { margin: .2rem 0 0; font-size: .93rem; }

@media (max-width: 640px) {
  .art-dado-num { font-size: 2.2rem; }
  .art-box { padding: .95rem 1.05rem; }
}

/* gancho inline para checklist e kits */
.prose a.cv-link { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.art-meta-linha { color: var(--ink-mute); font-size: 14px; margin: 0; }