/* ==========================================================
   INOVA DROGARIA · Premiação de Vitaminas
   Design system premium · 2026
   ========================================================== */

:root {
  /* Marca Inova - vermelho fogo + preto premium */
  --brand-50:#fef2f2;
  --brand-100:#fee2e2;
  --brand-200:#fecaca;
  --brand-300:#fca5a5;
  --brand-400:#f87171;
  --brand-500:#ef4444;
  --brand-600:#dc2626;
  --brand-700:#b91c1c;
  --brand-800:#991b1b;
  --brand-900:#7f1d1d;

  --accent-400:#fb923c;
  --accent-500:#f97316;
  --accent-600:#ea580c;

  --gold:#facc15;
  --silver:#cbd5e1;
  --bronze:#f59e0b;

  --danger-50:#fef2f2;
  --danger-500:#ef4444;
  --danger-600:#dc2626;

  --warn-50:#fffbeb;
  --warn-500:#f59e0b;
  --warn-600:#d97706;

  --info-50:#eff6ff;
  --info-500:#3b82f6;

  /* Pretos profundos */
  --ink-900:#09090b;
  --ink-800:#18181b;
  --ink-700:#27272a;
  --ink-600:#3f3f46;
  --ink-500:#52525b;
  --ink-400:#71717a;
  --ink-300:#a1a1aa;
  --ink-200:#d4d4d8;
  --ink-100:#e4e4e7;
  --ink-50:#fafafa;

  --bg-app:#f5f5f5;
  --bg-card:#ffffff;
  --border:#e4e4e7;

  --grad-brand:linear-gradient(135deg,#ef4444 0%,#dc2626 50%,#7f1d1d 100%);
  --grad-brand-soft:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);
  --grad-accent:linear-gradient(135deg,#f97316 0%,#dc2626 100%);
  --grad-gold:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  --grad-dark:linear-gradient(135deg,#27272a 0%,#09090b 100%);
  --grad-bw:linear-gradient(135deg,#dc2626 0%,#18181b 100%);
  --grad-mesh:radial-gradient(at 0% 0%,rgba(220,38,38,.08) 0,transparent 50%),
              radial-gradient(at 100% 0%,rgba(24,24,27,.06) 0,transparent 50%),
              radial-gradient(at 50% 100%,rgba(220,38,38,.05) 0,transparent 50%);

  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:0 2px 4px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.16),0 4px 8px -4px rgba(0,0,0,.08);
  --shadow-lg:0 24px 48px -12px rgba(0,0,0,.22),0 8px 16px -8px rgba(0,0,0,.1);
  --shadow-xl:0 36px 72px -16px rgba(0,0,0,.28);
  --shadow-brand:0 12px 32px -8px rgba(220,38,38,.4);
  --shadow-glow:0 0 0 4px rgba(220,38,38,.18);

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-full:9999px;

  --t-fast:cubic-bezier(.4,0,.2,1) .15s;
  --t-base:cubic-bezier(.4,0,.2,1) .25s;
  --t-bounce:cubic-bezier(.34,1.56,.64,1) .35s;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; }
html { min-height:100%; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-app);
  background-image:var(--grad-mesh);
  background-attachment:fixed;
  color:var(--ink-900);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body > .app { flex:1 0 auto; }
body > .site-footer { flex-shrink:0; margin-top:auto; }
a { color:var(--brand-600); text-decoration:none; }
a:hover { color:var(--brand-700); }
button { font-family:inherit; }
input, select, textarea {
  font-family:inherit;
  font-size:16px !important; /* impede zoom no iOS Safari */
  color:var(--ink-900);
}
html { -webkit-text-size-adjust:100%; touch-action:manipulation; }
::selection { background:var(--brand-200); color:var(--brand-900); }

/* ===== layout base ===== */
.app { max-width:540px; margin:0 auto; padding:0 16px 110px; }
.app.wide { max-width:1340px; padding:0 28px 80px; }

/* ===== header premium com glassmorphism ===== */
.header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(15,23,42,.06);
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.header .brand {
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
}
.header .brand-mark {
  width:40px; height:40px; border-radius:11px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:20px;
  box-shadow:var(--shadow-brand);
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.header .brand-mark::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);
}
.header h1 {
  margin:0; font-size:16px; font-weight:700; color:var(--ink-900);
  letter-spacing:-.01em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header .sub-title {
  font-size:11px; color:var(--ink-500); margin-top:1px; font-weight:500;
}
.header .badge {
  background:var(--brand-50); color:var(--brand-700);
  padding:5px 11px; border-radius:var(--radius-full);
  font-size:11px; font-weight:700;
  border:1px solid var(--brand-200);
}
.header .badge.admin {
  background:var(--grad-dark); color:#fff; border-color:transparent;
  box-shadow:0 4px 12px -2px rgba(15,23,42,.3);
}
.header button.icon-btn {
  background:var(--ink-100); color:var(--ink-700);
  border:0; padding:8px 14px; border-radius:var(--radius);
  cursor:pointer; font-weight:600; font-size:13px;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.header button.icon-btn:hover { background:var(--ink-900); color:#fff; transform:translateY(-1px); }

/* ===== cards ===== */
.card {
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:22px;
  margin:16px 0;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(255,255,255,.6);
  transition:box-shadow var(--t-base), transform var(--t-base);
}
.card.hover-lift:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.card h2 {
  margin:0 0 16px;
  font-size:17px;
  color:var(--ink-900);
  font-weight:700;
  letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px;
}
.card h2 .dot { width:8px; height:8px; background:var(--grad-brand); border-radius:50%; box-shadow:0 0 0 4px var(--brand-100); }
.card h3 {
  margin:18px 0 10px;
  font-size:11px; color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}

/* ===== forms ===== */
.field { margin-bottom:14px; }
.field label {
  display:block; font-size:12px; font-weight:600;
  color:var(--ink-700); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.04em;
}
.field input, .field select, .field textarea {
  width:100%; padding:13px 15px;
  border:1.5px solid var(--ink-200);
  border-radius:var(--radius);
  background:#fff;
  transition:border var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline:none;
}
.field input::placeholder { color:var(--ink-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--brand-500); box-shadow:var(--shadow-glow); background:#fff;
}
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:480px) { .row3 { grid-template-columns:1fr 1fr; } }

/* ===== botões ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--grad-brand);
  color:#fff;
  border:0;
  padding:14px 22px;
  border-radius:var(--radius);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.005em;
  cursor:pointer;
  width:100%;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-brand);
  transition:transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 50%);
  pointer-events:none;
}
.btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 16px 36px -8px rgba(16,185,129,.45); filter:brightness(1.05); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn:disabled { background:var(--ink-300); cursor:not-allowed; box-shadow:none; }
.btn.outline {
  background:#fff; color:var(--brand-700);
  border:1.5px solid var(--brand-300); box-shadow:var(--shadow-xs);
}
.btn.outline:hover:not(:disabled) {
  background:var(--brand-50); border-color:var(--brand-500);
  color:var(--brand-800); transform:translateY(-1px); box-shadow:var(--shadow-sm); filter:none;
}
.btn.outline::after { display:none; }
.btn.danger { background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%); box-shadow:0 12px 32px -8px rgba(239,68,68,.4); }
.btn.warn { background:linear-gradient(135deg,#fbbf24 0%,#d97706 100%); box-shadow:0 12px 32px -8px rgba(245,158,11,.4); color:#fff; }
.btn.dark { background:var(--grad-dark); box-shadow:0 12px 32px -8px rgba(15,23,42,.4); }
.btn.sm { padding:8px 14px; font-size:13px; width:auto; border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); }
.btn.sm:not(.outline):not(.danger):not(.warn):not(.dark) { background:var(--brand-600); }
.btn.sm:hover:not(:disabled) { box-shadow:var(--shadow-sm); }
.btn.ghost {
  background:transparent; color:var(--ink-700); box-shadow:none;
  border:1px solid var(--ink-200);
}
.btn.ghost::after{display:none}
.btn.ghost:hover:not(:disabled) { background:var(--ink-100); transform:none; filter:none; box-shadow:none; }

/* ===== alertas ===== */
.alert {
  padding:12px 16px; border-radius:var(--radius);
  font-size:14px; margin:10px 0; font-weight:500;
  display:flex; align-items:center; gap:10px;
  animation:slideIn .25s ease-out;
}
.alert::before { content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.alert.ok { background:var(--brand-50); color:var(--brand-800); border:1px solid var(--brand-200); }
.alert.ok::before { background:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100); }
.alert.err { background:var(--danger-50); color:#991b1b; border:1px solid #fecaca; }
.alert.err::before { background:var(--danger-500); box-shadow:0 0 0 3px #fee2e2; }
.alert.info { background:var(--info-50); color:#1e40af; border:1px solid #bfdbfe; }
.alert.info::before { background:var(--info-500); box-shadow:0 0 0 3px #dbeafe; }
.alert.warn { background:var(--warn-50); color:#92400e; border:1px solid #fde68a; }
.alert.warn::before { background:var(--warn-500); box-shadow:0 0 0 3px #fef3c7; }

@keyframes slideIn {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:translateY(0); }
}

/* ===== tabs ===== */
.tabs {
  display:flex;
  background:#fff;
  border-radius:var(--radius);
  padding:4px;
  margin:14px 0;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  overflow-x:auto;
  gap:2px;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tabs button {
  flex:1; min-width:0;
  background:transparent; border:0;
  padding:11px 12px; border-radius:8px;
  font-size:13px; font-weight:700;
  color:var(--ink-500);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:all var(--t-fast);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.tabs button:hover { color:var(--ink-900); background:var(--ink-100); }
.tabs button.active {
  background:var(--grad-brand); color:#fff;
  box-shadow:0 4px 12px -2px rgba(16,185,129,.35);
}
.tabs button.active:hover { background:var(--grad-brand); }

/* ===== ranking ===== */
.rank-list { list-style:none; padding:0; margin:0; }
.rank-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 12px; border-bottom:1px solid var(--ink-100);
  transition:background var(--t-fast);
}
.rank-item:last-child { border-bottom:0; }
.rank-item:hover { background:var(--ink-50); }
.rank-item.eu {
  background:var(--grad-brand-soft);
  border:1px solid var(--brand-200);
  border-radius:var(--radius);
  margin:6px 0; padding:14px;
}
.rank-pos {
  width:36px; height:36px; border-radius:50%;
  background:var(--ink-100); color:var(--ink-700);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; flex-shrink:0;
  border:2px solid var(--bg-card);
}
.rank-item.top1 .rank-pos {
  background:var(--grad-gold); color:#fff;
  box-shadow:0 6px 16px -4px rgba(245,158,11,.5);
}
.rank-item.top1 .rank-pos::before {
  content:"♛"; position:absolute; margin-top:-32px; font-size:14px; color:var(--gold);
}
.rank-item.top2 .rank-pos {
  background:linear-gradient(135deg,#e5e7eb 0%,#9ca3af 100%); color:#fff;
  box-shadow:0 6px 16px -4px rgba(156,163,175,.5);
}
.rank-item.top3 .rank-pos {
  background:linear-gradient(135deg,#fdba74 0%,#c2410c 100%); color:#fff;
  box-shadow:0 6px 16px -4px rgba(217,119,6,.5);
}
.rank-name {
  flex:1; font-weight:600; font-size:15px;
  display:flex; align-items:center; gap:8px; min-width:0;
}
.rank-name .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-name .meu {
  font-size:10px; background:var(--grad-brand); color:#fff;
  padding:3px 8px; border-radius:var(--radius-full);
  font-weight:800; letter-spacing:.04em;
  box-shadow:0 4px 8px -2px rgba(16,185,129,.4);
}
.rank-stats {
  text-align:right; font-size:11px;
  color:var(--ink-500); line-height:1.5;
}
.rank-stats .qty { color:var(--ink-900); font-size:14px; font-weight:700; }
.rank-stats .val { color:var(--brand-700); font-weight:700; font-size:13px; margin-top:2px; }

/* ===== vendas list ===== */
.vendas-list { list-style:none; padding:0; margin:0; }
.venda-item {
  padding:14px 12px;
  border-bottom:1px solid var(--ink-100);
  display:flex; align-items:center; gap:12px;
  transition:background var(--t-fast);
}
.venda-item:last-child { border-bottom:0; }
.venda-item:hover { background:var(--ink-50); }
.venda-info { flex:1; min-width:0; }
.venda-nome {
  font-weight:600; font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.venda-meta { font-size:12px; color:var(--ink-500); margin-top:3px; }
.venda-tag {
  display:inline-flex; align-items:center;
  padding:3px 8px; border-radius:5px;
  font-size:10px; font-weight:800;
  letter-spacing:.04em; flex-shrink:0;
}
.venda-tag.vit { background:var(--brand-100); color:var(--brand-800); }
.venda-tag.pv  { background:#fed7aa; color:#9a3412; }
.venda-tag.paradao { background:#ede9fe; color:#5b21b6; }
.tag-paradao { background:#ede9fe; color:#5b21b6; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:800; }
.tag-pre_vencido { background:#fed7aa; color:#9a3412; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:800; }
.tag-vitamina { background:var(--brand-100); color:var(--brand-800); padding:2px 8px; border-radius:99px; font-size:11px; font-weight:800; }
/* tipo-card paradão: igual aos outros — fundo branco normal, vermelho quando selecionado */
.venda-qtd {
  font-weight:800; font-size:18px; min-width:42px;
  text-align:right; color:var(--ink-900);
}
.venda-qtd small { font-size:11px; color:var(--ink-400); font-weight:600; }
.venda-del {
  background:transparent; border:0; color:var(--ink-400);
  cursor:pointer; font-size:18px; padding:6px 10px; border-radius:8px;
  transition:all var(--t-fast);
}
.venda-del:hover { background:var(--danger-50); color:var(--danger-600); }

/* ===== KPIs / totais ===== */
.totais { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 18px; }
.totais .box {
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:18px 16px;
  box-shadow:var(--shadow-md);
  text-align:center;
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
}
.totais .box::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-brand);
}
.totais .box.pv::before { background:var(--grad-gold); }
.totais .box.full::before { display:none; }
.totais .box .num {
  font-size:30px; font-weight:800;
  color:var(--ink-900); letter-spacing:-.02em;
  line-height:1.1;
}
.totais .box.vit .num { color:var(--brand-700); }
.totais .box.pv .num { color:var(--bronze); }
.totais .box .lbl {
  font-size:10px; color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.08em;
  margin-top:6px; font-weight:700;
}
.totais .box.full {
  grid-column:1/-1;
  background:var(--grad-brand);
  color:#fff;
  border:0;
  box-shadow:var(--shadow-brand);
  position:relative;
}
.totais .box.full::after {
  content:""; position:absolute; top:-50%; right:-20%;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);
  pointer-events:none;
}
.totais .box.full .num { color:#fff; font-size:34px; }
.totais .box.full .lbl { color:rgba(255,255,255,.85); }

/* ===== login premium ===== */
.login-wrap {
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:var(--ink-900);
  position:relative;
  overflow:hidden;
}
.login-wrap::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(220,38,38,.55) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(127,29,29,.45) 0%,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(239,68,68,.2) 0%,transparent 50%);
  filter:blur(40px);
  animation:floatBlob 18s ease-in-out infinite;
}
.login-wrap::after {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
@keyframes floatBlob {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(30px,-40px) scale(1.1); }
  66% { transform:translate(-20px,20px) scale(.95); }
}
.login-card {
  position:relative; z-index:2;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  width:100%; max-width:400px;
  padding:36px 30px;
  border-radius:var(--radius-xl);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);
  animation:fadeUp .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

.login-card .logo { text-align:center; margin-bottom:26px; }
.login-card .logo .icon {
  width:72px; height:72px; border-radius:20px;
  background:var(--grad-brand);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:36px; font-weight:800;
  margin-bottom:14px;
  box-shadow:var(--shadow-brand);
  position:relative;
  overflow:hidden;
}
.login-card .logo .icon::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 50%);
}
.login-card h1 {
  margin:0; font-size:22px; text-align:center;
  font-weight:800; color:var(--ink-900); letter-spacing:-.02em;
}
.login-card .sub {
  text-align:center; color:var(--ink-500);
  font-size:13px; margin:6px 0 26px; font-weight:500;
}
.login-card .sub-bold {
  text-align:center; color:var(--ink-900);
  font-size:15px; margin:14px 0 26px;
  font-weight:800; letter-spacing:-.005em;
  line-height:1.35;
}

/* ===== admin grid ===== */
.admin-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:18px 0;
}
.kpi {
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-md);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.kpi::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-brand);
}
.kpi.accent::before { background:var(--grad-accent); }
.kpi.gold::before { background:var(--grad-gold); }
.kpi.dark::before { background:var(--grad-dark); }
.kpi .lbl {
  font-size:11px; color:var(--ink-500);
  text-transform:uppercase; font-weight:700; letter-spacing:.08em;
}
.kpi .num {
  font-size:34px; font-weight:800;
  margin:8px 0 0; color:var(--ink-900);
  letter-spacing:-.02em; line-height:1;
}
.kpi .sub { font-size:13px; color:var(--ink-500); margin-top:6px; font-weight:500; }
.kpi .ico {
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:10px;
  background:var(--brand-50); color:var(--brand-600);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}

/* ===== tabela ===== */
.table-wrap {
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
}
table { width:100%; border-collapse:collapse; font-size:13.5px; }
table th, table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--ink-100); }
table th {
  background:var(--ink-50);
  font-weight:700; font-size:11px;
  color:var(--ink-600);
  text-transform:uppercase; letter-spacing:.06em;
  position:sticky; top:0;
}
table tr:last-child td { border-bottom:0; }
table tr:hover td { background:var(--ink-50); }

.tag {
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:var(--radius-full);
  font-size:11px; font-weight:700;
  letter-spacing:.02em;
}
.tag.ok { background:var(--brand-100); color:var(--brand-800); }
.tag.div { background:#fee2e2; color:#991b1b; }
.tag.warn { background:#fef3c7; color:#92400e; }

/* ===== upload area ===== */
.upload-area {
  display:block;
  border:2px dashed var(--ink-200);
  border-radius:var(--radius-lg);
  padding:30px 20px;
  text-align:center;
  color:var(--ink-500);
  cursor:pointer;
  transition:all var(--t-base);
  background:var(--ink-50);
}
.upload-area:hover {
  border-color:var(--brand-500);
  background:var(--brand-50);
  color:var(--brand-700);
  transform:translateY(-1px);
}
.upload-area input { display:none; }
.upload-area .ico { font-size:32px; display:block; margin-bottom:8px; }
.upload-area .lbl { font-weight:700; font-size:14px; }
.upload-area .hint { font-size:12px; margin-top:4px; opacity:.7; }

/* ===== toolbar ===== */
.toolbar {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:16px; align-items:center;
}
.toolbar input, .toolbar select {
  padding:10px 14px;
  border:1.5px solid var(--ink-200);
  border-radius:var(--radius);
  font-size:16px; background:#fff;
  outline:none;
  transition:border var(--t-fast), box-shadow var(--t-fast);
}
.toolbar input:focus, .toolbar select:focus {
  border-color:var(--brand-500); box-shadow:var(--shadow-glow);
}
.toolbar .grow { flex:1; min-width:180px; }

/* ===== found / not-found ===== */
.found-box {
  background:var(--grad-brand-soft);
  padding:14px 16px;
  border-radius:var(--radius);
  margin:12px 0;
  border-left:4px solid var(--brand-500);
  animation:slideIn .25s ease-out;
}
.found-box .nome { font-weight:800; color:var(--brand-900); font-size:15px; }
.found-box .info { font-size:12px; color:var(--brand-700); margin-top:4px; font-weight:500; }
.not-found {
  background:#fff7ed;
  padding:14px 16px;
  border-radius:var(--radius);
  margin:12px 0;
  border-left:4px solid var(--warn-500);
  font-size:13px;
  color:#9a3412;
  animation:slideIn .25s ease-out;
}

/* ===== spinner ===== */
.spinner {
  border:3px solid var(--ink-200);
  border-top-color:var(--brand-500);
  width:28px; height:28px; border-radius:50%;
  animation:sp .8s linear infinite;
  display:inline-block;
}
@keyframes sp { to { transform:rotate(360deg); } }
.center { text-align:center; padding:40px 20px; color:var(--ink-500); }

/* ===== tipo seletor ===== */
.tipo-grid { display:grid; grid-template-columns:1fr; gap:10px; }
.tipo-card {
  position:relative;
  background:#fff;
  border:2px solid var(--ink-200);
  border-radius:var(--radius);
  padding:14px 16px;
  cursor:pointer;
  text-align:left;
  font-weight:800;
  font-size:15px;
  color:var(--ink-700);
  transition:all var(--t-base);
  user-select:none;
  display:flex;
  align-items:center;
  gap:14px;
}
.tipo-card .emj { display:inline-flex; font-size:28px; line-height:1; flex-shrink:0; }
.tipo-card:hover { border-color:var(--ink-300); background:var(--ink-50); }
/* TODOS os cards de tipo (vitamina/pre_vencido/paradao) ativam com a mesma cor: vermelho da marca Inova.
   Fundo branco quando inativo, vermelho com brand-50 e borda brand-500 quando ativo. */
.tipo-card.active {
  border-color:var(--brand-500);
  background:var(--brand-50);
  color:var(--brand-800);
  box-shadow:0 6px 18px -4px rgba(220,38,38,.3);
}

/* ===== bottom nav (mobile) ===== */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  z-index:25;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-top:1px solid var(--ink-200);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  display:none;
  justify-content:space-around;
  box-shadow:0 -10px 30px -10px rgba(15,23,42,.1);
}
.bottom-nav button {
  flex:1; max-width:90px;
  background:transparent; border:0;
  padding:8px 4px; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink-500); font-size:10px; font-weight:700;
  cursor:pointer; transition:all var(--t-fast);
  letter-spacing:.02em;
}
.bottom-nav button .emj { font-size:22px; line-height:1; }
.bottom-nav button.active { color:var(--brand-700); }
.bottom-nav button.active .emj { transform:scale(1.1); }
.bottom-nav button:hover { color:var(--ink-900); }

@media (max-width:600px) {
  .tabs.main-tabs { display:none; }
  .bottom-nav { display:flex; }
  .app { padding-bottom:90px; }
}

/* ===== modal ===== */
.modal-bg {
  position:fixed; inset:0; background:rgba(15,23,42,.6);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.modal-bg.show { display:flex; animation:fadeIn .2s ease-out; }
.modal {
  background:#fff; border-radius:var(--radius-lg);
  padding:24px; max-width:480px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-xl);
  animation:fadeUp .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.modal h2 { margin:0 0 16px; font-size:18px; }
.modal .actions { display:flex; gap:10px; margin-top:18px; }

/* ===== utils ===== */
.muted { color:var(--ink-500); font-size:13px; }
.divider { height:1px; background:var(--ink-200); margin:18px 0; border:0; }
code {
  background:var(--ink-100); padding:2px 6px;
  border-radius:5px; font-size:12px;
  color:var(--ink-700);
  font-family:'SF Mono',Monaco,'Cascadia Code',monospace;
}

.empty-state {
  text-align:center; padding:40px 20px; color:var(--ink-500);
}
.empty-state .emj { font-size:48px; margin-bottom:10px; opacity:.6; }
.empty-state .ttl { font-weight:700; color:var(--ink-700); font-size:15px; margin-bottom:4px; }
.empty-state .desc { font-size:13px; }

/* ===== logo da rede (placeholder) ===== */
.logo-img {
  max-width:240px; max-height:90px; width:100%;
  display:block; margin:0 auto 14px;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(220,38,38,.15));
}

/* ===== animações de entrada para listas ===== */
.fade-list > * { animation:fadeUp .35s cubic-bezier(.34,1.56,.64,1) backwards; }
.fade-list > *:nth-child(1) { animation-delay:.02s; }
.fade-list > *:nth-child(2) { animation-delay:.04s; }
.fade-list > *:nth-child(3) { animation-delay:.06s; }
.fade-list > *:nth-child(4) { animation-delay:.08s; }
.fade-list > *:nth-child(5) { animation-delay:.10s; }
.fade-list > *:nth-child(6) { animation-delay:.12s; }
.fade-list > *:nth-child(7) { animation-delay:.14s; }
.fade-list > *:nth-child(8) { animation-delay:.16s; }
.fade-list > *:nth-child(9) { animation-delay:.18s; }
.fade-list > *:nth-child(10) { animation-delay:.20s; }

/* ===== AVATAR / NIVEL ===== */
.avatar-circ {
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px;
  background:var(--grad-brand); flex-shrink:0;
  box-shadow:var(--shadow-sm);
  text-transform:uppercase; letter-spacing:.02em;
}
.avatar-circ.lg { width:64px; height:64px; font-size:22px; }
.avatar-circ.xl { width:96px; height:96px; font-size:34px; }
.avatar-circ.sm { width:28px; height:28px; font-size:11px; }

.nivel-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--radius-full);
  background:var(--ink-100); color:var(--ink-800);
  font-size:11px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
}

/* ===== STREAK ===== */
.streak-fire {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--radius-full);
  background:linear-gradient(135deg,#fef3c7 0%,#fed7aa 100%);
  color:#9a3412; font-weight:800; font-size:13px;
  border:1px solid #fde68a;
}

/* ===== MURAL DE AVISOS ===== */
.aviso-card {
  padding:14px 16px; border-radius:var(--radius);
  margin:10px 0; display:flex; gap:12px; align-items:flex-start;
  border-left:4px solid var(--brand-500);
  background:var(--brand-50);
}
.aviso-card.warn { border-left-color:var(--warn-500); background:var(--warn-50); }
.aviso-card.info { border-left-color:var(--info-500); background:var(--info-50); }
.aviso-card.dark { border-left-color:var(--ink-800); background:var(--ink-100); }
.aviso-card .ttl { font-weight:800; color:var(--ink-900); margin-bottom:3px; }
.aviso-card .msg { color:var(--ink-700); font-size:14px; line-height:1.5; }
.aviso-card .meta { font-size:11px; color:var(--ink-500); margin-top:6px; }
.aviso-card .ico { font-size:22px; flex-shrink:0; }

/* ===== CONQUISTAS / BADGES ===== */
.badges-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:10px;
}
.badge-card {
  background:var(--bg-card); border-radius:var(--radius);
  padding:14px 8px; text-align:center;
  border:1.5px solid var(--ink-200); transition:all var(--t-fast);
  cursor:pointer; position:relative;
  filter:grayscale(1) opacity(.5);
}
.badge-card.unlocked {
  filter:none;
  border-color:var(--brand-300);
  box-shadow:0 4px 12px -4px rgba(220,38,38,.2);
}
.badge-card:hover { transform:translateY(-2px); }
.badge-card .emj { font-size:30px; display:block; line-height:1; }
.badge-card .nm { font-size:11px; font-weight:700; margin-top:6px; color:var(--ink-800); line-height:1.2; }
.badge-card.unlocked::after {
  content:"✓"; position:absolute; top:4px; right:6px;
  background:var(--brand-600); color:#fff;
  width:18px; height:18px; border-radius:50%;
  font-size:11px; display:flex; align-items:center; justify-content:center;
  font-weight:800;
}

/* ===== META PROGRESS ===== */
.meta-bar {
  background:var(--ink-100); border-radius:var(--radius-full);
  height:14px; overflow:hidden; position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.meta-bar-fill {
  height:100%; background:var(--grad-brand);
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
  border-radius:var(--radius-full);
  position:relative; overflow:hidden;
}
.meta-bar-fill::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);
  animation:shimmer 2s infinite;
}
@keyframes shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

/* ===== FAVORITOS / SUGESTÕES ===== */
.fav-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;
}
.fav-chip {
  background:var(--ink-100); border:1.5px solid transparent;
  padding:10px 12px; border-radius:var(--radius);
  cursor:pointer; transition:all var(--t-fast);
  font-size:13px; font-weight:600; color:var(--ink-800);
  text-align:left; display:flex; flex-direction:column; gap:3px;
  position:relative;
}
.fav-chip:hover { border-color:var(--brand-400); background:var(--brand-50); transform:translateY(-1px); }
.fav-chip .nm { font-weight:700; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-chip .cd { font-size:11px; color:var(--ink-500); font-weight:500; }

/* ===== COMPARATIVO SEMANA ===== */
.compare-card {
  background:linear-gradient(135deg,var(--brand-700) 0%,var(--ink-900) 100%);
  color:#fff; padding:18px; border-radius:var(--radius-lg);
  margin:12px 0; box-shadow:var(--shadow-md);
}
.compare-card .ttl { font-size:11px; opacity:.8; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.compare-card .num { font-size:30px; font-weight:800; margin:6px 0; }
.compare-card .delta {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:var(--radius-full);
  font-size:12px; font-weight:700;
}
.compare-card .delta.up { background:rgba(34,197,94,.25); color:#86efac; }
.compare-card .delta.down { background:rgba(239,68,68,.25); color:#fca5a5; }
.compare-card .sub { font-size:12px; opacity:.7; margin-top:4px; }

/* ===== CONFETTI ===== */
.confetti-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:100;
  overflow:hidden;
}
.confetti-piece {
  position:absolute; top:-10px; width:10px; height:14px;
  animation:fall linear forwards;
}
@keyframes fall {
  to { transform:translateY(105vh) rotate(720deg); opacity:0; }
}

/* ===== DARK MODE ===== */
@media (prefers-color-scheme: dark) {
  :root.auto-dark {
    --bg-app:#0a0a0b;
    --bg-card:#18181b;
    --border:#27272a;
    --ink-900:#fafafa;
    --ink-800:#f4f4f5;
    --ink-700:#e4e4e7;
    --ink-600:#d4d4d8;
    --ink-500:#a1a1aa;
    --ink-400:#71717a;
    --ink-300:#52525b;
    --ink-200:#3f3f46;
    --ink-100:#27272a;
    --ink-50:#18181b;
  }
  :root.auto-dark .header {
    background:rgba(24,24,27,.85);
    border-bottom-color:rgba(255,255,255,.08);
  }
  :root.auto-dark .bottom-nav {
    background:rgba(24,24,27,.92);
    border-top-color:rgba(255,255,255,.08);
  }
  :root.auto-dark .field input,
  :root.auto-dark .field select,
  :root.auto-dark .toolbar input,
  :root.auto-dark .toolbar select {
    background:#27272a; border-color:#3f3f46; color:#f4f4f5;
  }
  :root.auto-dark table th { background:#1f1f22; color:#a1a1aa; }
  :root.auto-dark .upload-area { background:#1f1f22; }
  :root.auto-dark .tabs { background:#18181b; border-color:#27272a; }
  :root.auto-dark .login-card { background:rgba(24,24,27,.97); color:#fafafa; }
  :root.auto-dark .login-card h1 { color:#fafafa; }
}

/* ===== CAMERA SCANNER ===== */
.scanner-wrap {
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.92); display:none;
  flex-direction:column;
}
.scanner-wrap.show { display:flex; }
.scanner-wrap .scanner-header {
  padding:16px 20px; color:#fff;
  display:flex; justify-content:space-between; align-items:center;
}
.scanner-wrap .scanner-header h3 { margin:0; font-size:16px; }
.scanner-wrap .scanner-close {
  background:rgba(255,255,255,.1); color:#fff; border:0;
  padding:10px 18px; border-radius:8px; font-weight:700; cursor:pointer;
}
.scanner-box {
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; padding:20px;
}
#scanner-video {
  width:100%; max-width:520px; max-height:60vh;
  border-radius:var(--radius-lg); object-fit:cover;
  border:3px solid var(--brand-500);
  box-shadow:0 0 40px rgba(220,38,38,.4);
}
.scanner-hint {
  text-align:center; padding:16px; color:#fff;
  font-size:14px; opacity:.85;
}
.scanner-line {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:80%; max-width:480px; height:3px;
  background:linear-gradient(90deg,transparent,var(--brand-500),transparent);
  animation:scanLine 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scanLine {
  0%,100% { top:30%; }
  50% { top:70%; }
}

/* ===== botões de preço (escolher faixa) ===== */
.preco-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
@media (max-width:380px) { .preco-grid { grid-template-columns:1fr; } }

.preco-btn {
  border:0;
  border-radius:var(--radius-lg);
  padding:18px 14px 16px;
  cursor:pointer;
  text-align:center;
  font-family:inherit;
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-height:130px;
  justify-content:center;
}
.preco-btn::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 50%);
  pointer-events:none;
}
.preco-btn:hover { transform:translateY(-2px); }
.preco-btn:active { transform:translateY(0); }
.preco-btn.selected {
  outline:4px solid var(--ink-900);
  outline-offset:2px;
  transform:scale(.98);
}

.preco-btn.cheio {
  background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);
  color:#fff;
  box-shadow:0 12px 28px -6px rgba(220,38,38,.45);
}
.preco-btn.cheio:hover { box-shadow:0 16px 36px -6px rgba(220,38,38,.55); }

.preco-btn.promo {
  background:linear-gradient(135deg,#fb923c 0%,#c2410c 100%);
  color:#fff;
  box-shadow:0 12px 28px -6px rgba(249,115,22,.45);
}
.preco-btn.promo:hover { box-shadow:0 16px 36px -6px rgba(249,115,22,.55); }

.preco-btn .tag {
  position:absolute; top:8px; right:10px;
  background:rgba(255,255,255,.28);
  color:#fff;
  padding:3px 9px;
  border-radius:var(--radius-full);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.preco-btn .lbl {
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.92;
  text-align:center;
  padding:0 6px;
}
.preco-btn .preco-row {
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  margin:4px 0;
}
.preco-btn .preco-pre { font-size:11px; font-weight:600; opacity:.85; }
.preco-btn .preco {
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.1;
  display:flex; align-items:center; gap:6px;
}
.preco-btn .preco .emj { font-size:20px; }
.preco-btn .seta {
  font-size:18px; font-weight:900; opacity:.7;
}
.preco-btn .ganha-bloco {
  background:rgba(255,255,255,.22);
  padding:8px 12px;
  border-radius:var(--radius);
  margin-top:4px;
  text-align:center;
  border:1px solid rgba(255,255,255,.2);
}
.preco-btn .ganha-lbl {
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.85;
  text-transform:uppercase;
}
.preco-btn .ganha-val {
  font-size:18px;
  font-weight:900;
  letter-spacing:-.01em;
  margin-top:2px;
}

.preco-instrucao {
  text-align:center;
  font-size:13px;
  color:var(--ink-700);
  font-weight:600;
  margin:10px 0 0;
}
.preco-confirmado {
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:var(--brand-700);
  background:var(--brand-50);
  padding:10px 14px;
  border-radius:var(--radius);
  margin-top:10px;
  border:1.5px solid var(--brand-200);
}

.celebracao-ganho {
  text-align:center;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 50%,#d97706 100%);
  color:#fff;
  padding:20px 16px 22px;
  border-radius:var(--radius-lg);
  margin-top:12px;
  box-shadow:0 16px 36px -8px rgba(245,158,11,.55), 0 0 0 4px rgba(251,191,36,.25);
  position:relative; overflow:hidden;
  animation:pulseGanho .55s cubic-bezier(.34,1.56,.64,1);
}
.celebracao-ganho::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.35) 0%,transparent 60%);
  pointer-events:none;
}
.celebracao-ganho .titulo {
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:4px;
}
.celebracao-ganho .premio {
  font-size:38px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1;
  margin:6px 0;
  text-shadow:0 2px 8px rgba(0,0,0,.18);
}
.celebracao-ganho .lbl {
  font-size:12px;
  opacity:.92;
  font-weight:700;
}
@keyframes pulseGanho {
  0%   { transform:scale(.85); opacity:0; }
  60%  { transform:scale(1.04); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}

/* ===== meta obrigatória semanal (banner) ===== */
.meta-obrig {
  margin:12px 0 16px;
  padding:18px 18px 16px;
  border-radius:var(--radius-lg);
  color:#fff;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.meta-obrig::after {
  content:""; position:absolute; top:-50%; right:-20%;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);
  pointer-events:none;
}
.meta-obrig.critico {
  background:linear-gradient(135deg,#ef4444 0%,#7f1d1d 100%);
  animation:pulseAlerta 1.6s ease-in-out infinite;
}
.meta-obrig.progresso {
  background:linear-gradient(135deg,#f97316 0%,#9a3412 100%);
}
.meta-obrig.quase {
  background:linear-gradient(135deg,#facc15 0%,#b45309 100%);
}
.meta-obrig.batida {
  background:linear-gradient(135deg,#10b981 0%,#047857 100%);
}
@keyframes pulseAlerta {
  0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.55), var(--shadow-md); }
  50%     { box-shadow:0 0 0 14px rgba(239,68,68,0), var(--shadow-md); }
}
.meta-obrig .top {
  display:flex; align-items:center; gap:12px;
  margin-bottom:8px;
}
.meta-obrig .emj-grande { font-size:32px; line-height:1; }
.meta-obrig .titulo {
  font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.1em;
  opacity:.92;
}
.meta-obrig .subtitulo {
  font-size:16px; font-weight:800; line-height:1.2;
}
.meta-obrig .num {
  font-size:36px; font-weight:900;
  letter-spacing:-.02em; line-height:1;
  margin:8px 0 4px;
}
.meta-obrig .num small {
  font-size:14px; font-weight:700; opacity:.85;
}
.meta-obrig .msg {
  font-size:13px; font-weight:600;
  line-height:1.5; opacity:.96;
  margin-top:6px;
}
.meta-obrig .msg strong { font-weight:900; }
.meta-obrig .barra {
  height:10px;
  background:rgba(255,255,255,.25);
  border-radius:99px;
  overflow:hidden;
  margin-top:12px;
  position:relative;
}
.meta-obrig .barra-fill {
  height:100%;
  background:rgba(255,255,255,.92);
  border-radius:99px;
  transition:width .8s cubic-bezier(.34,1.56,.64,1);
  position:relative; overflow:hidden;
}
.meta-obrig .barra-fill::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  animation:shimmer 2s infinite;
}
.meta-obrig .barra-pct {
  position:absolute; right:8px; top:-2px;
  font-size:10px; font-weight:800;
  color:#fff;
}

/* ===== outro valor (custom) ===== */
.preco-custom-wrap {
  margin-top:14px;
  padding:14px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#f4f4f5 0%,#e4e4e7 100%);
  border:2px dashed var(--ink-300);
}
.preco-custom-titulo {
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:var(--ink-600);
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.preco-custom-row {
  display:flex; gap:8px; align-items:stretch;
}
.preco-custom-row .moeda {
  background:var(--ink-900); color:#fff;
  display:flex; align-items:center; justify-content:center;
  padding:0 14px; border-radius:var(--radius);
  font-weight:800; font-size:15px;
}
.preco-custom-row input {
  flex:1;
  padding:14px 16px;
  border:2px solid var(--ink-300);
  border-radius:var(--radius);
  font-size:18px; font-weight:700;
  background:#fff;
  outline:none;
  transition:border var(--t-fast), box-shadow var(--t-fast);
}
.preco-custom-row input:focus {
  border-color:var(--brand-500);
  box-shadow:var(--shadow-glow);
}
.preco-custom-faixa {
  text-align:center;
  font-size:11px;
  color:var(--ink-500);
  margin-top:8px;
  font-weight:600;
}

/* ===== COMPROVANTE (cheque) ===== */
.comprovante {
  max-width:480px;
  margin:0 auto;
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.18);
  font-family:'Inter',sans-serif;
  color:var(--ink-900);
}
.comprovante-header {
  background:var(--grad-brand);
  color:#fff;
  padding:24px 22px 28px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.comprovante-header::after {
  content:""; position:absolute; bottom:-1px; left:0; right:0;
  height:14px;
  background:radial-gradient(circle at 6px 14px, transparent 6px, #fff 6.5px);
  background-size:14px 14px; background-repeat:repeat-x;
}
.comprovante-header img { height:48px; max-width:200px; object-fit:contain; margin-bottom:8px; filter:brightness(0) invert(1); }
.comprovante-header .titulo {
  font-size:14px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:.92;
}
.comprovante-header .sub {
  font-size:11px; opacity:.85; margin-top:3px; font-weight:600;
}
.comprovante-body { padding:24px 22px; }
.comprovante-saudacao {
  text-align:center;
  font-size:24px;
  font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:6px;
  color:var(--brand-700);
}
.comprovante-saudacao .emj { display:block; font-size:38px; margin-bottom:6px; }
.comprovante-nome {
  text-align:center;
  font-size:18px;
  font-weight:800;
  margin-bottom:4px;
}
.comprovante-cod {
  text-align:center;
  font-size:12px;
  color:var(--ink-500);
  font-weight:600;
  margin-bottom:18px;
}
.comprovante-cod strong { color:var(--ink-900); font-size:14px; }
.comprovante-frase {
  text-align:center;
  font-size:14px;
  color:var(--ink-700);
  margin:14px 0 12px;
  line-height:1.5;
}
.comprovante-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:14px 0;
}
.comprovante-stat {
  background:var(--ink-50);
  padding:14px 12px;
  border-radius:var(--radius);
  text-align:center;
  border:1.5px solid var(--ink-100);
}
.comprovante-stat .num {
  font-size:28px;
  font-weight:900;
  color:var(--ink-900);
  line-height:1;
}
.comprovante-stat .lbl {
  font-size:10px;
  font-weight:800;
  color:var(--ink-500);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:6px;
}
.comprovante-cheque {
  background:linear-gradient(135deg,#fbbf24 0%,#d97706 100%);
  color:#fff;
  padding:22px 18px;
  border-radius:var(--radius-lg);
  text-align:center;
  margin:18px 0 12px;
  box-shadow:0 12px 28px -8px rgba(245,158,11,.5);
  position:relative;
  overflow:hidden;
}
.comprovante-cheque::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3) 0%,transparent 60%);
  pointer-events:none;
}
.comprovante-cheque .lbl {
  font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:.12em;
  opacity:.92;
}
.comprovante-cheque .valor {
  font-size:42px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1;
  margin:6px 0 4px;
}
.comprovante-cheque .obs { font-size:11px; opacity:.92; font-weight:700; }
.comprovante-info {
  font-size:11px;
  text-align:center;
  color:var(--ink-500);
  line-height:1.6;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--ink-200);
}
.comprovante-instrucao {
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  border:2px dashed #d97706;
  border-radius:var(--radius);
  padding:14px 16px;
  text-align:center;
  margin:14px 0 6px;
  color:#7c2d12;
  font-weight:700;
  line-height:1.5;
}
.comprovante-instrucao .emj { font-size:22px; display:block; margin-bottom:4px; }
.comprovante-instrucao .ttl { font-size:14px; font-weight:900; letter-spacing:.02em; }
.comprovante-instrucao .sub { font-size:12px; font-weight:600; opacity:.85; margin-top:3px; }
.comprovante-actions {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:0 22px 22px;
}
.comprovante-actions .btn { width:100%; }

/* impressão */
@media print {
  body * { visibility:hidden !important; }
  #print-area, #print-area * { visibility:visible !important; }
  #print-area {
    position:fixed !important; inset:0 !important;
    background:#fff !important;
    padding:20px !important;
    overflow:visible !important;
  }
  .comprovante { box-shadow:none !important; max-width:100% !important; }
  .comprovante-actions { display:none !important; }
  .header, .bottom-nav, .site-footer, .install-banner, .modal-bg { display:none !important; }
  @page { margin:0; size:auto; }
}

/* ===== celebração de meta batida ===== */
.celeb-meta-bg {
  position:fixed; inset:0;
  background:rgba(0,0,0,.78);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:20px;
  animation:fadeIn .25s ease-out;
}
.celeb-meta-bg.show { display:flex; }
.celeb-meta-card {
  background:linear-gradient(135deg,#10b981 0%,#047857 60%,#064e3b 100%);
  color:#fff;
  padding:36px 26px 28px;
  border-radius:var(--radius-xl);
  text-align:center;
  max-width:420px; width:100%;
  box-shadow:0 30px 80px -10px rgba(16,185,129,.5), 0 0 0 6px rgba(16,185,129,.15);
  animation:bouncePop .65s cubic-bezier(.34,1.56,.64,1);
  position:relative; overflow:hidden;
}
.celeb-meta-card::before {
  content:""; position:absolute; top:-30%; right:-30%;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 70%);
  pointer-events:none;
}
@keyframes bouncePop {
  0%   { transform:scale(.5); opacity:0; }
  60%  { transform:scale(1.06); opacity:1; }
  80%  { transform:scale(.98); }
  100% { transform:scale(1); }
}
.celeb-meta-card .trofeu {
  font-size:80px; line-height:1; display:block; margin-bottom:8px;
  animation:wiggleTrofeu 1.2s ease-in-out infinite;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
@keyframes wiggleTrofeu {
  0%,100% { transform:rotate(0) scale(1); }
  25%     { transform:rotate(-8deg) scale(1.04); }
  50%     { transform:rotate(0) scale(1); }
  75%     { transform:rotate(8deg) scale(1.04); }
}
.celeb-meta-card .ttl {
  font-size:13px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
  opacity:.95; margin-bottom:6px;
}
.celeb-meta-card .gigante {
  font-size:30px; font-weight:900;
  letter-spacing:-.02em; line-height:1.15;
  text-shadow:0 2px 8px rgba(0,0,0,.18);
  margin:6px 0 14px;
}
.celeb-meta-card .destaque {
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.35);
  padding:14px;
  border-radius:var(--radius-lg);
  margin:14px 0;
  font-size:14px; font-weight:700;
}
.celeb-meta-card .destaque .num {
  font-size:32px; font-weight:900;
  letter-spacing:-.02em; display:block;
  margin-bottom:2px;
}
.celeb-meta-card .extra {
  font-size:14px; line-height:1.5;
  font-weight:600; opacity:.95;
  margin:8px 0 4px;
}
.celeb-meta-card .extra strong { font-weight:900; }
.celeb-meta-card .cta {
  background:#fff; color:var(--brand-800);
  font-weight:900; padding:14px;
  border-radius:var(--radius);
  border:0; cursor:pointer;
  width:100%; margin-top:18px;
  font-size:15px; letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 8px 16px -4px rgba(0,0,0,.25);
  transition:transform var(--t-fast);
}
.celeb-meta-card .cta:hover { transform:translateY(-2px); }
.celeb-meta-card .cta:active { transform:translateY(0); }

/* ===== install banner ===== */
.install-banner {
  position:fixed; bottom:90px; left:16px; right:16px; z-index:25;
  background:var(--grad-dark); color:#fff;
  padding:14px 18px; border-radius:var(--radius);
  display:none; align-items:center; gap:12px;
  box-shadow:var(--shadow-lg);
  animation:slideIn .3s ease-out;
}
.install-banner.show { display:flex; }
.install-banner .ico { font-size:22px; }
.install-banner .txt { flex:1; font-size:13px; }
.install-banner .txt strong { display:block; font-size:14px; }
.install-banner button {
  background:var(--brand-500); color:#fff; border:0;
  padding:8px 16px; border-radius:8px; font-weight:700;
  cursor:pointer;
}
.install-banner .close-x {
  background:transparent; padding:6px 10px;
}

/* ===== rodapé ===== */
.site-footer {
  position:relative;
  padding:32px 24px 28px;
  text-align:center;
  border-top:1px solid var(--ink-200);
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.6) 100%);
}
.footer-logo {
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  height:46px;
  width:auto;
  max-width:140px;
  object-fit:contain;
  opacity:.92;
  filter:drop-shadow(0 4px 10px rgba(220,38,38,.18));
  transition:opacity .2s, transform .2s;
}
.footer-logo:hover { opacity:1; transform:translateY(-50%) scale(1.04); }
@media (max-width:720px) {
  .footer-logo {
    position:static;
    transform:none;
    display:block;
    margin:14px auto 0;
    height:38px;
  }
  .footer-logo:hover { transform:scale(1.04); }
}
.site-footer .line {
  font-size:12px;
  color:var(--ink-500);
  line-height:1.7;
  letter-spacing:.01em;
}
.site-footer .line strong {
  color:var(--ink-800);
  font-weight:700;
}
.site-footer .heart {
  color:var(--brand-600);
  display:inline-block;
  animation:beat 1.4s ease-in-out infinite;
}
@keyframes beat {
  0%,100% { transform:scale(1); }
  15% { transform:scale(1.18); }
  30% { transform:scale(1); }
  45% { transform:scale(1.12); }
  60% { transform:scale(1); }
}
.site-footer .sep {
  display:inline-block; width:4px; height:4px; margin:0 8px 2px;
  background:var(--ink-300); border-radius:50%; vertical-align:middle;
}
.site-footer .badge-dev {
  display:inline-block; margin-top:8px;
  padding:5px 12px;
  border-radius:var(--radius-full);
  background:var(--grad-dark);
  color:#fff;
  font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}

/* rodapé do login (sobre fundo escuro) */
.login-wrap .site-footer {
  position:absolute; bottom:0; left:0; right:0;
  margin-top:0; border-top:0;
  z-index:2;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
}
.login-wrap .site-footer .line { color:rgba(255,255,255,.7); }
.login-wrap .site-footer .line strong { color:rgba(255,255,255,.95); }
.login-wrap .site-footer .sep { background:rgba(255,255,255,.3); }

/* no mobile do balconista, sobe o rodapé pra não esconder atrás do bottom-nav */
@media (max-width:600px) {
  body.has-bottom-nav { padding-bottom:80px; }
  body.has-bottom-nav > .site-footer { margin-bottom:0; }
}

/* === ESTEIRA ROLANTE DE PRODUTOS VENCENDO === */
.esteira {
  display: flex;
  align-items: stretch;
  position: relative;
  /* Fita de alerta amarelo + preto listrada (45 graus) */
  background:
    repeating-linear-gradient(
      45deg,
      #fbbf24 0px,
      #fbbf24 22px,
      #18181b 22px,
      #18181b 44px
    );
  border-top: 3px solid #18181b;
  border-bottom: 3px solid #18181b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .2) inset;
  overflow: hidden;
  font-size: 13px;
  color: #18181b;
  animation: esteira-pulse 2s ease-in-out infinite;
}
@keyframes esteira-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .2) inset; }
  50%      { box-shadow: 0 4px 30px rgba(251, 191, 36, .55), 0 0 0 1px rgba(0, 0, 0, .2) inset; }
}
.esteira::before {
  content: "⚠️ PRODUTOS VENCENDO ⚠️";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: #18181b;
  color: #fbbf24;
  padding: 10px 22px 10px 16px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .14em;
  position: relative;
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  box-shadow: 4px 0 14px -4px rgba(0, 0, 0, .5);
  text-shadow: 0 0 10px rgba(251, 191, 36, .6);
  animation: piscar 1.5s ease-in-out infinite;
}
@keyframes piscar {
  0%, 100% { color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, .6); }
  50%      { color: #fde047; text-shadow: 0 0 20px rgba(253, 224, 71, 1); }
}
.esteira-mask {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.esteira-mask::before,
.esteira-mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}
.esteira-mask::before {
  left: 0;
  background: linear-gradient(90deg, rgba(251, 191, 36, .9) 0%, rgba(251, 191, 36, 0) 100%);
}
.esteira-mask::after {
  right: 0;
  background: linear-gradient(-90deg, rgba(251, 191, 36, .9) 0%, rgba(251, 191, 36, 0) 100%);
}
.esteira-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 8px 14px;
  white-space: nowrap;
  animation: esteira-roll 180s linear infinite;
}
.esteira-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid #18181b;
  border-radius: 999px;
  padding: 5px 8px 5px 14px;
  font-weight: 700;
  color: #18181b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  line-height: 1.2;
}
.esteira-item .nome {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esteira-item .dias {
  background: #fef3c7;
  color: #92400e;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.esteira-item.urgente {
  border-color: #fca5a5;
  background: #fff5f5;
  color: #991b1b;
}
.esteira-item.urgente .dias {
  background: #fee2e2;
  color: #991b1b;
}
.esteira-item.vencido {
  border-color: #ef4444;
  background: #fef2f2;
  color: #7f1d1d;
}
.esteira-item.vencido .dias {
  background: #fecaca;
  color: #7f1d1d;
}
@keyframes esteira-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.esteira:hover .esteira-track { animation-play-state: paused; }
@media (max-width: 600px) {
  .esteira::before {
    padding: 0 18px 0 10px;
    font-size: 10.5px;
    letter-spacing: .05em;
  }
  .esteira-item .nome { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .esteira-track { animation: none; }
}

/* === DASHBOARD VENCIMENTOS === */
.venc-card {
  padding: 14px;
  border-radius: var(--radius);
  text-align: center;
  background: #fff;
  border: 1.5px solid #e2e8f0;
}
.venc-card.danger { background: linear-gradient(135deg,#fee2e2,#fecaca); border-color:#dc2626; }
.venc-card.warn   { background: linear-gradient(135deg,#fef3c7,#fde68a); border-color:#f59e0b; }
.venc-card.info   { background: linear-gradient(135deg,#dbeafe,#bfdbfe); border-color:#3b82f6; }
.venc-card.ok     { background: linear-gradient(135deg,#dcfce7,#bbf7d0); border-color:#22c55e; }
.venc-card .num   { font-size: 32px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.venc-card .lbl   { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity:.85; }
.venc-mes-card {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px;
}
.venc-mes-card h3 { margin: 0 0 10px; font-size: 16px; display: flex; justify-content: space-between; align-items: center; }
.venc-mes-card .qtd-tag {
  background: var(--brand-500); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.venc-mes-card.passado .qtd-tag { background: #dc2626; }
.venc-mes-card.urgente .qtd-tag { background: #f59e0b; }

/* === CATÁLOGO DE PRÉ-VENCIDOS (aba do balconista) === */
.pv-cat-list { display: flex; flex-direction: column; gap: 10px; }
.pv-cat-item {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.pv-cat-item:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); }
.pv-cat-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  margin-bottom: 6px;
}
.pv-cat-nome {
  font-weight: 800; font-size: 14px; color: #0f172a; line-height: 1.3;
  flex: 1; min-width: 0;
}
.pv-cat-dias {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pv-cat-dias.ok { background: #fef3c7; color: #92400e; }
.pv-cat-dias.urg { background: #fee2e2; color: #991b1b; }
.pv-cat-dias.venc { background: #dc2626; color: #fff; }
.pv-cat-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: 12px; color: #64748b; margin-bottom: 8px;
}
.pv-cat-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pv-cat-lote {
  background: #f1f5f9; padding: 2px 8px; border-radius: 6px;
  font-family: 'Courier New', monospace; font-weight: 700; color: #334155;
  font-size: 11px;
}
.pv-cat-precos { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-cat-preco {
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.pv-cat-preco.promo { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.pv-cat-preco.max   { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.pv-cat-preco strong { font-size: 13px; font-weight: 800; }

/* Indicação e similaridade — no catálogo de pré-vencidos */
.pv-cat-info {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; line-height: 1.4;
  padding: 6px 10px; border-radius: 8px; margin-top: 6px;
}
.pv-cat-info .ico { flex: 0 0 auto; font-size: 13px; line-height: 1.3; }
.pv-cat-info b { font-weight: 800; margin-right: 3px; }
.pv-cat-info.indic { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.pv-cat-info.simil { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Indicação e similaridade — quando o balconista bipa o produto */
.prod-info-extra {
  margin-top: 10px; display: flex; flex-direction: column; gap: 6px;
}
.prod-info-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45;
  padding: 8px 12px; border-radius: 10px;
}
.prod-info-row .ico { flex: 0 0 auto; font-size: 15px; }
.prod-info-row b { font-weight: 800; margin-right: 4px; }
.prod-info-row.indic { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.prod-info-row.simil { background: #fef3c7; color: #78350f; border: 1px solid #fde68a; }

/* ===== BALCONISTA — navegação ===== */
/* Mobile (<=600px): só a .bottom-nav fixa no rodapé. */
/* Desktop (>=601px): sidebar lateral à esquerda. .tabs.main-tabs e .bottom-nav ficam escondidos. */
.tabs.main-tabs { display: none !important; } /* substituída pela sidebar (PC) ou bottom-nav (mobile) */

/* SIDEBAR — só PC */
.sidebar { display: none; }
@media (min-width: 601px) {
  body.has-bottom-nav { padding-left: 220px; } /* abre espaço pra sidebar fixa */
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 220px;
    background: #ffffff;
    border-right: 1px solid var(--border);
    padding: 18px 12px 16px;
    z-index: 40;
    box-shadow: 1px 0 4px rgba(15,23,42,.04);
    overflow-y: auto;
  }
  .sb-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 8px 16px;
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 12px;
  }
  .sb-brand-dot {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--grad-brand);
    color: #fff; font-weight: 900; font-size: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px -4px rgba(220,38,38,.45);
  }
  .sb-brand-name {
    font-size: 17px; font-weight: 800; color: var(--ink-900);
    letter-spacing: -0.01em;
  }
  .sb-nav {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-height: 0;
  }
  .sidebar button[data-tab],
  .sb-logout {
    background: transparent; border: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    font-size: 14px; font-weight: 700;
    color: var(--ink-700);
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    width: 100%;
  }
  .sidebar button[data-tab]:hover,
  .sb-logout:hover { background: var(--ink-100); color: var(--ink-900); }
  .sidebar button[data-tab].active {
    background: var(--grad-brand); color: #fff;
    box-shadow: 0 4px 12px -2px rgba(220,38,38,.35);
  }
  .sb-ic { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
  .sb-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-logout {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--ink-100);
    color: var(--ink-600);
  }
  .sb-logout:hover { color: #b91c1c; background: #fef2f2; }

  /* No PC a bottom-nav some — sidebar substitui */
  .bottom-nav { display: none !important; }
}

/* Bottom-nav com 7 itens — encolhe um pouco no mobile pra caber */
.bottom-nav { padding: 6px 2px; }
.bottom-nav button {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  padding: 6px 2px;
  white-space: nowrap;
}
.bottom-nav button .emj { font-size: 18px; display: block; }
@media (max-width: 380px) {
  .bottom-nav button { font-size: 9px; padding: 5px 1px; }
  .bottom-nav button .emj { font-size: 16px; }
}

/* Card preço único (variante single) */
.preco-grid.single { grid-template-columns: 1fr; }

/* === MENU AGRUPADO COM DROPDOWN — sobrescreve regras de .tabs button === */
.tabs.nav-grouped {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  overflow: visible;        /* dropdown precisa "escapar" da tab bar */
}
.nav-grouped .nav-group {
  position: relative;
  flex: 0 0 auto;           /* anula o flex:1 que vinha de .tabs button */
}
/* Reset agressivo dos buttons internos pra anular .tabs button */
.nav-grouped .nav-toggle,
.nav-grouped .nav-sub button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
  overflow: visible;
  box-shadow: none;
}
.nav-grouped .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.nav-grouped .nav-toggle:hover {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}
.nav-grouped .nav-group.open > .nav-toggle {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(220,38,38,.35);
}
.nav-grouped .nav-group.open > .nav-toggle .caret { transform: rotate(180deg); }
.nav-grouped .nav-toggle .caret {
  font-size: 10px;
  transition: transform .2s;
  opacity: .7;
}
.nav-grouped .nav-group.has-active > .nav-toggle {
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
  font-weight: 800;
}

.nav-grouped .nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  z-index: 100;
  flex-direction: column;
}
.nav-grouped .nav-group.open > .nav-sub { display: flex; }
.nav-grouped .nav-sub button {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-900);
  white-space: nowrap;
}
.nav-grouped .nav-sub button:hover {
  background: rgba(220, 38, 38, .08);
  color: #b91c1c;
}
.nav-grouped .nav-sub button.active {
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
}
.nav-grouped .nav-sub button.active:hover {
  background: var(--grad-brand);
  color: #fff;
}

@media (max-width: 768px) {
  .tabs.nav-grouped { padding: 4px; gap: 2px; }
  .nav-grouped .nav-toggle { padding: 8px 10px; font-size: 12px; }
  .nav-grouped .nav-sub { left: 0; min-width: 180px; }
}

/* === TOGGLE DE SENHA (olhinho) === */
.senha-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.senha-wrap input {
  flex: 1;
  padding-right: 44px;
  width: 100%;
}
.senha-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: .65;
  transition: opacity .15s, background .15s;
}
.senha-toggle:hover {
  opacity: 1;
  background: rgba(0,0,0,.05);
}
.senha-toggle.aberto { opacity: 1; }

/* === PÓDIO ALINHADO E PROFISSIONAL === */
.podio-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;       /* TODAS as colunas alinham pela base */
  max-width: 640px;
  margin: 0 auto;
}
.podio-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.podio-coroa { font-size: 32px; line-height: 1; margin-bottom: 4px; }
.podio-coroa-sp { height: 36px; }   /* espaço pra alinhar com a coroa do 1º */
.podio-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px;
  color: #fff; letter-spacing: .04em;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,.25);
  margin-bottom: 8px;
}
.podio-avatar.p1 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.podio-avatar.p2 { background: linear-gradient(135deg, #cbd5e1, #64748b); }
.podio-avatar.p3 { background: linear-gradient(135deg, #fed7aa, #c2410c); }
.podio-nome {
  font-weight: 800;
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 6px;
  height: 32px;          /* altura fixa pra alinhar */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  padding: 0 4px;
}
.podio-base {
  width: 100%;
  border-radius: 12px 12px 0 0;
  padding: 14px 8px 18px;
  color: #fff;
  font-weight: 800;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 -4px 16px -4px rgba(0,0,0,.18);
}
.podio-base.p1 {
  height: 130px;
  background: linear-gradient(180deg, #fbbf24, #d97706);
}
.podio-base.p2 {
  height: 100px;
  background: linear-gradient(180deg, #cbd5e1, #64748b);
}
.podio-base.p3 {
  height: 80px;
  background: linear-gradient(180deg, #fed7aa, #c2410c);
}
.podio-pos { font-size: 12px; opacity: .9; letter-spacing: .04em; }
.podio-num { font-size: 26px; line-height: 1; margin: 4px 0 2px; font-weight: 900; }
.podio-lbl { font-size: 10px; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.podio-val { font-size: 11px; opacity: .9; margin-top: 4px; font-weight: 700; }

@media (max-width: 480px) {
  .podio-avatar { width: 44px; height: 44px; font-size: 16px; }
  .podio-nome { font-size: 11px; height: 28px; }
  .podio-base.p1 { height: 100px; }
  .podio-base.p2 { height: 80px; }
  .podio-base.p3 { height: 64px; }
  .podio-num { font-size: 22px; }
  .podio-coroa { font-size: 26px; }
  .podio-coroa-sp { height: 30px; }
}

/* ==================================================
   WORDMARK INOVAPAY — usar em login, cadastro, headers
   ================================================== */
.brand-inovapay {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -.03em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  margin: 8px 0 6px;
  position: relative;
}
.brand-inovapay .bm-inova {
  color: #0f172a;
}
.brand-inovapay .bm-pay {
  background: linear-gradient(135deg, #dc2626 0%, #f97316 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-left: 2px;
  text-shadow: 0 0 30px rgba(220, 38, 38, .25);
}
.brand-inovapay .bm-pay::after {
  content: '';
  position: absolute;
  bottom: -3px; right: 0;
  width: 38%; max-width: 70px; height: 3px;
  background: linear-gradient(90deg, #dc2626, #fbbf24);
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .35);
}
.brand-inovapay.lg { font-size: clamp(34px, 8vw, 50px); }
.brand-inovapay.md { font-size: 24px; }
.brand-inovapay.sm { font-size: 18px; }
.brand-inovapay.dark .bm-inova { color: #fff; }
.brand-inovapay-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: #475569; text-transform: uppercase;
  margin-top: 4px;
}
.brand-inovapay-tag::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #dc2626, #f97316);
  box-shadow: 0 0 8px rgba(220, 38, 38, .5);
}