/* Finance em leitura (F5a): visão geral, conciliação, DRE, importações e fontes.
   Mesma família visual do OS (Inter, 2 px, tokens Prism); tabelas rolam no próprio contêiner. */
.fin-page { --fin-field-border: #616161; min-height: 100%; background: var(--surface-raised); }
.fin-wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 40px 32px 64px; }
.fin-wrap--wide { max-width: 1200px; }

.fin-banner { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 32px; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; }
.fin-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); }
.fin-banner--private { background: var(--sub-action-bg); color: var(--sub-action-ink); }
.fin-banner--private .fin-banner-dot { background: currentColor; }

.fin-head { min-width: 0; }
.fin-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fin-eyebrow a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.fin-eyebrow a:hover { color: var(--text-strong); }
.fin-sep { color: var(--text-tertiary); }
.fin-title { color: var(--text-strong); font-size: 30px; font-weight: 600; line-height: 38px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fin-title:focus { outline: none; }
.fin-lead { margin-top: 8px; color: var(--text-secondary); font-size: 16px; line-height: 26px; }
.fin-note { margin-top: 12px; padding: 12px 14px; border-left: 2px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }

.fin-section { margin-top: 36px; }
.fin-h2 { color: var(--text-strong); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-h2); }
.fin-h3 { margin-top: 18px; color: var(--text-strong); font-size: 15px; font-weight: 600; line-height: 22px; }

.fin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.fin-facts div { min-width: 0; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-facts dt { color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fin-facts dd { margin-top: 4px; color: var(--text); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.fin-facts--compact { margin-top: 16px; }

.fin-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; list-style: none; }
.fin-rule { display: flex; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-rule-letter { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text-strong); font-size: 13px; font-weight: 700; }
.fin-rule-body { min-width: 0; }
.fin-rule-body h3 { color: var(--text-strong); font-size: 14px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; }
.fin-rule-body p { margin-top: 4px; color: var(--text-secondary); font-size: 13px; line-height: 20px; }

.fin-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; list-style: none; }
.fin-group { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-group h3 { color: var(--text-strong); font-size: 14px; font-weight: 600; line-height: 20px; }
.fin-group-count { margin-top: 4px; color: var(--text-strong); font-size: 28px; font-weight: 600; line-height: 34px; font-variant-numeric: tabular-nums; }
.fin-meta { margin-top: 4px; color: var(--text-secondary); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.fin-last-import { margin-top: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-last-import p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-strong); font-size: 14px; line-height: 20px; }

.fin-badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface-sunken); color: var(--text-strong); font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.fin-badge-ref { display: inline-block; margin-left: 6px; color: var(--text-secondary); font-size: 12px; line-height: 18px; white-space: nowrap; }

.fin-tabs-wrap { margin-top: 28px; }
.fin-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); }
.fin-tab { min-height: 44px; padding: 8px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; }
.fin-tab:hover { background: var(--hover); color: var(--text-strong); }
.fin-tab[aria-selected="true"] { border-bottom-color: var(--text-strong); color: var(--text-strong); }
.fin-tab:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.fin-panel { padding-top: 16px; }

.fin-scroll { max-width: 100%; margin-top: 16px; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-scroll:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.fin-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.fin-table--dre { min-width: 820px; }
.fin-table th, .fin-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-table thead th { position: sticky; top: 0; background: var(--surface-sunken); color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.fin-table th:first-child, .fin-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; }
.fin-table thead th:first-child { z-index: 2; background: var(--surface-sunken); }
.fin-table tbody th { color: var(--text); font-weight: 500; }
.fin-table tbody tr:last-child th, .fin-table tbody tr:last-child td { border-bottom: 0; }
.fin-table tr.is-subtotal th, .fin-table tr.is-subtotal td { color: var(--text-strong); font-weight: 600; }
.fin-table .fin-total { color: var(--text-strong); font-weight: 600; }
.fin-table code { color: var(--text); font-family: var(--font-mono); font-size: 12px; }

.fin-list { margin-top: 12px; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.fin-list li + li { margin-top: 6px; }
.fin-list code { color: var(--text); font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }

.fin-empty { margin-top: 16px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius, 2px); background: var(--surface); color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.fin-loading { padding: 24px 0; color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.fin-error { padding: 8px 0; }
.fin-error p { margin-top: 10px; color: var(--text-secondary); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.fin-actions { margin-top: 18px; }
.fin-primary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius, 2px); background: var(--text-strong); color: var(--surface); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fin-primary:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.fin-primary:disabled, .fin-secondary:disabled { cursor: not-allowed; opacity: 0.6; }
.fin-secondary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius, 2px); background: var(--surface); color: var(--text-strong); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fin-secondary:hover { background: var(--hover); }
.fin-secondary:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.fin-fact-link { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.fin-fact-link:hover { text-decoration-color: currentColor; }
.fin-tabs a { text-decoration: none; }

.fin-pend-progress { margin-top: 16px; color: var(--text-strong); font-size: 15px; font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
.fin-pend-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.fin-field { display: flex; flex: 0 1 auto; flex-direction: column; gap: 4px; min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.fin-field select, .fin-field input { min-height: 44px; max-width: 100%; padding: 0 10px; border: 1px solid var(--fin-field-border); border-radius: var(--radius, 2px); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 400; }
.fin-field input[type="search"] { width: 260px; }
.fin-field select:focus-visible, .fin-field input:focus-visible, .fin-pend-select:focus-visible, .fin-check input:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

#fin-pend-panel { padding-bottom: 84px; }

.fin-pend-list, .fin-link-list { display: grid; gap: 10px; margin-top: 16px; list-style: none; }
.fin-pend-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-pend-row.is-chosen { border-color: var(--border-strong); }
.fin-pend-main { flex: 1 1 260px; min-width: 0; }
.fin-pend-name { color: var(--text-strong); font-size: 15px; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
.fin-pend-meta { margin-top: 2px; color: var(--text-secondary); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.fin-pend-control { display: flex; flex: 0 1 260px; flex-direction: column; gap: 4px; min-width: 0; }
.fin-pend-label { color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fin-pend-select { width: 100%; min-height: 44px; max-width: 100%; padding: 0 10px; border: 1px solid var(--fin-field-border); border-radius: var(--radius, 2px); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.fin-field select, .fin-pend-select { -webkit-appearance: none; appearance: none; min-height: 44px; line-height: 20px; padding: 0 36px 0 10px; background-image: linear-gradient(45deg, transparent 50%, #616161 50%), linear-gradient(135deg, #616161 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
.fin-pend-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 18px; }
.fin-pend-status.is-saved { color: var(--text-strong); font-weight: 600; }
.fin-pend-status.is-error { color: var(--text-strong); }
.fin-link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--text-strong); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fin-link-button:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

.fin-link-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-link-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fin-link-head h3 { color: var(--text-strong); font-size: 16px; font-weight: 600; line-height: 24px; overflow-wrap: anywhere; }
.fin-link-fieldset { min-width: 0; margin-top: 14px; padding: 0; border: 0; }
.fin-link-fieldset legend { padding: 0; color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fin-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--text); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }
.fin-check input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--text-strong); }
.fin-check .fin-meta { margin-top: 0; }
.fin-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }

.fin-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border-strong); border-left-width: 4px; border-radius: var(--radius, 2px); background: var(--surface); color: var(--text-strong); font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.fin-apply { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius, 2px); background: var(--surface); }
.fin-apply-text { min-width: 0; }
.fin-apply-text p { color: var(--text); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.fin-apply-text .fin-meta { margin-top: 2px; }
.fin-apply-result { margin-top: 6px; color: var(--text-strong); font-size: 13px; font-weight: 600; }

@container os-body (max-width: 640px) {
  .fin-banner { padding: 8px 16px; }
  .fin-wrap { padding: 20px 16px 40px; }
  .fin-title { font-size: 26px; line-height: 34px; }
  .fin-lead { font-size: 15px; line-height: 24px; }
  .fin-section { margin-top: 28px; }
  .fin-facts, .fin-rules, .fin-groups { grid-template-columns: minmax(0, 1fr); }
  .fin-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .fin-tab { flex: 0 0 auto; white-space: nowrap; }
  .fin-pend-control, .fin-field { flex: 1 1 100%; }
  .fin-field input[type="search"] { width: 100%; }
  #fin-pend-panel { padding-bottom: 148px; }
  .fin-apply { align-items: stretch; }
  .fin-apply .fin-primary { width: 100%; justify-content: center; }
  .fin-table--dre th:first-child { width: 9.5rem; min-width: 9.5rem; max-width: 9.5rem; white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
  .fin-banner { top: var(--head-h); }
  #fin-pend-panel { padding-bottom: calc(148px + var(--head-h)); }
  .fin-apply { bottom: calc(var(--head-h) + env(safe-area-inset-bottom)); }
}