/* Square AI AILRA - report.css
   Componentes do relatorio individual e do consolidado. Carregar depois de
   app.css e antes de print.css. Separado de app.css apenas para manter cada
   arquivo abaixo de 500 linhas. */

/* ===== RELATORIO ===========================================================
   .do-report raiz imprimivel; .do-dim barra por dimensao; .do-gap barra
   divergente declarado x evidenciado (centro = sem divergencia).             */
.do-report { display: block; }
.do-report__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--do-sp-6);
  padding-bottom: var(--do-sp-5);
  margin-bottom: var(--do-sp-8);
  border-bottom: 2px solid var(--do-accent);
  flex-wrap: wrap;
}
.do-report__title { font-size: var(--do-fs-h1); font-weight: 400; }
.do-report__meta { font-size: var(--do-fs-sm); color: var(--do-ink-mute); text-align: right; }
/* Ritmo unico entre blocos: vale depois de QUALQUER irmao (aviso, painel de link),
   nao apenas de outro bloco. Com o seletor bloco+bloco, um painel intercalado
   zerava o respiro do bloco seguinte (o anexo colava no link do cliente). */
.do-report > * + .do-report__block { margin-top: var(--do-sp-10); }
.do-report__lead { font-size: var(--do-fs-lg); line-height: 1.55; color: var(--do-ink-soft); }

.do-dim { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr 3.25rem; align-items: center; gap: var(--do-sp-3); }
.do-dim + .do-dim { margin-top: var(--do-sp-3); }
.do-dim__name { font-size: var(--do-fs-sm); color: var(--do-ink-soft); }
/* Metadado da linha (peso, evidencia) SEMPRE em linha propria sob o nome: some a
   quebra aleatoria "peso" numa linha e "18%" na outra, e toda linha tem a mesma
   estrutura nome + metadado. */
.do-dim__extra { display: block; margin-top: 1px; }
.do-dim__track { height: 12px; border-radius: var(--do-r-pill); background: rgba(242, 244, 232, 0.10); overflow: hidden; }
.do-dim__fill { display: block; height: 100%; width: 0; background: var(--do-primary); border-radius: inherit; }
.do-dim__fill--accent { background: var(--do-accent); }
/* Mesmo corpo do valor da barra divergente (.do-gap__value): as duas colunas de
   numero do relatorio ficam identicas em tamanho, peso e alinhamento. */
.do-dim__value { font-family: var(--do-font-display); font-weight: 600; font-size: var(--do-fs-base); text-align: right; font-variant-numeric: tabular-nums; }
/* 9a dimensao (Questões Situacionais): fio separador e valor "pendente" sem numero. */
.do-dim.do-dim--situacional { margin-top: var(--do-sp-4); padding-top: var(--do-sp-4); border-top: 1px dashed var(--do-line-strong); }
.do-dim__value--pendente { font-family: var(--do-font-body); font-weight: 600; font-size: var(--do-fs-xs); color: var(--do-ink-mute); text-transform: uppercase; letter-spacing: 0.04em; }

.do-gap { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr 3.25rem; align-items: center; gap: var(--do-sp-3); }
.do-gap + .do-gap { margin-top: var(--do-sp-3); }
.do-gap__name { font-size: var(--do-fs-sm); color: var(--do-ink-soft); }
.do-gap__axis { position: relative; height: 14px; border-radius: var(--do-r-xs); background: rgba(242, 244, 232, 0.08); }
.do-gap__axis::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--do-line-strong); }
/* O front posiciona a barra com style="left:50%;width:12%" (ou left calculado). */
.do-gap__bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: var(--do-primary); }
.do-gap__bar--over { background: var(--do-accent); }
.do-gap__bar--under { background: var(--do-primary); }
.do-gap__value { font-family: var(--do-font-display); font-weight: 600; font-size: var(--do-fs-base); text-align: right; font-variant-numeric: tabular-nums; }
.do-gap__legend { display: flex; gap: var(--do-sp-4); margin-top: var(--do-sp-3); font-size: var(--do-fs-xs); color: var(--do-ink-mute); flex-wrap: wrap; }
.do-gap__key { display: inline-flex; align-items: center; gap: var(--do-sp-2); }
.do-gap__key::before { content: ''; width: 12px; height: 8px; border-radius: 2px; background: var(--do-primary); }
.do-gap__key--over::before { background: var(--do-accent); }

/* Regua de 9 niveis do relatorio (arlScale em report-parts.js). Morava em app.css;
   veio para ca porque so o relatorio a usa (limite de 500 linhas por arquivo). */
.do-arlscale { display: block; }
.do-arlscale__track { display: flex; gap: 3px; }
.do-arlscale__step {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; min-width: 0;
  height: 38px;
  border: 1px solid var(--do-line);
  border-radius: var(--do-r-xs);
  background: var(--do-surface-mute);
  font-family: var(--do-font-display);
  font-size: var(--do-fs-sm);
  font-weight: 600;
  color: var(--do-ink-mute);
}
.do-arlscale__step.is-filled { background: var(--do-accent-soft); border-color: var(--do-accent-line); color: var(--do-accent-ink); }
.do-arlscale__step.is-current { background: var(--do-accent); border-color: var(--do-accent); color: var(--do-ink-invert); font-weight: 700; font-size: var(--do-fs-lg); }
.do-arlscale__caption { margin-top: var(--do-sp-2); font-size: var(--do-fs-sm); color: var(--do-ink-soft); }

.do-radar { max-width: 520px; margin-inline: auto; }
.do-radar__grid { fill: none; stroke: rgba(242, 244, 232, 0.18); stroke-width: 1; }
.do-radar__axis { stroke: rgba(242, 244, 232, 0.18); stroke-width: 1; }
.do-radar__shape { fill: rgba(222, 230, 188, 0.22); stroke: var(--do-accent); stroke-width: 2; }  /* acento novo */
.do-radar__shape--alt { fill: rgba(107, 122, 56, 0.10); stroke: var(--do-primary); stroke-width: 1.5; stroke-dasharray: 4 3; }  /* primária nova */
.do-radar__label { font-family: var(--do-font-body); font-size: 11px; fill: var(--do-ink-soft); }

/* ===== CONFIABILIDADE DA AUTOAVALIACAO =====================================
   Faixa acima do numero. Paleta da marca e tom de consultoria: nada de vermelho
   de alerta de sistema, porque isto nao e um erro do software, e uma ressalva
   sobre o que os numeros abaixo suportam.                                     */
.do-reliability {
  padding: var(--do-sp-4) var(--do-sp-5);
  margin-bottom: var(--do-sp-6);
  border: 1px solid var(--do-line);
  border-left: 3px solid var(--do-line-strong);
  border-radius: var(--do-r-sm);
  background: var(--do-surface-mute);
}
.do-reliability--baixa { border-left-color: var(--do-accent); background: var(--do-accent-soft); }
.do-reliability__head { display: flex; align-items: center; gap: var(--do-sp-3); flex-wrap: wrap; }
.do-reliability__title { font-size: var(--do-fs-sm); font-weight: 600; }
.do-reliability__index { font-variant-numeric: tabular-nums; }
.do-reliability__eyebrow {
  margin-top: var(--do-sp-4);
  text-transform: uppercase;
  letter-spacing: var(--do-ls-wide);
  color: var(--do-ink-mute);
}
.do-reliability > p { margin-top: var(--do-sp-2); }
.do-reliability__list { margin-top: var(--do-sp-2); padding-left: 1.1rem; list-style: disc; }
.do-reliability__list li + li { margin-top: var(--do-sp-2); }

/* ===== AILRA PENDENTE ======================================================
   Ocupa o lugar do score enquanto a leitura das questoes situacionais nao roda.
   Borda tracejada = trabalho em aberto; solida e ambar = falha a reprocessar.  */
.do-pending {
  margin-top: var(--do-sp-5);
  padding: var(--do-sp-4);
  border: 1px dashed var(--do-line-strong);
  border-radius: var(--do-r-sm);
  background: var(--do-surface-mute);
}
.do-pending--falhou { border-style: solid; border-color: var(--do-accent-line); background: var(--do-accent-soft); }
.do-pending__head { display: flex; align-items: baseline; gap: var(--do-sp-2); flex-wrap: wrap; font-size: var(--do-fs-sm); }
.do-pending__value {
  font-family: var(--do-font-display);
  font-size: var(--do-fs-lg);
  font-weight: 600;
  color: var(--do-accent-ink);
}
.do-pending__bar {
  position: relative;
  display: block;
  height: 4px;
  margin-top: var(--do-sp-3);
  border-radius: var(--do-r-pill);
  background: rgba(242, 239, 228, 0.12);
  overflow: hidden;
}
.do-pending__bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 35%;
  border-radius: inherit;
  background: var(--do-accent);
  animation: do-pending-run 1.6s ease-in-out infinite;
}
@keyframes do-pending-run { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .do-pending__bar::after { left: 0; width: 100%; opacity: 0.45; }
}
/* O numero grande deixa de ser o resultado final: peso visual menor. */
.do-scorebig__value--soft { color: var(--do-ink-soft); }

/* ===== TERMOS EXPLICADOS ===================================================
   Botao com aria-expanded, nunca title: title nao abre em toque. O alvo de
   toque do circulo e ampliado por ::after sem mexer no fluxo do texto.         */
.do-term { display: inline; }
.do-term__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  min-width: 19px;
  min-height: 19px;
  margin-left: 0.35em;
  border: 1px solid var(--do-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--do-ink-mute);
  font-family: var(--do-font-body);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  transition: border-color var(--do-t), color var(--do-t), background var(--do-t);
}
.do-term__btn::after { content: ''; position: absolute; inset: -10px; }
.do-term__btn:hover { border-color: var(--do-accent); color: var(--do-accent-ink); }
.do-term__btn[aria-expanded='true'] { border-color: var(--do-accent); background: var(--do-accent); color: var(--do-ink-invert); }

.do-term__panel {
  display: block;
  margin-top: var(--do-sp-3);
  padding: var(--do-sp-3) var(--do-sp-4);
  border-left: 2px solid var(--do-accent-line);
  border-radius: var(--do-r-xs);
  background: var(--do-surface-mute);
  color: var(--do-ink-soft);
  font-size: var(--do-fs-sm);
  font-weight: 400;
  line-height: var(--do-lh);
  letter-spacing: normal;
  text-transform: none;
  max-width: var(--do-measure);
}
.do-term__panel[hidden] { display: none; }
.do-term__panel-term { display: block; color: var(--do-ink); font-weight: 600; }
.do-term__panel-line { display: block; margin-top: var(--do-sp-2); }
.do-term__panel-line--soft { color: var(--do-ink-soft); }
.do-term__panel-line--when { font-size: var(--do-fs-xs); color: var(--do-ink-mute); }

.do-terms { display: flex; align-items: center; gap: var(--do-sp-2); flex-wrap: wrap; margin-top: var(--do-sp-4); }
.do-terms__label { font-size: var(--do-fs-xs); color: var(--do-ink-mute); }
/* O invólucro some do layout para que o painel aberto ocupe a linha inteira. */
.do-term__wrap { display: contents; }
.do-terms .do-term__panel { flex: 1 0 100%; margin-top: var(--do-sp-1); }
.do-term__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--do-sp-2);
  min-height: 34px;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--do-line);
  border-radius: var(--do-r-pill);
  background: transparent;
  color: var(--do-ink-soft);
  font-size: var(--do-fs-xs);
  transition: border-color var(--do-t), background var(--do-t), color var(--do-t);
}
.do-term__chip:hover { border-color: var(--do-accent-line); color: var(--do-accent-ink); }
.do-term__chip[aria-expanded='true'] { border-color: var(--do-accent); background: var(--do-accent-soft); color: var(--do-accent-ink); }
.do-term__chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--do-fs-xxs);
  font-weight: 600;
  opacity: 0.75;
}

/* ===== DUAS SAIDAS DE IMPRESSAO ===========================================
   Contrato com o front e com print.css:
   - .do-doc-socio    material do socio: tela do painel + impressao do documento do socio
   - .do-doc-cliente  texto substituto do cliente: invisivel na tela do painel, impresso
                      apenas no documento do cliente (regras de troca em print.css)      */
.do-doc-cliente { display: none; }

/* ===== RESUMO DE UMA PAGINA (one-pager de abertura) ======================== */
.do-cover__value { font-size: var(--do-fs-h3); }
.do-cover__kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.do-cover__cols {
  display: grid;
  gap: var(--do-sp-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--do-sp-6);
}
.do-cover__head {
  font-size: var(--do-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--do-ls-wide);
  color: var(--do-ink-mute);
  margin-bottom: var(--do-sp-2);
}
.do-cover__list { margin: 0; padding-left: 1.2rem; }
.do-cover__list li + li { margin-top: var(--do-sp-2); }
.do-cover__sens,
.do-sens { margin-top: var(--do-sp-3); color: var(--do-accent-ink); }

/* ===== CONFIABILIDADE ALTA (linha compacta) ================================ */
.do-reliability--alta { padding: var(--do-sp-3) var(--do-sp-5); }

/* ===== FAIXAS DE LEITURA E MEDIANA NAS BARRAS ============================== */
.do-dim__track { position: relative; }
.do-dim__tick {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--do-line-strong);
  opacity: 0.9;
}
.do-dim__mark {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--do-ink);
  border: 1px solid var(--do-bg);
  transform: translateY(-50%) rotate(45deg);
}

/* ===== TRECHOS CITADOS (documento do socio) ================================ */
.do-quote {
  margin-top: var(--do-sp-2);
  padding: var(--do-sp-2) var(--do-sp-4);
  border-left: 2px solid var(--do-accent-line);
  background: var(--do-surface-mute);
  border-radius: var(--do-r-xs);
  font-size: var(--do-fs-sm);
  color: var(--do-ink-soft);
  font-style: italic;
  overflow-wrap: anywhere;
}

/* ===== PLANO DE 90 DIAS: RESPONSAVEL ======================================= */
.do-plano__resp {
  font-size: var(--do-fs-xs);
  font-weight: 600;
  color: var(--do-accent-ink);
  white-space: nowrap;
}

/* ===== BLOCO DE DECISAO DO SOCIO (so impressao) ============================ */
.do-decisao { margin-top: var(--do-sp-4); }
.do-decisao__row {
  display: flex;
  align-items: baseline;
  gap: var(--do-sp-3);
  padding: var(--do-sp-3) 0;
  border-bottom: 1px solid var(--do-line);
}
.do-decisao__label { flex: 0 0 14rem; font-size: var(--do-fs-sm); color: var(--do-ink-mute); }
.do-decisao__value { font-size: var(--do-fs-sm); font-weight: 600; }
.do-decisao__blank { flex: 1; border-bottom: 1px solid var(--do-ink-mute); min-height: 1.2em; }

/* ===== ANEXO COLAPSADO ("como ler este relatorio") ========================= */
.do-collapse__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--do-sp-2);
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--do-line);
  border-radius: var(--do-r-pill);
  background: transparent;
  color: var(--do-ink-soft);
  font-size: var(--do-fs-sm);
  transition: border-color var(--do-t), background var(--do-t), color var(--do-t);
}
.do-collapse__btn:hover { border-color: var(--do-accent-line); color: var(--do-accent-ink); }
.do-collapse__btn[aria-expanded='true'] { border-color: var(--do-accent); background: var(--do-accent-soft); color: var(--do-accent-ink); }
.do-collapse__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--do-fs-xs);
  font-weight: 600;
}
.do-collapse__body { margin-top: var(--do-sp-5); }
.do-collapse__body[hidden] { display: none; }

/* ===== COMO LER ESTE RELATORIO ============================================= */
.do-glossary__intro > p + p,
.do-glossary__full > p + p { margin-top: var(--do-sp-2); }
.do-glossary__full { margin-top: var(--do-sp-2); }
.do-glossary__list { margin-top: var(--do-sp-4); }
.do-glossary__item { padding: var(--do-sp-4) 0; border-top: 1px solid var(--do-line); }
.do-glossary__item:first-child { padding-top: 0; border-top: 0; }
.do-glossary__term { font-size: var(--do-fs-base); font-weight: 600; }
.do-glossary__def { margin-top: var(--do-sp-2); }

/* ===== MATRIZ NINE BOX NO RELATORIO ========================================
   A grade base (.do-9box) vem de site.css (landing). Aqui entram apenas os
   modificadores do relatorio: a celula do avaliado em oliva (texto escuro
   sobre o acento, nunca o contrario), o caso Risco Sistemico em vermelho
   profundo e a leitura dos eixos com a conta por tras da posicao.            */
.do-9box--report .do-9box__cell--pos {
  border-color: var(--do-accent);
  background: var(--do-surface-tint);
  box-shadow: 0 0 0 1px var(--do-accent);
}
.do-9box--report .do-9box__cell--pos .do-9box__name { color: var(--do-accent-ink); }
.do-9box--report .do-9box__cell--pos.do-9box__cell--risk {
  border-color: var(--do-risk);
  box-shadow: 0 0 0 1px var(--do-risk);
  background: var(--do-wine);
}
.do-9box--report .do-9box__cell--pos.do-9box__cell--risk .do-9box__name { color: var(--do-ink); }
/* O selo fica FORA do fluxo vertical da celula (position absolute) e todas as celulas
   do relatorio reservam a mesma folga inferior: nenhuma linha da matriz cresce sozinha
   por causa dele, em tela ou no papel. Fora do fluxo, ele tambem nao dita largura de
   coluna (o "balao" de 3 linhas que alargava a coluna do meio em 375px). */
.do-9box--report .do-9box__cell { position: relative; padding-bottom: calc(var(--do-sp-4) + 24px); }
.do-9box__pos-tag {
  position: absolute;
  left: var(--do-sp-4);
  bottom: var(--do-sp-3);
  max-width: calc(100% - 2 * var(--do-sp-4));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 8px;
  border-radius: var(--do-r-pill);
  background: var(--do-accent);
  color: var(--do-ink-invert);
  font-size: var(--do-fs-xxs);
  font-weight: 600;
  letter-spacing: var(--do-ls-eyebrow);
  text-transform: uppercase;
}
/* Duas versoes do texto do selo: a completa (padrao) e a curta (celula estreita:
   breakpoint movel e versao executiva impressa). */
.do-9box__pos-tag-short { display: none; }
.do-9box__aviso { border-left: 2px solid var(--do-accent-line); }
.do-9box__reading { border-top: 1px solid var(--do-line); padding-top: var(--do-sp-4); }
.do-9box__axis + .do-9box__axis { margin-top: var(--do-sp-4); }
.do-9box__axis-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--do-sp-3); flex-wrap: wrap; }
.do-9box__axis-name { font-size: var(--do-fs-sm); font-weight: 600; }
.do-9box__axis-val { display: inline-flex; align-items: baseline; gap: var(--do-sp-2); font-variant-numeric: tabular-nums; }
.do-9box__axis-val strong { font-family: var(--do-font-display); font-size: var(--do-fs-lg); }
.do-9box__axis-band {
  font-size: var(--do-fs-xxs);
  font-weight: 600;
  color: var(--do-accent-ink);
  text-transform: uppercase;
  letter-spacing: var(--do-ls-wide);
}
/* Variante compacta (versao executiva): celulas rasas, sem descricao. */
.do-9box--mini .do-9box__grid { gap: 4px; }
.do-9box--mini .do-9box__cell { padding: var(--do-sp-2); gap: 2px; }
.do-9box--mini .do-9box__name { font-size: var(--do-fs-xxs); }
.do-9box--mini .do-9box__n { font-size: var(--do-fs-xxs); }

/* ===== VERSAO EXECUTIVA (terceiro documento) ===============================
   So existe no papel: invisivel em QUALQUER tela; print.css a exibe sozinha
   quando a raiz esta com data-print-doc="executivo".                         */
.do-exec { display: none; }

/* ===== RESPONSIVO =========================================================
   As regras responsivas do relatorio moram aqui para que a ordem de cascata
   continue correta depois da separacao de app.css. */
@media (max-width: 900px) {
  .do-report__header { align-items: flex-start; }
  .do-report__meta { text-align: left; }
}

@media (max-width: 640px) {
  .do-arlscale__step { height: 32px; font-size: var(--do-fs-xs); }
  .do-dim,
  .do-gap { grid-template-columns: 1fr 3rem; }
  .do-dim__name,
  .do-gap__name { grid-column: 1 / -1; }
  .do-reliability { padding: var(--do-sp-4); }
  .do-term__chip { min-height: 40px; }
  .do-term__panel { padding: var(--do-sp-3); }
  /* Selo compacto na celula estreita: uma palavra, tracking menor, sem quebrar linha. */
  .do-9box--report .do-9box__cell { padding-bottom: calc(var(--do-sp-2) + 22px); }
  .do-9box__pos-tag { left: var(--do-sp-2); bottom: var(--do-sp-2); max-width: calc(100% - 2 * var(--do-sp-2)); letter-spacing: 0.06em; }
  .do-9box__pos-tag-full { display: none; }
  .do-9box__pos-tag-short { display: inline; }
}

/* ===== IMPRESSAO ==========================================================
   O PDF chega em quem nunca falou com a Square AI. As explicacoes abertas na tela
   nao vao para o papel (viram ruido); quem responde por elas e a secao final
   "como ler este relatorio", que sai inteira e sem quebrar termo ao meio.     */
@media print {
  .do-terms,
  .do-term__btn,
  .do-term__panel { display: none !important; }

  .do-reliability {
    padding: 4mm;
    margin-bottom: 4mm;
    border: 1px solid var(--do-line-strong) !important;
    border-left: 2pt solid var(--do-accent) !important;
    background: var(--do-white) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .do-pending {
    padding: 4mm;
    border: 1px solid var(--do-line-strong) !important;
    background: var(--do-white) !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .do-pending__bar { display: none !important; }
  .do-scorebig__value--soft { color: var(--do-ink); }  /* print.css redefine */

  .do-glossary__item {
    padding: 3mm 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .do-glossary__term { font-size: 10.5pt; }
}