/*
  Folha eventual — componente-base das folhas que rodam por fora da mensal
  (complementar DP-582, PLR DP-589, dissídio DP-583). Só composição de tokens
  e componentes do kit (tokens.css + components.css): nenhum hex aqui.

  Blocos:
    .fe-head        cabeçalho da folha (título, badges, metadados, estado)
    .fe-flow        estados do fluxo (apurado → validação → aprovado → aplicado)
    .fe-kpis        linha de indicadores (stat-card do kit)
    .fe-compare     visão lado a lado (original × complementar)
    .fe-mem         memória de cálculo (linhas rótulo / valor) dentro do sheet
    .fe-actions     barra de ações fixa no rodapé da área de conteúdo
    .fe-choice      cartões de escolha (classificação da entrada)
*/

.fe-page { display: flex; flex-direction: column; gap: 16px; }

/* ── Cabeçalho ─────────────────────────────────────────────────────── */
.fe-head { display: flex; flex-direction: column; gap: 16px; }
.fe-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.fe-head-top > :first-child { flex: 1; min-width: 0; }
.fe-head-top > :last-child { flex-shrink: 0; }
.fe-eyebrow { font-family: var(--font-family-eyebrow, var(--font-sans)); font-size: var(--font-size-eyebrow, 11px); font-weight: var(--font-weight-eyebrow, 500); letter-spacing: var(--letter-spacing-eyebrow, 0.14em); line-height: var(--line-height-eyebrow, 16px); text-transform: uppercase; color: var(--muted-foreground); }
.fe-title { font-size: var(--font-size-xl, 20px); font-weight: var(--font-weight-semibold); line-height: 1.3; color: var(--foreground); letter-spacing: -0.01em; }
.fe-sub { font-size: var(--font-size-sm); color: var(--muted-foreground); line-height: var(--line-height-sm); }
.fe-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fe-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
.fe-meta .detail-field-value .cell-mono { font-size: var(--font-size-13); }

/* ── Estados do fluxo ──────────────────────────────────────────────── */
.fe-flow { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 12px 16px; }
.fe-flow-step { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-13); color: var(--muted-foreground); white-space: nowrap; }
.fe-flow-dot { width: 20px; height: 20px; border-radius: var(--radius-full); border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--font-weight-semibold); background: var(--background); flex-shrink: 0; }
.fe-flow-dot svg { width: 12px; height: 12px; }
.fe-flow-step.is-done { color: var(--foreground); }
.fe-flow-step.is-done .fe-flow-dot { background: var(--success); border-color: var(--success); color: var(--success-foreground); }
.fe-flow-step.is-active { color: var(--foreground); font-weight: var(--font-weight-semibold); }
.fe-flow-step.is-active .fe-flow-dot { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning-text); }
.fe-flow-line { flex: 1; min-width: 16px; height: 1.5px; background: var(--border); margin: 0 12px; }
.fe-flow-line.is-done { background: var(--success); }
.fe-flow-who { font-size: var(--font-size-xs); color: var(--muted-foreground); font-weight: var(--font-weight-medium); }

/* ── Indicadores ───────────────────────────────────────────────────── */
.fe-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.fe-kpis .stat-card { padding: 12px 16px; min-width: 0; }
.fe-kpis .stat-card-value { font-size: var(--font-size-xl); line-height: 1.3; white-space: nowrap; }
.fe-kpis .stat-card-sub { font-size: var(--font-size-xs); color: var(--muted-foreground); }

/* ── Lado a lado ───────────────────────────────────────────────────── */
.fe-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: stretch; }
.fe-compare-col { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.fe-compare-col.is-original { background: var(--muted); }
.fe-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.fe-compare-head .card-title { font-size: var(--font-size-sm); }
.fe-compare-body { padding: 0; }
.fe-compare-body .dtable { width: 100%; }
.fe-compare-foot { margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--font-size-xs); color: var(--muted-foreground); display: flex; gap: 6px; align-items: center; }
.fe-compare-foot svg { width: 14px; height: 14px; color: var(--success-text); }

/* ── Tabela da conferência ─────────────────────────────────────────── */
.fe-table th, .fe-table td { white-space: nowrap; }
.fe-table td.cell-num, .fe-table th.cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.fe-table .fe-sub-cell { display: block; font-size: var(--font-size-xs); color: var(--muted-foreground); font-weight: var(--font-weight-normal, 400); }
.fe-table tr.fe-row-flag td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.fe-table tr.fe-row-block td:first-child { box-shadow: inset 3px 0 0 var(--destructive); }
.fe-table tfoot td { font-weight: var(--font-weight-semibold); }
.fe-delta { color: var(--info-text); font-weight: var(--font-weight-medium); }
.fe-na { color: var(--muted-foreground); font-size: var(--font-size-xs); }

/* ── Memória de cálculo (no sheet) ─────────────────────────────────── */
.fe-mem { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.fe-mem-title { padding: 8px 12px; background: var(--muted); border-bottom: 1px solid var(--border); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }
.fe-mem-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: var(--font-size-13); }
.fe-mem-row:last-child { border-bottom: 0; }
.fe-mem-row .l { color: var(--muted-foreground); }
.fe-mem-row .v { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); color: var(--foreground); text-align: right; }
.fe-mem-row.is-total { background: var(--info-subtle); }
.fe-mem-row.is-total .l, .fe-mem-row.is-total .v { color: var(--info-text); font-weight: var(--font-weight-semibold); }
.fe-mem-note { font-size: var(--font-size-xs); color: var(--muted-foreground); line-height: var(--line-height-xs); }

/* ── Escolha na entrada ────────────────────────────────────────────── */
.fe-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fe-choice { text-align: left; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; font: inherit; color: inherit; }
.fe-choice:hover { background: var(--outline-hover); }
.fe-choice.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--accent); }
.fe-choice-icon { width: 36px; height: 36px; border-radius: var(--radius-lg); background: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--foreground); }
.fe-choice-icon svg { width: 18px; height: 18px; }
.fe-choice-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--foreground); }
.fe-choice-desc { font-size: var(--font-size-13); color: var(--muted-foreground); line-height: 1.5; margin-top: 2px; }
.fe-choice:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ── Ações fixas ───────────────────────────────────────────────────── */
/* Rodapé de ações: largura inteira da área de conteúdo, colado na base, com
   sombra para cima; o conteúdo passa por baixo dele, não ao lado. */
.fe-actions { position: sticky; bottom: -48px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; margin: 8px -24px -48px; border-top: 1px solid var(--border); background: var(--background); box-shadow: 0 -6px 16px -10px color-mix(in oklab, var(--foreground) 25%, transparent); }
.fe-actions-info { font-size: var(--font-size-13); color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; }
.fe-actions-info svg { width: 16px; height: 16px; }
.fe-actions-btns { display: flex; gap: 8px; }

/* ── Vínculo original ↔ complementares (RN-11) ─────────────────────── */
.fe-link-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--font-size-xs); color: var(--link); background: var(--card); text-decoration: none; cursor: pointer; }
.fe-link-chip:hover { background: var(--outline-hover); }
.fe-link-chip svg { width: 12px; height: 12px; }

/* ── Diversos ──────────────────────────────────────────────────────── */
.fe-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fe-muted { color: var(--muted-foreground); }
.fe-mono { font-family: var(--font-mono); font-size: 12px; }
.fe-pill-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); align-items: center; justify-content: center; background: var(--muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--foreground); }
.fe-tabs { margin-bottom: 4px; }
.fe-hidden { display: none !important; }
.fe-proto-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--font-size-xs); color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 8px 12px; }
.fe-proto-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.fe-proto-note b { color: var(--foreground); font-weight: var(--font-weight-semibold); }

/* Seletor de cenário do protótipo (fora do produto) */
.fe-scenario { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-xs); color: var(--muted-foreground); }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
#fe-sheet-body > * { flex-shrink: 0; }
#fe-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.fe-tabs { align-self: stretch; justify-content: flex-start; }
.fe-table td svg.lucide, .fe-table td > svg { display: inline-block; vertical-align: -2px; }
.card-description svg, .fe-sub svg { display: inline-block; vertical-align: -2px; }

/* Telas mais estreitas (notebook, painel lateral): cabeçalho e ações quebram linha. */
@media (max-width: 1180px) {
  .fe-head-top { flex-direction: column; gap: 12px; }
  .fe-head-top > :last-child { align-items: flex-start; }
  .fe-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-actions { flex-wrap: wrap; }
  .fe-actions-btns { flex-wrap: wrap; }
  .fe-flow { flex-wrap: wrap; row-gap: 8px; }
  .fe-compare { grid-template-columns: 1fr; }
}

/* Bloco recolhível (details) no desenho do DS: chevron, texto discreto, foco só no teclado. */
.fe-details > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; margin-left: -6px; border-radius: var(--radius-md); font-size: var(--font-size-13); color: var(--muted-foreground); cursor: pointer; user-select: none; }
.fe-details > summary::-webkit-details-marker { display: none; }
.fe-details > summary::marker { content: ""; }
.fe-details > summary:hover { color: var(--foreground); background: var(--outline-hover); }
.fe-details > summary:focus { outline: none; }
.fe-details > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.fe-details > summary svg { width: 14px; height: 14px; transition: transform 0.15s; }
.fe-details[open] > summary svg { transform: rotate(90deg); }