/* =============================================================================
   Financeiro — peças comuns à área do cliente e ao site público.
   Tokens: tokens-cliente.css (escopo `.fx`).

   Base, foco, botões e alerta saíram do topo de cliente.css sem mudar de ordem:
   index.html liga este arquivo logo antes de cliente.css, então a cascata do
   app continua igual. O site público (`.fx.site`) liga só este e site.css.
   ============================================================================= */

/* --- 0. Base -------------------------------------------------------------------- */

body:has(> #root > .fx) {
  background: color-mix(in srgb, var(--brand-gray-100) 58%, var(--brand-white));
}
html:has(.fx-app) {
  scroll-padding-top: 88px;
  scroll-padding-bottom: 104px;
}
/* Formulário no celular: a barra de ações fixa é mais alta que a navegação. */
html:has(body[data-fx-form]) { scroll-padding-bottom: 152px; }
html:has(.fx dialog[open]) { overflow: hidden; }

.fx {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* O reset para na fronteira do conteúdo antigo (.app-main) e do kit de campos
   (web/shared/ui: tudo dentro de [data-ui], painéis .ui-pop e sheets
   .ui-sheet), que tem desenho próprio em fields.css. */
.fx :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend):where(:not(.app-main *)) {
  margin: 0;
  padding: 0;
}
.fx :where(ul, ol):where(:not(.app-main *)) { list-style: none; }
.fx :where(fieldset):where(:not(.app-main *)) { border: 0; min-width: 0; }
.fx :where(label):where(:not(.app-main *, [data-ui] *)) { display: inline; margin: 0; min-height: 0; }
.fx :where(h1, h2, h3, h4):where(:not(.app-main *)) { font-size: inherit; font-weight: 600; letter-spacing: normal; line-height: 1.3; }
.fx :where(a):where(:not(.app-main *)) { color: inherit; }
.fx :where(button):where(:not(.app-main *, [data-ui] *, .ui-pop *, .ui-sheet *)) {
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: none;
}
.fx :where(button):where(:not(.app-main *, [data-ui] *, .ui-pop *, .ui-sheet *)):active { transform: none; text-decoration: none; }
.fx :where(button, input, select, textarea):where(:not(.app-main *)):disabled { border-style: solid; }
.fx [hidden] { display: none !important; }
.fx img { max-width: 100%; height: auto; }
.fx .ico svg { display: block; }
.fx .ico svg[width="14"] *,
.fx .ico svg[width="16"] * { stroke-width: 1.75; }

/* Números alinham pela casa: valores, datas, contadores e percentuais. */
.fx .fx-num,
.fx .fx-money,
.fx .fx-table td[data-num] { font-variant-numeric: tabular-nums; }
/* Valor grande isolado (indicador, preço do plano) usa algarismos proporcionais:
   largura fixa deixa "R$ 11.000,00" frouxo em tamanho grande. */
.fx :is(.fx-kpi-value, .fx-record-value, .fx-live-value, .fx-price, .fx-sumstrip > :not(.fx-sum-pair) dd) .fx-money { font-variant-numeric: proportional-nums; }
.fx .fx-money { white-space: nowrap; }
.fx .fx-money[data-neg] { color: var(--danger); }
.fx .fx-nowrap { white-space: nowrap; }
.fx .fx-break { overflow-wrap: anywhere; }
.fx .fx-muted { color: var(--ink-3); }
.fx .fx-meta { color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; }

.fx .fx-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 1. Foco ------------------------------------------------------------------------ */

.fx :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-orange) 45%, transparent);
}
.fx :focus:not(:focus-visible) { outline: none; }
.fx .fx-side :focus-visible,
.fx .fx-kpi[data-hero] :focus-visible,
.fx .fx-sum-hero :focus-visible,
.fx .fx-auth-panel :focus-visible {
  outline-color: var(--brand-orange);
  box-shadow: none;
}
.fx .app-main :focus-visible { box-shadow: none; }
@media (forced-colors: active) {
  .fx :focus-visible { outline: 2px solid CanvasText; }
  .fx .fx-badge,
  .fx .fx-chip,
  .fx .ui-seg-face,
  .fx .fx-kpi,
  .fx .fx-card { border: 1px solid CanvasText; }
}

.fx .fx-skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--t-hover) var(--ease);
}
.fx .fx-skip:focus { transform: none; }

/* --- 2. Ações ----------------------------------------------------------------------- */

.fx .fx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h-btn);
  padding: 0 18px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  background: var(--surface-card);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease);
}
.fx .fx-btn:hover { background: var(--tint-blue); }
.fx .fx-btn:active { transform: scale(0.98); }
.fx .fx-btn[data-variant="primary"] { border-color: var(--brand-orange); background: var(--brand-orange); color: var(--ink); }
.fx .fx-btn[data-variant="primary"]:hover { border-color: color-mix(in srgb, var(--brand-orange) 88%, var(--brand-blue)); background: color-mix(in srgb, var(--brand-orange) 88%, var(--brand-blue)); }
.fx .fx-btn[data-variant="ghost"] { border-color: transparent; background: transparent; }
.fx .fx-btn[data-variant="ghost"]:hover { background: var(--tint-blue); }
.fx .fx-btn[data-variant="danger"] { border-color: var(--danger); background: var(--danger); color: var(--on-dark); }
.fx .fx-btn[data-variant="danger"]:hover { background: color-mix(in srgb, var(--danger) 86%, black); }
.fx .fx-btn[data-variant="ghost-danger"] { border-color: transparent; background: transparent; color: var(--danger); }
.fx .fx-btn[data-variant="ghost-danger"]:hover { background: var(--danger-tint); }
.fx .fx-btn[data-size="sm"] { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
.fx .fx-btn-block { display: flex; width: 100%; }
.fx .fx-btn:disabled,
.fx .fx-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.fx .fx-btn[data-state] { opacity: 1; cursor: progress; }
.fx .fx-btn[data-state] > :not(.fx-btn-mark) { visibility: hidden; }
.fx .fx-btn-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.fx .fx-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.fx .fx-iconbtn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.fx .fx-iconbtn:hover { background: var(--tint-blue); color: var(--ink); }
.fx .fx-iconbtn[aria-expanded="true"] { background: var(--tint-blue); color: var(--ink); }

.fx .fx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-blue) 35%, transparent);
  text-underline-offset: 0.22em;
}
.fx .fx-link:hover { text-decoration-color: var(--brand-orange); }
.fx .fx-link-plain { text-decoration: none; }
.fx .fx-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand-blue) 35%, transparent);
  text-underline-offset: 0.22em;
}
.fx .fx-linkbtn:hover { text-decoration-color: var(--brand-orange); }

.fx .fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 22%, var(--brand-white));
  border-radius: var(--r-pill);
  background: var(--surface-card);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.fx .fx-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.fx .fx-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.fx .fx-chip-remove { gap: 8px; padding-right: 10px; background: var(--tint-blue); border-color: transparent; color: var(--ink); }

.fx .fx-copy {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--ink-2);
}
.fx .fx-copy:hover { background: var(--tint-blue); color: var(--ink); }

/* --- Alerta em linha ------------------------------------------------------------------ */

.fx .fx-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink);
}
.fx .fx-alert > .ico { margin-top: 2px; }
.fx .fx-alert[data-kind="info"] { border-color: color-mix(in srgb, var(--brand-beige) 55%, var(--brand-white)); background: var(--surface-beige); }
.fx .fx-alert[data-kind="success"] { border-color: color-mix(in srgb, var(--success) 22%, var(--brand-white)); background: var(--success-tint); }
.fx .fx-alert[data-kind="success"] > .ico { color: var(--success); }
.fx .fx-alert[data-kind="warning"] { border-color: color-mix(in srgb, var(--brand-orange) 45%, var(--brand-white)); background: var(--tint-orange); }
.fx .fx-alert[data-kind="warning"] > .ico { color: var(--orange-ink); }
.fx .fx-alert[data-kind="error"] { border-color: color-mix(in srgb, var(--danger) 26%, var(--brand-white)); background: var(--danger-tint); }
.fx .fx-alert[data-kind="error"] > .ico { color: var(--danger); }
.fx .fx-alert-body { display: grid; flex: 1 1 260px; gap: 2px; min-width: 0; font-size: 0.9375rem; line-height: 1.5; }
.fx .fx-alert-title { font-weight: 600; }
.fx .fx-alert-action { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fx .fx-alert:focus { outline: none; }