/* Proposta de CSS do Financeiro (11/11/2026).
   Base neutra com profundidade por camadas; violeta só para identidade e seleção; ciano 4DO só na ação principal;
   verde e vinho só para estado. Um conjunto de tokens para o app inteiro (substitui a mistura --fin-* + --access-*). */

@font-face { font-family: "Montserrat 4DO"; src: url("fonts/montserrat-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat 4DO"; src: url("fonts/montserrat-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex 4DO"; src: url("fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Escala tipográfica: 6 tamanhos, mínimo 13 px. */
  --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-2xl: 40px;
  --font: "Montserrat 4DO", Arial, sans-serif;
  --mono: "Plex 4DO", ui-monospace, monospace;
  /* Espaço em base 4; raios em 3 degraus. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --dur: 160ms;
}

:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6fa;          /* palco */
  --surface: #ffffff;     /* cartão */
  --surface-2: #eceef5;   /* trilho, cabeçalho de tabela */
  --surface-3: #e2e6f0;   /* hover neutro */
  --line: #dde1ec;        /* divisória */
  --line-strong: #8a93ad; /* borda com função (campo, botão) 3,06:1 */
  --ink: #0b1024;         /* texto 18,9:1 */
  --ink-2: #3d465f;       /* apoio 9,4:1 */
  --ink-3: #566079;       /* legenda 6,3:1 */
  --brand: #6a0fb8;       /* identidade 8,9:1 */
  --brand-wash: #f3ecfc;
  --brand-ink: #5b0d9e;   /* sobre a lavagem 9,1:1 */
  --action: #01e2fe; --action-ink: #0b1024; /* 12:1 */
  --ok: #0b6b57; --ok-wash: #e3f4ee;
  --bad: #9b1c3f; --bad-wash: #fbe9ee;
  --focus: 0 0 0 3px rgba(106, 15, 184, .28);
  --e1: 0 1px 2px rgba(11, 16, 36, .06), 0 1px 1px rgba(11, 16, 36, .04);
  --e2: 0 2px 4px rgba(11, 16, 36, .06), 0 12px 28px -12px rgba(54, 20, 110, .22);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e22;
  --surface: #0f1430;
  --surface-2: #141a38;
  --surface-3: #1b2246;
  --line: #252d4d;
  --line-strong: #6b77a0;
  --ink: #f2f4fb;
  --ink-2: #b8c0da;
  --ink-3: #98a2c0;
  --brand: #c9a2ff;
  --brand-wash: #25183f;
  --brand-ink: #d9bdff;
  --action: #01e2fe; --action-ink: #010214;
  --ok: #6ee7c8; --ok-wash: #0d2a2a;
  --bad: #ffb3c7; --bad-wash: #3a1324;
  --focus: 0 0 0 3px rgba(201, 162, 255, .35);
  --e1: 0 1px 2px rgba(0, 0, 0, .35);
  --e2: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 32px -14px rgba(0, 0, 0, .6);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 400 var(--t-md)/1.55 var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; transition: background var(--dur), color var(--dur); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.mono { font-family: var(--mono); }

/* ── Barra de demonstração (fora do app) ───────────────────────────────── */
.demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s2) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-2); }
.demo strong { color: var(--ink); }
.demo .grupo { display: inline-flex; gap: var(--s1); padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.demo .grupo button { border: 0; background: none; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: var(--t-xs); color: var(--ink-2); }
.demo .grupo button[aria-pressed="true"] { background: var(--brand-wash); color: var(--brand-ink); font-weight: 600; }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
.topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s4); height: 64px; padding: 0 var(--s5); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--e1); }
.marca { display: flex; align-items: center; gap: var(--s3); padding-right: var(--s4); border-right: 1px solid var(--line); }
.marca svg { width: 72px; height: auto; color: var(--ink); }
.produto { font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.campo { height: 40px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-sm); }
.campo.busca { width: 280px; padding-left: 36px; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23566079' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; border-color: transparent; }
.campo.busca:hover { border-color: var(--line-strong); }
.btn { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background var(--dur), border-color var(--dur); }
.btn:hover { background: var(--surface-2); }
.btn.acao { background: var(--action); color: var(--action-ink); border-color: transparent; }
.btn.acao:hover { filter: brightness(.95); }
.espaco { flex: 1; }
.perfil { display: flex; align-items: center; gap: var(--s2); }
.rotulo { font: 400 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.quem { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); font-weight: 600; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-ink); font-size: var(--t-xs); font-weight: 600; }

/* ── Estrutura ─────────────────────────────────────────────────────────── */
.corpo { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 64px - 37px); }
.lateral { padding: var(--s5) var(--s3); background: var(--surface-2); border-right: 1px solid var(--line); }
.lateral .rotulo { padding: 0 var(--s3); margin-bottom: var(--s2); }
.lateral a { position: relative; display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--t-sm); text-decoration: none; cursor: pointer; transition: background var(--dur), color var(--dur); }
.lateral a svg { width: 18px; height: 18px; flex: none; }
.lateral a:hover { background: var(--surface-3); color: var(--ink); }
.lateral a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--e1); }
.lateral a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--brand); }
.lateral a[aria-current="page"] svg { color: var(--brand); }
.palco { min-width: 0; padding: var(--s6) clamp(var(--s4), 3vw, var(--s7)) var(--s7); }
.palco-largura { max-width: 1440px; margin: 0 auto; }

/* ── Cabeçalho de página ───────────────────────────────────────────────── */
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); font-size: var(--t-xs); color: var(--ink-3); }
.trilha b { color: var(--ink-2); font-weight: 600; }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.cabeca h1 { font-size: var(--t-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.cabeca p { max-width: 62ch; margin-top: var(--s3); font-size: var(--t-md); color: var(--ink-2); }
.empresa { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--s2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e1); }
.empresa .sigla { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--ink); color: var(--surface); font-size: var(--t-xs); font-weight: 600; }
.empresa b { display: block; font-size: var(--t-sm); }
.empresa span { font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }

/* ── Abas ──────────────────────────────────────────────────────────────── */
.abas { display: flex; gap: var(--s1); margin-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.abas button { position: relative; height: 44px; padding: 0 var(--s4); border: 0; background: none; color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; cursor: pointer; }
.abas button:hover { color: var(--ink); }
.abas button[aria-selected="true"] { color: var(--ink); }
.abas button[aria-selected="true"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }

/* ── Cartões de área (Treinar) ─────────────────────────────────────────── */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.area { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); text-align: left; cursor: pointer; transition: box-shadow var(--dur), border-color var(--dur), transform var(--dur); }
.area:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--e2); transform: translateY(-2px); }
.area .icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand-wash); color: var(--brand-ink); }
.area .icone svg { width: 22px; height: 22px; }
.area h3 { margin-top: var(--s2); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }
.area p { flex: 1; font-size: var(--t-sm); color: var(--ink-2); }
.area footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); }
.area footer .seta { color: var(--ink-3); transition: color var(--dur), transform var(--dur); }
.area:hover footer .seta { color: var(--brand); transform: translateX(3px); }
.area.ligada .icone { background: var(--brand); color: var(--surface); }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.ok { background: var(--ok-wash); color: var(--ok); }
.estado.neutro { background: var(--surface-2); color: var(--ink-2); }
.estado.bad { background: var(--bad-wash); color: var(--bad); }

/* ── Tabela (Cadastro) ─────────────────────────────────────────────────── */
.quadro { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); overflow: hidden; }
.quadro-topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.quadro-topo h2 { font-size: var(--t-lg); font-weight: 600; }
.conta { font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
thead th { position: sticky; top: 64px; padding: var(--s3) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--line); text-align: left; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
thead th button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-weight: 600; cursor: pointer; color: inherit; }
thead th button:hover { color: var(--ink); }
tbody td { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
tbody tr { transition: background var(--dur); }
tbody tr:hover { background: color-mix(in srgb, var(--brand-wash) 55%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
td .nome { display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
.selo { padding: 1px 8px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-ink); font-size: 12px; font-weight: 600; }
.ferramentas { display: flex; gap: var(--s1); }
.ferramenta { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--ink-2); cursor: pointer; }
.ferramenta:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.ferramenta svg { width: 17px; height: 17px; }
.vazio { padding: var(--s6) var(--s5); text-align: center; font-size: var(--t-sm); color: var(--ink-3); }

/* ── Antes × depois ────────────────────────────────────────────────────── */
.notas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); margin-top: var(--s6); }
.nota { padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.nota h4 { margin-bottom: var(--s2); font-size: var(--t-sm); font-weight: 600; }
.nota p { font-size: var(--t-sm); color: var(--ink-2); }

@media (max-width: 900px) {
  .corpo { grid-template-columns: 1fr; }
  .lateral { display: flex; gap: var(--s2); overflow-x: auto; padding: var(--s2) var(--s4); border-right: 0; border-bottom: 1px solid var(--line); }
  .lateral .rotulo { display: none; }
  .campo.busca, .perfil .rotulo, .quem span:last-child { display: none; }
  .tabela-rolagem { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }