/* =====================================================================
   8BAC — Design System (produção)
   Cores extraídas da logo: #0066FF (o "8"), #003399 (o "BAC"), fundo #F5F5F5.
   Mobile-first, estética Apple, gamificado.
   ===================================================================== */

:root{
  /* Marca */
  --azul:        #0066FF;   /* primária / ação */
  --azul-escuro: #0052D6;
  --azul-claro:  #E6F0FF;
  --cobalto:     #003399;   /* marca */
  --cobalto-2:   #00246B;
  --dourado:     #E9B23A;   /* conquista / Elite */
  --dourado-2:   #C98A16;

  /* Neutros */
  --bg:      #F5F5F5;
  --surface: #FFFFFF;
  --linha:   #EAECF0;
  --texto:   #101828;
  --muted:   #667085;
  --suave:   #98A2B3;

  /* Estados */
  --ok:     #12B76A;  --ok-bg:  #E7F8F0;
  --alerta: #F79009;  --alerta-bg:#FEF4E6;
  --erro:   #F04438;  --erro-bg: #FEECEB;

  /* Raios e sombras */
  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;
  --sombra:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sombra-md: 0 6px 16px rgba(16,24,40,.10);
  --sombra-lg: 0 12px 32px rgba(0,51,153,.12), 0 4px 10px rgba(16,24,40,.06);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 68px;
}

/* ---------- Reset leve ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--texto);
  line-height:1.45; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
a{color:var(--azul);text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* ---------- Layout base ---------- */
.container{max-width:720px;margin:0 auto;padding:16px;padding-bottom:calc(var(--nav-h) + 24px)}
.stack{display:flex;flex-direction:column;gap:16px}
.section-title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:6px 2px}

/* ---------- Tipografia ---------- */
h1{font-size:26px;font-weight:900;letter-spacing:-.03em}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
h3{font-size:16px;font-weight:700}
.muted{color:var(--muted)}
.big-number{font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px; background:rgba(245,245,245,.85);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linha);
}
.brand{font-weight:900;font-size:22px;letter-spacing:-.04em;display:inline-flex}
.brand .n8{color:var(--azul)} .brand .bac{color:var(--cobalto)}
/* Menu no topo (aparece só no desktop) */
.top-nav{display:none}
.top-nav a{font-size:14.5px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:10px;transition:background .12s,color .12s}
.top-nav a:hover{color:var(--texto)}
.top-nav a.active{color:var(--azul);background:var(--azul-claro)}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:var(--r-full);border:1px solid var(--linha);
  background:var(--surface);display:grid;place-items:center;font-size:19px;cursor:pointer
}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--erro);border:2px solid var(--surface)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--linha);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sombra)}
.card-k{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.card-hero{background:linear-gradient(150deg,var(--cobalto),var(--azul));color:#fff;border:none;box-shadow:var(--sombra-lg)}
.card-hero .card-k{color:rgba(255,255,255,.78)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- Botões ---------- */
.btn{
  border:none;cursor:pointer;font-weight:700;font-size:15px;
  padding:14px 22px;border-radius:14px;display:inline-flex;gap:8px;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--azul);color:#fff;box-shadow:0 8px 18px rgba(0,102,255,.28)}
.btn-primary:hover{background:var(--azul-escuro)}
.btn-gold{background:linear-gradient(135deg,var(--dourado),var(--dourado-2));color:#3d2c00;box-shadow:0 8px 18px rgba(233,178,58,.35)}
.btn-ghost{background:var(--surface);color:var(--cobalto);border:1.5px solid var(--linha)}
.btn-danger{background:var(--erro);color:#fff}
.btn-block{width:100%}
.btn-lg{font-size:17px;padding:17px 26px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Formulários ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600}
.input{
  width:100%;padding:15px 16px;font-size:16px; /* 16px evita zoom no iOS */
  border:1.5px solid var(--linha);border-radius:14px;background:var(--surface);color:var(--texto);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-claro)}
.input::placeholder{color:var(--suave)}

/* ---------- Badges / chips ---------- */
.badge{display:inline-flex;gap:7px;align-items:center;background:var(--surface);border:1px solid var(--linha);
  border-radius:var(--r-full);padding:8px 14px;font-size:13.5px;font-weight:600}
.badge-gold{background:linear-gradient(135deg,#FFF6E0,#FDECC0);border-color:#F3D488;color:#7a5a00}
.badge-ok{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.badge-erro{background:var(--erro-bg);border-color:transparent;color:var(--erro)}

/* ---------- Selos de nível ---------- */
.medal{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:24px;position:relative;box-shadow:var(--sombra-md)}
.medal::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.medal.iniciante{background:linear-gradient(145deg,#8FA0B5,#5C6B80)}
.medal.elite{background:linear-gradient(145deg,#3E86FF,#003399)}
.medal.vip{background:linear-gradient(145deg,#12388F,#00246B)}
.medal.mestre{background:linear-gradient(145deg,#C9D3E0,#8794A8)}
.medal.parceira{background:linear-gradient(145deg,#F3CF6B,#C98A16);box-shadow:0 8px 22px rgba(201,138,22,.45)}
.medal.locked{filter:grayscale(.7);opacity:.55}

/* ---------- Botão de excluir venda ---------- */
.venda-x{border:none;background:none;color:var(--suave);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1}
.venda-x:hover{color:var(--erro);background:var(--erro-bg)}

/* ---------- Filtro de período (dentro do card de ROAS) ---------- */
.periodo-filtro{display:flex;gap:5px;background:rgba(255,255,255,.14);padding:4px;border-radius:12px}
.periodo-filtro a{flex:1;text-align:center;font-size:13px;font-weight:700;color:rgba(255,255,255,.82);padding:9px 4px;border-radius:9px;transition:background .12s,color .12s}
.periodo-filtro a.active{background:#fff;color:var(--cobalto)}

/* ---------- Barra de progresso ---------- */
.bar{height:12px;background:#EEF1F6;border-radius:var(--r-full);overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--dourado));border-radius:var(--r-full);transition:width .6s ease}

/* ---------- Cadeado (gating) ---------- */
.locked-box{position:relative;border-radius:var(--r-lg);overflow:hidden}
.locked-box .veil{position:absolute;inset:0;background:rgba(0,36,107,.62);backdrop-filter:blur(3px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;text-align:center;padding:20px}
.locked-box .veil .lock{font-size:30px}

/* ---------- Navegação inferior (mobile) ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;height:var(--nav-h);
  display:flex;justify-content:space-around;align-items:center;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--linha);padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--suave);font-size:11px;font-weight:600;flex:1;padding:8px 0}
.bottom-nav a .ic{font-size:22px;line-height:1}
.bottom-nav a.active{color:var(--azul)}

/* ---------- Flash / avisos ---------- */
.flash{padding:13px 16px;border-radius:var(--r);font-size:14px;font-weight:500;margin-bottom:14px}
.flash.sucesso{background:var(--ok-bg);color:#087443}
.flash.erro{background:var(--erro-bg);color:#B42318}
.flash.info{background:var(--azul-claro);color:var(--cobalto)}

/* ---------- Estado vazio ---------- */
.empty{text-align:center;padding:36px 20px;color:var(--muted)}
.empty .emoji{font-size:40px;margin-bottom:10px}

/* ---------- Utilidades ---------- */
.text-center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------- Animações (gamificação) ---------- */
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.animate-pop{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.animate-rise{animation:rise .4s ease both}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---------- Desktop ---------- */
@media(min-width:760px){
  .container{padding:24px;padding-bottom:40px}
  .bottom-nav{display:none}
  .top-nav{display:flex;gap:4px;align-items:center}
}