/* ============================================================================
   Hub Check-out Comercial · Outsider School
   Design System P&B + gradiente "Lançamentos" (peach/rosa) para a frente Comercial.
   Tokens alinhados com OutJourney/Indicadores 2.0 — mesma família tipográfica e cinzas.
   ============================================================================ */

:root {
  /* TIER 1 — brand */
  --c-black:#0A0A0B; --c-gray:#7D848B; --c-white:#F7F7F7;
  --c-pure-white:#FFFFFF; --c-pure-black:#000;

  --c-gray-950:#0A0A0B; --c-gray-900:#111114; --c-gray-800:#1A1B1F;
  --c-gray-700:#25272D; --c-gray-600:#3A3D44; --c-gray-500:#5A5E66;
  --c-gray-400:#7D848B; --c-gray-300:#A6ABB2; --c-gray-200:#D4D7DC;
  --c-gray-100:#ECEEF1; --c-gray-50:#F7F7F7;

  --c-blue-deep:#00133D; --c-blue-indigo:#1C3E87; --c-blue-soft:#9CB2D4;
  --c-success:#4A8E6F; --c-warn:#C9A24A; --c-danger:#B85450;

  /* Gradiente da frente Comercial (Lançamentos) — sempre -75° */
  --grad-comercial: linear-gradient(-75deg, #E8B4A0 0%, #C97D7D 50%, #6E4F5C 100%);

  /* Tipografia */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:16px; --fs-lg:18px;
  --fs-xl:22px; --fs-2xl:28px; --fs-3xl:36px;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Espaços */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;

  /* Raios + sombras */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:9999px;
  --shadow-sm:0 2px 6px rgba(10,10,11,.06);
  --shadow-md:0 4px 12px rgba(10,10,11,.08);
  --shadow-lg:0 12px 32px -8px rgba(10,10,11,.18);
  --shadow-xl:0 24px 48px -12px rgba(10,10,11,.25);

  /* Motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms; --dur:240ms;

  /* TIER 2 — semantic (DARK = padrão para painel admin) */
  --bg-base:var(--c-gray-950);
  --bg-surface:var(--c-gray-900);
  --bg-raised:var(--c-gray-800);
  --bg-overlay:rgba(10,10,11,.72);

  --text-primary:var(--c-white);
  --text-secondary:var(--c-gray-300);
  --text-tertiary:var(--c-gray-400);

  --border-subtle:var(--c-gray-800);
  --border-default:var(--c-gray-700);
  --border-strong:var(--c-gray-500);

  --accent:var(--c-blue-soft);
  --accent-hover:var(--c-pure-white);
  --accent-soft:rgba(156,178,212,.16);

  --status-success:var(--c-success);
  --status-warn:var(--c-warn);
  --status-danger:var(--c-danger);

  --focus-ring:0 0 0 3px rgba(156,178,212,.45);
}

/* Tema claro — usado nas telas do colaborador (mais acolhedor) */
[data-theme="light"] {
  --bg-base:var(--c-white);
  --bg-surface:var(--c-pure-white);
  --bg-raised:var(--c-gray-50);
  --bg-overlay:rgba(247,247,247,.85);

  --text-primary:var(--c-gray-950);
  --text-secondary:var(--c-gray-600);
  --text-tertiary:var(--c-gray-400);

  --border-subtle:var(--c-gray-100);
  --border-default:var(--c-gray-200);
  --border-strong:var(--c-gray-300);

  --accent:var(--c-gray-950);
  --accent-hover:#3A3D44;
  --accent-soft:rgba(10,10,11,.06);

  --focus-ring:0 0 0 3px rgba(10,10,11,.18);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:1.5;
  letter-spacing:-.005em;
  color:var(--text-primary);
  background:var(--bg-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1, h2, h3, h4 { font-family:var(--font-sans); font-weight:var(--fw-medium); margin:0; letter-spacing:-.02em; }
h1 { font-size:var(--fs-2xl); }
h2 { font-size:var(--fs-xl); }
h3 { font-size:var(--fs-lg); }
button { font-family:inherit; cursor:pointer; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }

input, select, textarea {
  font-family:inherit; font-size:var(--fs-base);
  background:var(--bg-surface);
  color:var(--text-primary);
  border:1px solid var(--border-default);
  border-radius:var(--r-md);
  padding:10px 12px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  width:100%;
}
input:focus, select:focus, textarea:focus {
  outline:none;
  border-color:var(--text-primary);
  box-shadow:var(--focus-ring);
}

/* ─── Helpers utilitários ────────────────────────────────────────────────── */
.muted{color:var(--text-tertiary)}
.secondary{color:var(--text-secondary)}
.flex{display:flex;gap:var(--s-3);align-items:center}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.flex-col{display:flex;flex-direction:column;gap:var(--s-3)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-4)}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-4)}
.gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)} .gap-4{gap:var(--s-4)} .gap-6{gap:var(--s-6)}
.mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-6{margin-top:var(--s-6)} .mt-8{margin-top:var(--s-8)}
.mb-2{margin-bottom:var(--s-2)} .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)} .mb-6{margin-bottom:var(--s-6)}
.text-xs{font-size:var(--fs-xs)} .text-sm{font-size:var(--fs-sm)} .text-lg{font-size:var(--fs-lg)} .text-xl{font-size:var(--fs-xl)} .text-2xl{font-size:var(--fs-2xl)}
.font-medium{font-weight:var(--fw-medium)} .font-semibold{font-weight:var(--fw-semibold)} .font-bold{font-weight:var(--fw-bold)}
.uppercase{text-transform:uppercase;letter-spacing:.06em}
.text-right{text-align:right} .text-center{text-align:center}
.hidden{display:none!important}
.center-screen{min-height:100vh;display:grid;place-items:center;padding:var(--s-6)}

/* ─── Atoms ──────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-size:var(--fs-base);font-weight:var(--fw-medium);
  padding:10px 18px;border-radius:var(--r-md);border:1px solid transparent;
  cursor:pointer;transition:all var(--dur-fast) var(--ease);
  min-height:40px;text-decoration:none;
}
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn:disabled { opacity:.4; cursor:not-allowed; }

.btn--primary { background:var(--text-primary); color:var(--bg-base); }
.btn--primary:hover:not(:disabled) { background:var(--accent-hover); }

.btn--ghost { background:transparent; color:var(--text-primary); border-color:var(--border-default); }
.btn--ghost:hover:not(:disabled) { background:var(--bg-raised); border-color:var(--border-strong); }

.btn--danger { background:var(--status-danger); color:var(--c-white); }
.btn--sm { padding:6px 12px; min-height:32px; font-size:var(--fs-sm); }
.btn--lg { padding:14px 24px; min-height:48px; font-size:var(--fs-md); }
.btn--block { width:100%; }

.badge {
  display:inline-flex;align-items:center;gap:var(--s-1);
  padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  background:var(--bg-raised);color:var(--text-secondary);
  border:1px solid var(--border-subtle);
  text-transform:uppercase;letter-spacing:.06em;
}
.badge--success { background:rgba(74,142,111,.14); color:var(--status-success); border-color:rgba(74,142,111,.3); }
.badge--warn    { background:rgba(201,162,74,.14); color:var(--status-warn);    border-color:rgba(201,162,74,.3); }
.badge--danger  { background:rgba(184,84,80,.14);  color:var(--status-danger);  border-color:rgba(184,84,80,.3); }

.dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--text-tertiary); }
.dot--success { background:var(--status-success); }
.dot--warn    { background:var(--status-warn); }
.dot--danger  { background:var(--status-danger); }

/* ─── Card ────────────────────────────────────────────────────────────────── */
.card {
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.card--hover:hover { border-color:var(--border-default); transform:translateY(-1px); }
.card--flush { padding:0; overflow:hidden; }
.card__title { font-size:var(--fs-md); font-weight:var(--fw-semibold); margin-bottom:var(--s-1); }
.card__subtitle { font-size:var(--fs-sm); color:var(--text-tertiary); }

/* ─── Stat tile ───────────────────────────────────────────────────────────── */
.stat { padding:var(--s-5); background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-lg); }
.stat__label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); font-weight:var(--fw-semibold); }
.stat__value { font-size:var(--fs-2xl); font-weight:var(--fw-semibold); margin-top:var(--s-2); letter-spacing:-.025em; }
.stat__delta { font-size:var(--fs-xs); color:var(--text-tertiary); margin-top:var(--s-1); }
.stat__delta--up   { color:var(--status-success); }
.stat__delta--down { color:var(--status-danger); }

/* ─── Tabela ──────────────────────────────────────────────────────────────── */
.table-wrap { width:100%; overflow:auto; }
table.tbl {
  width:100%; border-collapse:collapse; font-size:var(--fs-sm);
}
table.tbl thead th {
  text-align:left; padding:10px 12px; font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-tertiary); border-bottom:1px solid var(--border-default);
  background:var(--bg-raised);
  position:sticky; top:0; z-index:1;
}
table.tbl thead th.num { text-align:right; }
table.tbl tbody td { padding:10px 12px; border-bottom:1px solid var(--border-subtle); vertical-align:middle; }
table.tbl tbody td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.tbl tbody tr:hover td { background:var(--bg-raised); }

/* ─── Form field ──────────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:var(--s-2); }
.field__label { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); font-weight:var(--fw-semibold); }
.field__hint  { font-size:var(--fs-xs); color:var(--text-tertiary); }
.field__error { font-size:var(--fs-xs); color:var(--status-danger); min-height:14px; }

/* ─── App Shell ────────────────────────────────────────────────────────────── */
.app {
  display:grid; grid-template-columns: 240px 1fr; min-height:100vh;
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app__nav { display:none; }
}
.app__nav {
  background:var(--bg-surface); border-right:1px solid var(--border-subtle);
  padding:var(--s-6) var(--s-5); display:flex; flex-direction:column; gap:var(--s-4);
  position:sticky; top:0; height:100vh; overflow:auto;
}
.app__brand { display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-6); }
.app__brand-mark {
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--grad-comercial);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.app__brand-text { display:flex; flex-direction:column; }
.app__brand-text strong { font-size:var(--fs-sm); font-weight:var(--fw-semibold); }
.app__brand-text span { font-size:10px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.1em; }
.nav-item {
  display:flex; align-items:center; gap:var(--s-3);
  padding:10px 12px; border-radius:var(--r-md);
  color:var(--text-secondary); font-size:var(--fs-base); font-weight:var(--fw-medium);
  cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  border:1px solid transparent;
}
.nav-item:hover { background:var(--bg-raised); color:var(--text-primary); }
.nav-item.is-active { background:var(--accent-soft); color:var(--text-primary); border-color:var(--border-default); }
.nav-section { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-tertiary); font-weight:var(--fw-semibold); margin:var(--s-4) 0 var(--s-1) 12px; }
.app__main { padding:var(--s-7) var(--s-8) var(--s-10); max-width:1400px; }
@media (max-width: 900px) {
  .app__main { padding:var(--s-5) var(--s-4) var(--s-9); }
}

/* ─── Topbar ──────────────────────────────────────────────────────────────── */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); margin-bottom:var(--s-6); flex-wrap:wrap; }
.topbar h1 { font-size:var(--fs-2xl); font-weight:var(--fw-semibold); }
.topbar p { color:var(--text-tertiary); font-size:var(--fs-sm); margin-top:4px; }
.userchip {
  display:flex; align-items:center; gap:var(--s-3);
  padding:6px 12px 6px 6px; border:1px solid var(--border-default); border-radius:var(--r-full);
  background:var(--bg-surface);
}
.userchip__avatar { width:32px; height:32px; border-radius:50%; background:var(--grad-comercial); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:13px; }
.userchip__name { font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.userchip__role { font-size:var(--fs-xs); color:var(--text-tertiary); }

/* ─── Tabs (cadeiras) ─────────────────────────────────────────────────────── */
.tabs { display:flex; gap:4px; padding:5px; background:var(--bg-raised); border:1px solid var(--border-subtle); border-radius:var(--r-md); flex-wrap:wrap; }
.tab {
  padding:8px 14px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-secondary); cursor:pointer; background:transparent; border:none;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.tab:hover { color:var(--text-primary); }
.tab.is-active { background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }

/* ─── Login screen ────────────────────────────────────────────────────────── */
.login-screen { min-height:100vh; display:grid; place-items:center; padding:var(--s-6); position:relative; }
.login-screen::before {
  content:''; position:absolute; inset:0; background:var(--grad-comercial); opacity:.06; pointer-events:none;
}
.login-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-xl); padding:var(--s-8) var(--s-7); width:100%; max-width:420px; box-shadow:var(--shadow-xl); position:relative; }
.login-mark { width:48px; height:48px; border-radius:var(--r-md); background:var(--grad-comercial); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:var(--s-4); }
.login-title { font-size:var(--fs-xl); font-weight:var(--fw-semibold); letter-spacing:-.02em; }
.login-sub { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.12em; color:var(--text-tertiary); margin-top:4px; font-weight:var(--fw-semibold); }

/* ─── Progress bar de meta vs realizado ──────────────────────────────────── */
.progress {
  width:100%; height:6px; background:var(--bg-raised); border-radius:var(--r-full); overflow:hidden;
}
.progress__bar {
  height:100%; background:var(--grad-comercial); border-radius:inherit; transition:width var(--dur) var(--ease);
}
.progress--hit  .progress__bar { background:var(--status-success); }
.progress--risk .progress__bar { background:var(--status-warn); }
.progress--miss .progress__bar { background:var(--status-danger); }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast { position:fixed; bottom:24px; right:24px; padding:14px 18px; border-radius:var(--r-md); background:var(--bg-surface); border:1px solid var(--border-default); box-shadow:var(--shadow-lg); font-size:var(--fs-sm); color:var(--text-primary); z-index:9999; transform:translateY(20px); opacity:0; transition:all var(--dur) var(--ease); }
.toast.is-visible { opacity:1; transform:translateY(0); }
.toast--success { border-left:3px solid var(--status-success); }
.toast--danger  { border-left:3px solid var(--status-danger); }

/* ─── Loading skeleton ───────────────────────────────────────────────────── */
.skel { background:linear-gradient(90deg, var(--bg-raised), var(--border-subtle), var(--bg-raised)); background-size:200% 100%; animation:skel 1.4s ease-in-out infinite; border-radius:var(--r-sm); height:14px; }
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }