/* DayOne 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; }
.do-report__block + .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); }
.do-dim__track { height: 12px; border-radius: var(--do-r-pill); background: rgba(65, 79, 89, 0.14); 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); }
.do-dim__value { font-family: var(--do-font-display); font-size: var(--do-fs-lg); text-align: right; font-variant-numeric: tabular-nums; }

.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(65, 79, 89, 0.10); }
.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-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); }

.do-radar { max-width: 520px; margin-inline: auto; }
.do-radar__grid { fill: none; stroke: var(--do-line-strong); stroke-width: 1; }
.do-radar__axis { stroke: var(--do-line-strong); stroke-width: 1; }
.do-radar__shape { fill: rgba(226, 168, 107, 0.28); stroke: var(--do-accent-ink); stroke-width: 2; }
.do-radar__shape--alt { fill: rgba(65, 79, 89, 0.14); stroke: var(--do-primary); stroke-width: 1.5; stroke-dasharray: 4 3; }
.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-white);
}
.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: var(--do-light);
  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: var(--do-white);
  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-dark); }

.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: var(--do-white);
  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;
}

/* ===== 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); }

/* ===== 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-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); }
}

/* ===== IMPRESSAO ==========================================================
   O PDF chega em quem nunca falou com a DayOne. 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: #000; }

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