/* Módulo FAPES/BNDES — estilos do parecer visual.
   Reaproveita tokens de marca do app (styles.css) e adiciona cores semânticas
   de risco para os temas claro/escuro. Escopo: prefixo .fapes-. */

:root {
  --fapes-verde: #1f9d6b;     --fapes-verde-bg: rgba(31, 157, 107, 0.12);
  --fapes-dourado: var(--brand-yellow-deep, #e6bb00); --fapes-dourado-bg: rgba(230, 187, 0, 0.16);
  --fapes-rosa: #d6336c;      --fapes-rosa-bg: rgba(214, 51, 108, 0.12);
  --fapes-vermelho: #c0392b;  --fapes-vermelho-bg: rgba(192, 57, 43, 0.12);
  --fapes-cinza: #6b6580;     --fapes-cinza-bg: rgba(107, 101, 128, 0.12);
}
.theme-dark {
  --fapes-verde: #4cd9a0;     --fapes-verde-bg: rgba(76, 217, 160, 0.16);
  --fapes-dourado: #ffd84d;   --fapes-dourado-bg: rgba(255, 216, 77, 0.18);
  --fapes-rosa: #ff7aa8;      --fapes-rosa-bg: rgba(255, 122, 168, 0.18);
  --fapes-vermelho: #ff7d6b;  --fapes-vermelho-bg: rgba(255, 125, 107, 0.18);
  --fapes-cinza: #b3acc8;     --fapes-cinza-bg: rgba(179, 172, 200, 0.16);
}

/* View dentro do shell (espelha hub/guidelines). */
.fapes-screen { display: block; padding: clamp(16px, 3vw, 28px); }
.fapes-screen.is-hidden { display: none; }
/* Esconde APENAS o stepper nativo do wizard e os grids de cálculo; o stepper
   próprio do FAPES (.fapes-stepper, também .stepper) permanece visível. */
body.is-fapes #wizard-stepper,
body.is-fapes .module-view { display: none; }
body.is-fapes #floating-next,
body.is-fapes #floating-calc { display: none; }

.fapes-shell { max-width: 1080px; margin: 0 auto; display: grid; gap: 18px; min-width: 0; }
/* Evita overflow horizontal no mobile: itens de grid/flex não devem assumir a
   largura do conteúdo (min-width:auto). Os wrappers .fapes-table-wrap rolam dentro. */
.fapes-shell > *, .fapes-resultado > *, .fapes-card { min-width: 0; }
.fapes-resultado { min-width: 0; }
.fapes-table-wrap { max-width: 100%; }
.fapes-intro { text-align: center; max-width: 820px; margin: 0 auto; }
.fapes-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; color: var(--accent, #8a4cf0); font-weight: 700; margin: 0 0 6px; }
.fapes-title { font-size: clamp(1.25rem, 3vw, 1.9rem); color: var(--heading, #2a1656); margin: 0 0 8px; line-height: 1.2; }
.fapes-lead { color: var(--muted, #5a5070); margin: 0; font-size: .96rem; }

/* Stepper FAPES — É a MESMA linha de steps dos demais módulos: reusa por completo
   as classes do app (.stepper/.stepper-inner/.stepper-track/.stepper-fill/
   .step-btn/.step-num/.step-label) e os estados .active/.done. Sem caixa própria;
   apenas botões clicáveis (cursor) para navegar entre as etapas. */
.fapes-stepper { margin: 2px 0 10px; }
.fapes-stepper .step-btn { cursor: pointer; }

/* Formulário */
.fapes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .fapes-grid { grid-template-columns: 1fr; } }
.fapes-field--full { grid-column: 1 / -1; }
.fapes-field label { display: block; font-size: .88rem; font-weight: 600; color: var(--heading, #2a1656); margin-bottom: 4px; }
.fapes-input { width: 100%; font: inherit; padding: 9px 10px; border-radius: 10px; box-sizing: border-box;
  border: 1px solid var(--card-border, rgba(76,42,170,0.3)); background: var(--card-strong, #fff); color: var(--text); }
.fapes-input:focus { outline: 2px solid var(--focus, #8a4cf0); outline-offset: 1px; }
.fapes-req { color: var(--fapes-rosa); font-weight: 800; }
.fapes-form-hint { font-size: .84rem; color: var(--muted); margin: 0 0 12px; }

.fapes-nav { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.fapes-btn { font: inherit; font-weight: 700; border-radius: 10px; padding: 10px 16px; cursor: pointer; }
.fapes-btn--primary { background: var(--accent, #8a4cf0); color: var(--accent-contrast, #fff); border: 1px solid transparent; }
.fapes-btn--primary:hover { background: var(--accent-hover, #7638dd); }

/* Resultado */
.fapes-resultado { display: grid; gap: 16px; }
.fapes-card-title { margin: 0 0 8px; font-size: 1.02rem; color: var(--heading, #2a1656); }
.fapes-h4 { margin: 10px 0 6px; font-size: .88rem; color: var(--muted); }
.fapes-muted { color: var(--muted, #5a5070); font-size: .88rem; }

.fapes-tone--verde { --tone: var(--fapes-verde); --tone-bg: var(--fapes-verde-bg); }
.fapes-tone--dourado { --tone: var(--fapes-dourado); --tone-bg: var(--fapes-dourado-bg); }
.fapes-tone--rosa { --tone: var(--fapes-rosa); --tone-bg: var(--fapes-rosa-bg); }
.fapes-tone--vermelho { --tone: var(--fapes-vermelho); --tone-bg: var(--fapes-vermelho-bg); }
.fapes-tone--cinza { --tone: var(--fapes-cinza); --tone-bg: var(--fapes-cinza-bg); }

.fapes-card--verdict { border-left: 6px solid var(--tone); }
.fapes-verdict { display: flex; gap: 14px; align-items: flex-start; background: var(--tone-bg); border-radius: 12px; padding: 14px; }
.fapes-verdict-icon { font-size: 1.6rem; color: var(--tone); line-height: 1; }
.fapes-verdict-label { font-size: 1.05rem; font-weight: 800; color: var(--tone); margin: 0 0 4px; }
.fapes-badge { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; background: var(--tone, var(--accent)); color: #fff; border-radius: 999px; padding: 2px 8px; }
.fapes-badge--block { background: var(--fapes-vermelho); }

.fapes-regua { display: flex; gap: 6px; flex-wrap: wrap; }
/* Inativos: neutros (não poluir com 5 cores). Ativo: assume seu tom. */
.fapes-regua-step { flex: 1 1 auto; min-width: 84px; text-align: center; padding: 8px 6px; border-radius: 8px; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--card-border, rgba(76,42,170,0.2)); color: var(--muted, #5a5070); background: transparent; }
.fapes-regua-step.is-active { color: var(--tone); border-color: var(--tone); background: var(--tone-bg); box-shadow: 0 0 0 2px var(--tone) inset; }

.fapes-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.fapes-list code, .fapes-direito code, .fapes-table code { font-size: .74rem; background: var(--accent-soft, rgba(138,76,240,0.12)); color: var(--accent, #8a4cf0); padding: 1px 5px; border-radius: 5px; }

.fapes-direitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fapes-direito { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--tone-bg); border-left: 4px solid var(--tone); }
.fapes-direito-tema { font-weight: 600; }
.fapes-direito-cat { font-size: .78rem; color: var(--tone); font-weight: 700; }
@media (max-width: 560px) { .fapes-direito { grid-template-columns: 1fr; } }

.fapes-table-wrap { overflow-x: auto; }
.fapes-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fapes-table th, .fapes-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--card-border, rgba(76,42,170,0.18)); vertical-align: top; }
.fapes-table thead th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }

.fapes-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fapes-checklist li { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.fapes-checklist .fapes-doc-state { font-weight: 800; width: 1.2em; text-align: center; }
.fapes-checklist li.is-ok { color: var(--fapes-verde); }
.fapes-checklist li.is-block { color: var(--fapes-vermelho); }
.fapes-checklist li.is-pend { color: var(--muted); }

/* Memória técnica: secundária e colapsável, para não dominar a tela. */
.fapes-memoria summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--muted, #5a5070); list-style-position: inside; }
.fapes-memoria summary:hover { color: var(--accent, #8a4cf0); }
.fapes-memoria[open] summary { margin-bottom: 10px; color: var(--heading, #2a1656); }
.fapes-card--memoria { background: transparent; border-style: dashed; }
.fapes-memoria p { margin: 0 0 6px; }
/* Listas de respostas/status das fontes: secundárias, legíveis, sem dominar. */
.fapes-respostas-lista { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: .84rem; }
.fapes-respostas-lista li { display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px dashed var(--card-border, rgba(76,42,170,0.14)); padding-bottom: 3px; }
.fapes-resp-label { color: var(--muted, #5a5070); }
.fapes-resp-val { font-weight: 600; text-align: right; }
.fapes-respostas summary { cursor: pointer; font-size: .85rem; color: var(--muted, #5a5070); margin-top: 6px; }
.fapes-respostas summary:hover { color: var(--accent, #8a4cf0); }
.fapes-respostas[open] summary { color: var(--heading, #2a1656); margin-bottom: 6px; }
@media (max-width: 560px) {
  .fapes-respostas-lista li { flex-direction: column; gap: 0; }
  .fapes-resp-val { text-align: left; }
}

/* Bloco de download do parecer DOCX (reusa o botão primário do módulo). */
.fapes-download { display: grid; gap: 10px; justify-items: start; }
.fapes-download .fapes-btn--primary[disabled] { opacity: .6; cursor: progress; }
.fapes-download-status:empty { display: none; }
.fapes-download-status.is-error { color: var(--fapes-vermelho); }

.fapes-disclaimer { border: 1px dashed var(--fapes-rosa); background: var(--fapes-rosa-bg); }
.fapes-disclaimer p { margin: 0 0 4px; font-size: .88rem; }

/* ===== Dashboard do parecer (Step 5) ===== */
.fapes-dash { display: grid; gap: 16px; }

/* Hero de resultado */
.fapes-hero { display: grid; gap: 14px; border-left: 6px solid var(--tone, var(--accent));
  background: linear-gradient(180deg, var(--tone-bg), transparent 120%); }
.fapes-hero-main { display: flex; gap: 16px; align-items: flex-start; }
.fapes-hero-icon { font-size: 2rem; line-height: 1; color: var(--tone, var(--accent)); flex: none; }
.fapes-hero-text { min-width: 0; }
.fapes-hero-eyebrow { text-transform: uppercase; letter-spacing: .07em; font-size: .72rem; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.fapes-hero-verdict { margin: 0 0 6px; font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--tone, var(--heading)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.2; }
.fapes-hero-risk { margin: 0 0 8px; }
.fapes-risk-chip { display: inline-block; font-weight: 700; font-size: .8rem; padding: 3px 12px; border-radius: 999px; color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone); }
.fapes-hero-conclusao { margin: 0 0 6px; }
.fapes-hero-revisar { margin: 6px 0 0; font-size: .86rem; font-weight: 600; color: var(--fapes-vermelho); }
.fapes-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Índice de navegação (rola até a seção; não esconde conteúdo) */
.fapes-index { display: flex; gap: 8px; flex-wrap: wrap; }
.fapes-index-btn { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer;
  border: 1px solid var(--card-border, rgba(76,42,170,0.22)); background: var(--card-strong, #fff); color: var(--muted);
  padding: 7px 14px; border-radius: 999px; }
.fapes-index-btn:hover { color: var(--accent, #8a4cf0); border-color: var(--accent, #8a4cf0); }
@media (max-width: 560px) { .fapes-index { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } }

/* Seções (tudo visível, em ritmo vertical) */
.fapes-secoes { display: grid; gap: 16px; }
.fapes-sec { display: grid; gap: 16px; scroll-margin-top: 12px; }

/* Fatores em duas colunas (densidade visual) */
.fapes-fatores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fapes-fatores-col { min-width: 0; }
@media (max-width: 640px) { .fapes-fatores-grid { grid-template-columns: 1fr; } }

/* Leitura rápida */
.fapes-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.fapes-qcard { border: 1px solid var(--card-border, rgba(76,42,170,0.18)); border-top: 3px solid var(--tone, var(--accent));
  border-radius: 12px; padding: 12px 14px; background: var(--card-strong, #fff); display: grid; gap: 4px; min-width: 0; }
.fapes-qcard-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.fapes-qcard-valor { font-size: 1rem; font-weight: 800; color: var(--tone, var(--heading)); }
.fapes-qcard-texto { font-size: .82rem; color: var(--muted); margin: 0; }

/* Trilha de risco */
.fapes-track { display: grid; gap: 10px; }
.fapes-track-steps { display: flex; gap: 6px; }
.fapes-track-step { flex: 1 1 0; min-width: 0; text-align: center; font-size: .76rem; font-weight: 700; color: var(--muted);
  padding: 10px 4px; border-radius: 8px; border: 1px solid var(--card-border, rgba(76,42,170,0.18)); background: transparent; }
.fapes-track-step.is-active { color: var(--tone); border-color: var(--tone); background: var(--tone-bg); box-shadow: 0 0 0 2px var(--tone) inset; }
.fapes-track-note { margin: 0; font-size: .9rem; color: var(--text); }
@media (max-width: 560px) { .fapes-track-step { font-size: .64rem; padding: 8px 2px; } }

/* Chips de fatores */
.fapes-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.fapes-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--card-border, rgba(76,42,170,0.2)); background: var(--card-strong, #fff); }
.fapes-chip code { font-size: .7rem; background: var(--accent-soft, rgba(138,76,240,0.12)); color: var(--accent, #8a4cf0); padding: 1px 5px; border-radius: 5px; }
.fapes-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.fapes-chip--up .fapes-dot { background: var(--fapes-rosa); }
.fapes-chip--down .fapes-dot { background: var(--fapes-verde); }
.fapes-empty { font-style: italic; }

/* Cabeçalho do comparativo */
.fapes-vs { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.fapes-vs-chip { font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 999px; }
.fapes-vs-pbb { background: var(--accent-soft, rgba(138,76,240,0.12)); color: var(--accent, #8a4cf0); }
.fapes-vs-pbbcd { background: var(--fapes-dourado-bg); color: var(--fapes-dourado); border: 1px solid var(--fapes-dourado); }
.fapes-vs-x { color: var(--muted); font-weight: 800; }

/* Filtro + matriz de direitos */
.fapes-filterbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fapes-filter { font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--card-border, rgba(76,42,170,0.25)); background: transparent; color: var(--muted); }
.fapes-filter:hover { color: var(--accent, #8a4cf0); border-color: var(--accent, #8a4cf0); }
.fapes-filter.is-active { background: var(--accent, #8a4cf0); color: var(--accent-contrast, #fff); border-color: transparent; }
.fapes-matriz { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.fapes-dcard { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--tone-bg); border-left: 4px solid var(--tone); min-width: 0; }
.fapes-dcard[hidden] { display: none; }
.fapes-dcard-tema { font-weight: 700; color: var(--heading, #2a1656); }
.fapes-dcard-cat { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--tone); }
.fapes-dcard code { justify-self: start; font-size: .7rem; background: var(--accent-soft, rgba(138,76,240,0.12)); color: var(--accent, #8a4cf0); padding: 1px 5px; border-radius: 5px; }

/* Painel de documentos */
.fapes-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.fapes-progress-bar { flex: 1 1 160px; height: 8px; border-radius: 999px; background: var(--card-border, rgba(76,42,170,0.18)); overflow: hidden; }
.fapes-progress-bar span { display: block; height: 100%; background: var(--fapes-verde); border-radius: 999px; }
.fapes-progress-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.fapes-doc-group { margin: 0 0 10px; }
.fapes-doc-group .fapes-checklist li { gap: 8px; flex-wrap: wrap; }
.fapes-doc-group code { font-size: .7rem; background: var(--accent-soft, rgba(138,76,240,0.12)); color: var(--accent, #8a4cf0); padding: 1px 5px; border-radius: 5px; }

/* Bloco de análise humana */
.fapes-humana { border-left: 6px solid var(--tone); background: var(--tone-bg); }

/* Ações finais */
.fapes-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }