/* ComissõesPro — design system (identidade CTECH)
   Um sistema só: uma escala de espaço, um raio por família, um botão, um cartão.
   Cores da CTECH (ctech.net.br): laranja #F7A51C como destaque de marca e ação,
   azul-aço #4874A2 como segunda cor, neutros quentes. Cores de estado só para
   estado; uma cor fixa por série (comissão, recorrente, pontual).
   Tipografia da marca: Poppins nos títulos, Inter no texto e nos números (tabulares).
   Movimento: só transform/opacity, curtos, desligados com prefers-reduced-motion. */

@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-ext-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }

:root {
  color-scheme: light;
  /* espaço */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* raio */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  /* tipo */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "Inter", ui-sans-serif, system-ui, sans-serif;
  --t-xs: 13px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 28px; --t-2xl: 34px;
  /* movimento */
  --m-in: 150ms; --m-out: 120ms; --m-press: 90ms; --m-panel: 200ms; --m-slide: 240ms; --m-count: 900ms;
  --ease: cubic-bezier(.2,.8,.2,1); --ease-enter: cubic-bezier(.22,1,.36,1);

  /* marca CTECH */
  --brand: #F7A51C;
  --brand-deep: #D9860A;
  --brand-blue: #4874A2;

  /* cores — tema claro */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #f4f1eb;
  --surface-3: #ebe6dc;
  --ink: #1f1a14;
  --ink-2: #3f382e;
  --muted: #6d6458;
  --line: rgba(31, 26, 20, .10);
  --line-strong: rgba(31, 26, 20, .18);
  --action: #F7A51C;            /* preenchimento de botões e marcas */
  --action-ink: #1b1306;        /* texto sobre o laranja (contraste 9:1) */
  --action-text: #9a5b00;       /* laranja para texto e links (4.8:1 no branco) */
  --action-soft: rgba(247, 165, 28, .16);
  --success: #1d7f55;
  --success-soft: rgba(29, 127, 85, .12);
  --warning: #9a5b00;
  --warning-soft: rgba(247, 165, 28, .18);
  --danger: #c0392b;
  --danger-soft: rgba(192, 57, 43, .10);
  --series-commission: #E8930F;
  --series-recurring: #4874A2;
  --series-point: #2E9583;
  --series-goal: #9a9184;
  --shadow-1: 0 1px 2px rgba(31, 26, 20, .05);
  --shadow-2: 0 10px 28px rgba(31, 26, 20, .08);
  --shadow-3: 0 22px 54px rgba(31, 26, 20, .18);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-deep);
  /* barra lateral: sempre escura, como o rodapé da marca */
  --side-bg: #16120d;
  --side-surface: #201a13;
  --side-line: rgba(255, 244, 228, .08);
  --side-ink: #f7efe3;
  --side-muted: #b2a797;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #100d09;
  --surface: #1a1611;
  --surface-2: #221d16;
  --surface-3: #2d261d;
  --ink: #f6efe4;
  --ink-2: #d7cec1;
  --muted: #a69b8b;
  --line: rgba(246, 239, 228, .09);
  --line-strong: rgba(246, 239, 228, .17);
  --action: #F7A51C;
  --action-ink: #1b1306;
  --action-text: #F8B648;
  --action-soft: rgba(247, 165, 28, .16);
  --success: #43c58e;
  --success-soft: rgba(67, 197, 142, .14);
  --warning: #F8B648;
  --warning-soft: rgba(247, 165, 28, .16);
  --danger: #f27a6e;
  --danger-soft: rgba(242, 122, 110, .14);
  --series-commission: #F7A51C;
  --series-recurring: #7aa3d4;
  --series-point: #45c0aa;
  --series-goal: #8c8274;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, .4);
  --shadow-3: 0 22px 54px rgba(0, 0, 0, .55);
  --side-bg: #0c0a07;
  --side-surface: #18140f;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--anchor-offset, 80px); }
body {
  font-family: var(--font); font-size: var(--t-sm); line-height: 1.5; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, h5, p { margin: 0; }
h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
a { color: var(--action-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.tone-success { color: var(--success); }
.tone-warning { color: var(--warning); }
.tone-danger { color: var(--danger); }
.tone-action { color: var(--action-text); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 200; background: var(--ink); color: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); }
.skip-link:focus { top: var(--s-3); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-weight: 550; font-size: var(--t-sm); white-space: nowrap;
  transition: transform var(--m-out) var(--ease), background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease), box-shadow var(--m-out) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--danger { color: var(--danger); }
.btn--sm { min-height: 32px; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn--icon { width: 40px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .btn:not([disabled]):hover { transform: translateY(-1px); transition-duration: var(--m-in); border-color: var(--ink-2); }
  .btn--primary:not([disabled]):hover { background: color-mix(in srgb, var(--action) 86%, var(--ink)); border-color: transparent; }
  .btn--ghost:not([disabled]):hover { background: var(--surface-2); border-color: transparent; }
  .btn--danger:not([disabled]):hover { background: var(--danger-soft); border-color: var(--danger); }
}
.btn:not([disabled]):active { transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Campos ---------- */
.field { display: grid; gap: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.field > span:first-child { line-height: 1.3; }
.input, .select {
  width: 100%; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: var(--t-sm); font-weight: 400;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7380' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input::placeholder { color: var(--muted); opacity: .8; }
.input:focus, .select:focus { outline: none; border-color: var(--brand-deep); box-shadow: 0 0 0 3px var(--action-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[disabled], .select[disabled] { background: var(--surface-2); color: var(--muted); }
.field__hint { font-weight: 400; color: var(--muted); }
.field__error { font-weight: 500; color: var(--danger); }
input[type="date"].input { cursor: pointer; }

/* ---------- Superfícies ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card--pad { padding: var(--s-5); }
.card--flat { box-shadow: none; }
.inset { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 550; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.badge--success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge--action { background: var(--action-soft); color: var(--action-text); border-color: transparent; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- Progresso ---------- */
.progress { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.progress > div, .progress > span { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; border-radius: inherit; background: var(--series-commission); transition: width 700ms var(--ease-enter); }
.progress--recurring > div, .progress--recurring > span { background: var(--series-recurring); }
.progress--point > div, .progress--point > span { background: var(--series-point); }
.progress .goal-hit { background: var(--success) !important; }

/* ---------- Toast e diálogo ---------- */
.toasts { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 300; display: grid; gap: var(--s-2); width: min(380px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ink); color: var(--surface); box-shadow: var(--shadow-3); font-size: var(--t-sm); animation: toastIn var(--m-panel) var(--ease-enter); }
.toast__icon { width: 18px; height: 18px; margin-top: 1px; }
.toast--error .toast__icon { color: var(--danger); }
.toast--success .toast__icon { color: var(--success); }
.toast__detail { display: block; margin-top: 2px; opacity: .75; font-size: var(--t-xs); word-break: break-word; }
.toast__close { background: none; border: 0; color: inherit; opacity: .7; padding: 0 2px; font-size: 18px; line-height: 1; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity var(--m-out) var(--ease), transform var(--m-out) var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

dialog.dialog { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
dialog.dialog::backdrop { background: rgba(10, 13, 18, .45); }
dialog.dialog[open] { animation: dialogIn var(--m-panel) var(--ease-enter); }
.dialog__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.dialog__title { font-size: var(--t-lg); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
@keyframes dialogIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton ---------- */
.skeleton { position: relative; overflow: hidden; color: transparent !important; background: var(--surface-3); border-radius: 6px; }
.skeleton * { visibility: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent); animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Entrada escalonada (carregamento e troca de mês; nunca no scroll) ---------- */
.enter { animation: enterUp 420ms var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes enterUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.swap { animation: swapIn 260ms var(--ease) both; }
@keyframes swapIn { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .skeleton::after { display: none; }
}

@media print {
  .no-print, .app-sidebar, .app-topbar, .toasts, #adminSection { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; break-inside: avoid; }
}