/* Vendus — design tokens (laranja + roxo, derivado do inBrivvo) */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Bricolage+Grotesque:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  /* Brand — laranja */
  --primary: #F97316;
  --primary-hover: #EA580C;
  --primary-active: #C2410C;
  --primary-soft: #FB923C;
  --primary-tint: #FED7AA;
  --primary-wash: #FFF7ED;
  --primary-deep: #9A3412;

  /* Roxo — secundário */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;

  /* Logo gradient — laranja → magenta → roxo */
  --logo-orange: #FB923C;
  --logo-magenta: #EC4899;
  --logo-violet: #8B5CF6;
  --logo-gradient: linear-gradient(180deg, var(--logo-orange) 0%, var(--logo-magenta) 55%, var(--logo-violet) 100%);

  /* Semânticos */
  --success: #22C55E;
  --success-soft: #34D399;
  --warning: #FACC15;
  --warning-soft: #FFC85A;
  --danger:  #EF4444;
  --danger-soft: #FF6A6A;
  --info: #789BFF;

  /* Neutros (dark) */
  --bg-app:    #0B0F19;
  --bg-surface:#111827;
  --bg-elev:   #1A2233;
  --bg-elev-2: #232E45;
  --border:    rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --fg-1:      #EAEEF8;
  --fg-2:      #A8B1C4;
  --fg-3:      #6F7891;

  /* Type */
  --font-sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,.20);
  --shadow-2: 0 2px 6px rgba(0,0,0,.28);
  --shadow-3: 0 8px 24px rgba(0,0,0,.40);
  --shadow-focus: 0 0 0 4px rgba(249,115,22,.25);

  --ease-out: cubic-bezier(.22,1,.36,1);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-app:    #F7F8FB;
  --bg-surface:#FFFFFF;
  --bg-elev:   #F1F3F8;
  --bg-elev-2: #E7EAF1;
  --border:    rgba(15,23,42,.08);
  --border-strong: rgba(15,23,42,.14);
  --fg-1:      #15192A;
  --fg-2:      #4A5168;
  --fg-3:      #7B829A;
  --shadow-1: 0 1px 2px rgba(15,23,42,.06);
  --shadow-2: 0 2px 8px rgba(15,23,42,.06);
  --shadow-3: 0 18px 40px rgba(15,23,42,.10);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* Subtle ambient gradient — only on app bg, dark mode */
body:not([data-theme="light"]) #root::before {
  content:"";
  position: fixed; inset:0;
  background:
    radial-gradient(900px 600px at 0% -10%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(800px 500px at 100% 10%, rgba(139,92,246,.10), transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* Utilities */
.font-display { font-family: var(--font-display); letter-spacing: -0.01em; }
.mono-numeric { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3);
}

/* Logo tile */
.logo-tile {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--logo-gradient);
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(236,72,153,.35);
  position: relative;
  overflow:hidden;
}
.logo-tile::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 45%);
  mix-blend-mode: overlay;
}

/* Card */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.card-hover {
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

/* Button */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 13px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-secondary {
  background: rgba(139,92,246,.10);
  color: var(--violet-300);
  border-color: rgba(139,92,246,.30);
}
[data-theme="light"] .btn-secondary { color: var(--violet-700); }
.btn-secondary:hover { background: rgba(139,92,246,.18); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { background: var(--bg-elev); color: var(--fg-1); }
.btn-outline {
  border-color: var(--border-strong);
  color: var(--fg-1);
}
.btn-outline:hover { background: var(--bg-elev); }
.btn-danger { background: rgba(239,68,68,.10); color: var(--danger); border-color: rgba(239,68,68,.30); }
.btn-danger:hover { background: rgba(239,68,68,.18); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 6px;}
.btn-icon { width: 36px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 30px; }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--fg-2);
  border: 1px solid var(--border);
  letter-spacing: .01em;
}
.chip-orange  { background: rgba(249,115,22,.12); color: #FB923C; border-color: rgba(249,115,22,.25); }
.chip-violet  { background: rgba(139,92,246,.14); color: #C4B5FD; border-color: rgba(139,92,246,.30); }
.chip-success { background: rgba(34,197,94,.12); color: #4ADE80; border-color: rgba(34,197,94,.25); }
.chip-warning { background: rgba(250,204,21,.12); color: #FACC15; border-color: rgba(250,204,21,.25); }
.chip-danger  { background: rgba(239,68,68,.12); color: #FCA5A5; border-color: rgba(239,68,68,.25); }
.chip-info    { background: rgba(120,155,255,.12); color: #93B4FF; border-color: rgba(120,155,255,.25); }
[data-theme="light"] .chip-orange { color: #C2410C; }
[data-theme="light"] .chip-violet { color: #6D28D9; }
[data-theme="light"] .chip-success { color: #166534; }
[data-theme="light"] .chip-warning { color: #854D0E; }
[data-theme="light"] .chip-danger  { color: #B91C1C; }
[data-theme="light"] .chip-info    { color: #1E40AF; }

/* Form controls — garante contraste em ambos os temas, incl. dropdowns nativos */
input, select, textarea, button {
  color: var(--fg-1);
  font-family: inherit;
}
input, select, textarea {
  -webkit-text-fill-color: var(--fg-1);
  caret-color: var(--primary);
}
input::placeholder, textarea::placeholder {
  color: var(--fg-3);
  -webkit-text-fill-color: var(--fg-3);
  opacity: 1;
}
/* Painel de opções (dropdown nativo de <select>) */
option {
  background: var(--bg-surface);
  color: var(--fg-1);
}
/* Autofill — Chrome/Webkit usam cores próprias quando autofill está ativo */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg-1);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--fg-1);
}

/* Input */
.input, .select {
  height: 36px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg-1);
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); }
.input::placeholder { color: var(--fg-3); }

/* Tabs (segmented) */
.seg {
  display: inline-flex; padding: 3px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px;
}
.seg button {
  background: transparent; border: 0;
  height: 28px; padding: 0 12px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 12px;
  color: var(--fg-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--fg-1); }
.seg button.active { background: var(--bg-surface); color: var(--fg-1); box-shadow: var(--shadow-1); }

/* Calculadora — layout em seções + resultado em destaque (mobile-first) */
.calc-channel {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
}
.calc-channel__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fg-1); }
.calc-main { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 820px) { .calc-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.calc-section { border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
.calc-section + .calc-section { margin-top: 12px; }
.calc-seclabel { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.calc-hero { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.calc-block { margin-top: 14px; }
/* No celular o público vende: modos com scroll horizontal e resultado logo após o form */
@media (max-width: 819px) { .calc-modes { overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* Sidebar nav button */
.navbtn {
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight:500; font-size: 13.5px;
  color: var(--fg-2);
  background: transparent;
  border: 0; cursor:pointer;
  text-align: left;
  transition: background .15s, color .15s;
}
.navbtn .icon { color: var(--violet-400); }
[data-theme="light"] .navbtn .icon { color: var(--violet-600); }
.navbtn:hover { background: var(--bg-elev); color: var(--fg-1); }
.navbtn.active {
  background: linear-gradient(95deg, rgba(249,115,22,.18), rgba(139,92,246,.18));
  color: var(--fg-1);
  position: relative;
}
.navbtn.active::before {
  content:""; position:absolute; left:-4px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background: var(--primary);
}
.navbtn.active .icon { color: var(--primary); }

/* Subnav (child of accordion group) */
.subnav {
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding: 7px 12px 7px 36px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--fg-2);
  cursor:pointer;
  border: 0; background: transparent;
  text-align: left;
  transition: background .15s, color .15s;
}
.subnav:hover { background: var(--bg-elev); color: var(--fg-1); }
.subnav.active { background: rgba(249,115,22,.14); color: var(--primary); font-weight:600; }

/* KPI card */
.kpi {
  position: relative;
  padding: 18px 18px 16px;
  overflow: hidden;
}
.kpi .kpi-label {
  font-size: 12px; font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .08em;
  font-family: var(--font-display);
}
.kpi .kpi-value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi .kpi-delta {
  display:inline-flex; align-items:center; gap:4px;
  font-size: 12px; font-weight: 600;
  margin-top: 8px;
}
.kpi .kpi-delta.up   { color: #34D399; }
.kpi .kpi-delta.down { color: var(--danger-soft); }
.kpi .kpi-icon {
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(139,92,246,.15);
  color: var(--violet-400);
}
.kpi.kpi-orange .kpi-icon { background: rgba(249,115,22,.15); color: var(--primary); }
.kpi.kpi-success .kpi-icon { background: rgba(34,197,94,.15); color: #4ADE80; }
.kpi.kpi-info    .kpi-icon { background: rgba(120,155,255,.15); color: #93B4FF; }
.kpi.kpi-danger  .kpi-icon { background: rgba(239,68,68,.15); color: var(--danger); }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-1);
}
.tbl tr:hover td { background: var(--bg-elev); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Bar (mini chart) */
.bar-track {
  background: var(--bg-elev-2);
  border-radius: 999px;
  height: 6px;
  overflow:hidden;
}
.bar-fill { height: 100%; border-radius:999px; background: var(--primary); }

/* Toggle / dot */
.dot {
  display:inline-block; width:8px; height:8px; border-radius: 999px;
  background: var(--fg-3);
}
.dot.on { background: var(--success-soft); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dot.warn { background: var(--warning); box-shadow: 0 0 0 3px rgba(250,204,21,.18); }
.dot.err { background: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

/* Empty state thumbnail (product) */
.prod-thumb {
  width:40px; height:40px; border-radius:8px;
  background: linear-gradient(135deg, rgba(249,115,22,.25), rgba(139,92,246,.25));
  display:grid; place-items:center;
  color: var(--fg-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--border);
}

/* Page shell */
.page { padding: 28px 32px 48px; max-width: 1440px; }
.page-header {
  display:flex; align-items:flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.page-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.01em;
}
.page-sub { color: var(--fg-2); font-size: 13.5px; margin-top: 4px; }

.section-title {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  margin: 0;
}

/* Skeleton stripe */
.stripe {
  background: linear-gradient(90deg, transparent, var(--bg-elev) 50%, transparent);
  background-size: 200% 100%;
  animation: stripe 1.6s linear infinite;
}
@keyframes stripe { 0%{background-position: 200% 0} 100% { background-position: -200% 0}}

/* Animated entry */
.fade-in { animation: fade .26s var(--ease-out); }
@keyframes fade { from { transform: translateY(5px);} to { transform: none;}}

/* Pill stat */
.pill-stat {
  display:inline-flex; align-items:center; gap:8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-elev); color: var(--fg-2);
  border: 1px solid var(--border);
}

/* Accent text */
.text-orange { color: var(--primary); }
.text-violet { color: var(--violet-400); }
[data-theme="light"] .text-violet { color: var(--violet-600); }
.text-success { color: var(--success-soft); }
.text-danger  { color: var(--danger-soft); }
.text-muted   { color: var(--fg-2); }
.text-faint   { color: var(--fg-3); }

/* Donut & helpers */
.donut-svg { transform: rotate(-90deg); }

/* Tooltip-ish small banner */
.banner {
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  background: linear-gradient(95deg, rgba(249,115,22,.10), rgba(139,92,246,.10));
  border: 1px solid rgba(249,115,22,.25);
  border-radius: var(--r-md);
}

/* Hover row */
.row {
  display:flex; align-items:center; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.row:hover { background: var(--bg-elev); }

/* Avatar */
.av {
  width: 32px; height:32px; border-radius: 999px;
  background: var(--logo-gradient);
  color:white; display:grid; place-items:center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
}

/* Kanban-ish small card */
.task {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.task:hover { transform: translateY(-1px); border-color: var(--border-strong); }

/* ===================== Copiloto: score, relatório, modal ===================== */
.score-track {
  height: 8px; border-radius: 999px;
  background: var(--bg-elev); overflow: hidden;
}
.score-fill {
  height: 100%; border-radius: 999px;
  transition: width .5s ease;
}

/* Backdrop comum para relatório e modal */
.report-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
  animation: fadeIn .15s ease;
}
.report-sheet, .modal-sheet {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-3);
  width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.report-sheet { max-width: 760px; }
.modal-sheet  { max-width: 460px; padding: 22px; overflow: auto; }

.report-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.report-body { padding: 26px 30px; overflow: auto; }
.report-head { border-bottom: 2px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; }
.report-section { margin-bottom: 20px; }
.report-h3 {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2);
  margin-bottom: 8px;
}
.report-finding { padding: 10px 0; border-bottom: 1px solid var(--border); }
.report-finding:last-child { border-bottom: 0; }
.report-foot { font-size: 11px; margin-top: 16px; text-align: center; }

/* Opções de agendamento */
.sched-option {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.sched-option:hover { border-color: var(--border-strong); }
.sched-option[data-active="true"] {
  border-color: var(--primary);
  background: rgba(249,115,22,.08);
}
.sched-ic {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--bg-surface); display: grid; place-items: center; color: var(--fg-2);
}

/* ===================== Impressão (Exportar PDF) ===================== */
@media print {
  body * { visibility: hidden !important; }
  #vendus-report, #vendus-report * { visibility: visible !important; }
  #vendus-report {
    position: absolute; left: 0; top: 0; width: 100%;
    padding: 0 8mm; color: #111; background: #fff;
  }
  #vendus-report .text-muted { color: #444 !important; }
  #vendus-report .text-faint  { color: #777 !important; }
  .report-backdrop { position: static !important; background: none !important; backdrop-filter: none !important; padding: 0 !important; }
  .report-sheet { box-shadow: none !important; border: 0 !important; max-height: none !important; }
  .report-toolbar { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 12mm; }
}

/* spinner reutilizável */
@keyframes vspin { to { transform: rotate(360deg); } }
.spin { animation: vspin .9s linear infinite; display: inline-flex; }