/* Padrão visual financeiro. Referência: docs/padrao-ux-financeiro.md. */
:root {
  --finance-surface: var(--secondary, #191c24);
  --finance-border: #394254;
  --finance-text: #f3f5f9;
  --finance-muted: #b5becc;
  --finance-positive: #88dfaa;
  --finance-warning: #f4cf82;
  --finance-negative: #ff9aa3;
  --finance-radius: 12px;
  --finance-gap: 16px;
  --finance-card-padding: 20px;
  --finance-value-size: clamp(1.75rem, 2vw, 2.125rem);
}
.finance-page { width: 100%; min-width: 0; color: var(--finance-text); font-size: 1rem; line-height: 1.5; }
.finance-card { display: flex; flex-direction: column; min-width: 0; padding: var(--finance-card-padding); border: 1px solid var(--finance-border); border-radius: var(--finance-radius); background: var(--finance-surface); }
.finance-card-header { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; align-items: center; min-height: 70px; margin-bottom: 18px; }
.finance-card-title { display: flex; align-items: center; min-height: 44px; margin: 0; color: var(--finance-text); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.finance-card-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--finance-border); border-radius: 9px; background: #28303e; color: #acb8cc; }
.finance-period { grid-column: 2; font-size: .875rem; color: var(--finance-muted); }
.finance-value { margin: 8px 0 0; color: var(--finance-text); font-size: var(--finance-value-size); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.finance-caption { color: var(--finance-muted); font-size: .875rem; }
.finance-page :is(button, a, input, select, summary):focus-visible { outline: 3px solid #9dc4ff; outline-offset: 3px; }
.finance-page :is(.btn, .form-select, .form-control) { min-height: 44px; font-size: 1rem; }
.finance-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Orientações financeiras curtas, com exemplo sob demanda. */
.finance-info-modal { background: var(--finance-surface); border: 1px solid var(--finance-border); border-radius: var(--finance-radius); }
.finance-info-modal .modal-header { gap: 12px; padding: 12px var(--finance-card-padding); border-bottom-color: var(--finance-border); }
.finance-info-modal .modal-title { color: var(--finance-text); font-size: 1.25rem; line-height: 1.4; }
.finance-info-modal .btn-close { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; padding: 0; opacity: .8; }
.finance-info-modal .modal-body { padding: var(--finance-card-padding); }
.finance-info-modal .modal-footer { padding: 0 var(--finance-card-padding) var(--finance-card-padding); border: 0; }
.finance-info-modal .modal-footer .btn { margin: 0; }
.finance-info-steps { display: grid; gap: var(--finance-gap); margin: 0; }
.finance-info-steps > div + div { padding-top: var(--finance-gap); border-top: 1px solid var(--finance-border); }
.finance-info-steps dt { margin-bottom: 4px; color: var(--finance-muted); font-size: .875rem; font-weight: 400; }
.finance-info-steps dd { margin: 0; }
.finance-info-steps p { margin: 4px 0 0; }
.finance-info-action { color: var(--finance-warning); }
.finance-info-example { margin-top: var(--finance-gap); border-top: 1px solid var(--finance-border); }
.finance-info-example summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.finance-info-example .finance-card { gap: 8px; margin-top: 4px; padding: 16px; }
.finance-info-example p { margin: 0; }
.finance-info-example ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }