/* ==================== RESET E BASE ==================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --roxo:#7C3AED;--roxo-escuro:#5B21B6;--roxo-claro:#A78BFA;--roxo-bg:#EDE9FE;
  --verde:#10B981;--verde-claro:#D1FAE5;--vermelho:#EF4444;--vermelho-claro:#FEE2E2;
  --amarelo:#F59E0B;--amarelo-claro:#FEF3C7;
  --cinza-50:#F9FAFB;--cinza-100:#F3F4F6;--cinza-200:#E5E7EB;--cinza-300:#D1D5DB;
  --cinza-400:#9CA3AF;--cinza-500:#6B7280;--cinza-600:#4B5563;--cinza-700:#374151;
  --cinza-800:#1F2937;--cinza-900:#111827;--branco:#FFFFFF;
  --sombra:0 1px 3px rgba(0,0,0,0.1);--sombra-md:0 4px 6px rgba(0,0,0,0.07);
  --sombra-lg:0 10px 15px rgba(0,0,0,0.1);
  --radius:12px;--radius-lg:16px;
}
body{font-family:'Inter',sans-serif;background:var(--cinza-50);color:var(--cinza-800);line-height:1.5;min-height:100vh}
.escondido{display:none!important}
.gradient-text{background:linear-gradient(135deg,var(--roxo),#EC4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ==================== LANDING PAGE ==================== */
.nav-landing{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
.logo-landing{display:flex;align-items:center;gap:12px}
.logo-landing h1{font-size:24px;font-weight:800}
.nav-actions{display:flex;gap:12px}
.btn-outline{padding:10px 20px;border:2px solid var(--roxo);background:none;color:var(--roxo);border-radius:var(--radius);font-weight:600;cursor:pointer;font-family:inherit;font-size:14px}
.btn-primary-sm{padding:10px 20px;background:var(--roxo);color:var(--branco);border:none;border-radius:var(--radius);font-weight:600;cursor:pointer;font-family:inherit;font-size:14px}

.hero{max-width:1200px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-badge{display:inline-block;background:var(--roxo-bg);color:var(--roxo);padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600;margin-bottom:24px}
.hero h2{font-size:48px;font-weight:900;line-height:1.1;margin-bottom:20px;color:var(--cinza-900)}
.hero-desc{font-size:18px;color:var(--cinza-600);margin-bottom:32px;max-width:500px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-hero{padding:16px 32px;background:linear-gradient(135deg,var(--roxo),var(--roxo-escuro));color:var(--branco);border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-hero-outline{padding:16px 32px;background:none;border:2px solid var(--cinza-300);color:var(--cinza-700);border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center}

.mockup-card{background:var(--branco);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--sombra-lg);max-width:400px}
.mockup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:600}
.mockup-badge{background:var(--roxo);color:var(--branco);padding:4px 12px;border-radius:12px;font-size:12px}
.mockup-stats{display:flex;flex-direction:column;gap:12px}
.mockup-stat{display:flex;justify-content:space-between;padding:12px;background:var(--cinza-50);border-radius:8px}
.mockup-stat .stat-label{color:var(--cinza-500);font-size:14px}
.mockup-stat .stat-value{font-weight:700;font-size:18px}
.mockup-stat .stat-value.verde{color:var(--verde)}

.features{max-width:1200px;margin:0 auto;padding:80px 24px}
.features h3{font-size:36px;font-weight:800;text-align:center;margin-bottom:48px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card{background:var(--branco);padding:32px;border-radius:var(--radius-lg);box-shadow:var(--sombra)}
.feature-icon{font-size:40px;display:block;margin-bottom:16px}
.feature-card h4{font-size:18px;font-weight:700;margin-bottom:8px}
.feature-card p{color:var(--cinza-600);font-size:14px}

.how-it-works{background:var(--cinza-100);padding:80px 24px}
.how-it-works h3{font-size:36px;font-weight:800;text-align:center;margin-bottom:48px}
.steps{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{text-align:center}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--roxo);color:var(--branco);border-radius:50%;font-size:20px;font-weight:700;margin-bottom:16px}
.step h4{font-size:16px;font-weight:700;margin-bottom:8px}
.step p{font-size:14px;color:var(--cinza-600)}

.cta{text-align:center;padding:80px 24px}
.cta h3{font-size:36px;font-weight:800;margin-bottom:16px}
.cta p{font-size:18px;color:var(--cinza-600);margin-bottom:32px}

.footer-landing{text-align:center;padding:40px 24px;color:var(--cinza-500);font-size:14px;border-top:1px solid var(--cinza-200)}

/* ==================== LOGIN ==================== */
.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,var(--roxo-bg),var(--cinza-50))}
.login-card{background:var(--branco);padding:40px;border-radius:var(--radius-lg);box-shadow:var(--sombra-lg);width:100%;max-width:400px}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo h1{font-size:28px;font-weight:800}
.login-tabs{display:flex;gap:8px;margin-bottom:24px;background:var(--cinza-100);padding:4px;border-radius:var(--radius)}
.tab-btn{flex:1;padding:12px;border:none;background:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--cinza-500)}
.tab-btn.active{background:var(--branco);color:var(--roxo);box-shadow:var(--sombra)}
.login-form{display:flex;flex-direction:column;gap:16px}
.login-back{text-align:center;color:var(--cinza-500);font-size:14px;cursor:pointer;margin-top:8px}
.login-back:hover{color:var(--roxo)}
.input-prefix{display:flex;align-items:center;gap:0}
.input-prefix .prefix{padding:14px 12px;background:var(--cinza-100);border:2px solid var(--cinza-200);border-right:none;border-radius:var(--radius) 0 0 var(--radius);font-size:12px;color:var(--cinza-600);white-space:nowrap}
.input-prefix input{border-radius:0 var(--radius) var(--radius) 0}

/* ==================== APP HEADER ==================== */
.app-header{background:linear-gradient(135deg,var(--roxo),var(--roxo-escuro));color:var(--branco);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:var(--sombra-md)}
.header-left{display:flex;align-items:center;gap:12px}
.header-left h1{font-size:20px;font-weight:800}
.header-badge{font-size:11px;opacity:0.8;background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:10px}
.header-right{display:flex;align-items:center;gap:16px}
.header-user{font-size:14px;opacity:0.9}
.btn-logout{padding:8px 16px;background:rgba(255,255,255,0.2);color:var(--branco);border:1px solid rgba(255,255,255,0.3);border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px}

/* ==================== ADMIN STATS ==================== */
.app-main{max-width:800px;margin:0 auto;padding:16px;padding-bottom:80px}
.admin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.stat-card{background:var(--branco);padding:20px;border-radius:var(--radius);box-shadow:var(--sombra);display:flex;align-items:center;gap:16px}
.stat-card.verde .stat-icon{background:var(--verde-claro)}
.stat-card.amarelo .stat-icon{background:var(--amarelo-claro)}
.stat-icon{font-size:28px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--roxo-bg);border-radius:12px}
.stat-card .stat-label{font-size:12px;color:var(--cinza-500);display:block}
.stat-card .stat-value{font-size:24px;font-weight:800;display:block}

/* ==================== FORM GRID ==================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group.full{grid-column:1/-1}

/* ==================== LISTA DE LOJAS ==================== */
.lista-lojas{display:flex;flex-direction:column;gap:8px}
.loja-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--cinza-50);border-radius:var(--radius);gap:12px}
.loja-info h4{font-size:16px;font-weight:700}
.loja-info p{font-size:12px;color:var(--cinza-500)}
.loja-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}
.loja-badge.ativa{background:var(--verde-claro);color:var(--verde)}
.loja-badge.inativa{background:var(--vermelho-claro);color:var(--vermelho)}
.loja-actions{display:flex;gap:8px}
.btn-sm{padding:6px 12px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-sm.acessar{background:var(--roxo);color:var(--branco)}
.btn-sm.toggle{background:var(--cinza-200);color:var(--cinza-700)}
.btn-sm.excluir{background:var(--vermelho-claro);color:var(--vermelho)}
.btn-sm.aprovar{background:var(--verde);color:var(--branco)}
.btn-sm.recusar{background:var(--vermelho-claro);color:var(--vermelho)}

.lista-pendentes{display:flex;flex-direction:column;gap:8px}
.pendente-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--amarelo-claro);border-radius:var(--radius);gap:12px;border-left:4px solid var(--amarelo)}
.pendente-info h4{font-size:16px;font-weight:700}
.pendente-info p{font-size:12px;color:var(--cinza-600)}
.pendente-info .data{font-size:11px;color:var(--cinza-400);margin-top:2px}
.pendente-acoes{display:flex;gap:8px}

.msg-pendente{text-align:center;padding:32px 16px}
.msg-pendente .msg-icon{font-size:64px;display:block;margin-bottom:16px}
.msg-pendente h3{font-size:24px;font-weight:800;margin-bottom:8px;color:var(--cinza-800)}
.msg-pendente .msg-desc{font-size:14px;color:var(--cinza-600);margin:12px 0}
.msg-contato{background:var(--verde-claro);padding:16px;border-radius:var(--radius);margin:16px 0}
.msg-contato p{font-size:14px;color:var(--cinza-700);margin-bottom:8px}
.btn-whatsapp{display:inline-block;padding:12px 24px;background:#25D366;color:#fff;border-radius:var(--radius);text-decoration:none;font-weight:700;font-size:14px}
.btn-whatsapp:hover{background:#128C7E}

.aviso-pagamento{padding:16px;border-radius:var(--radius);margin-bottom:16px;text-align:center;font-weight:600;font-size:14px}
.aviso-pagamento.vencido{background:var(--vermelho-claro);color:var(--vermelho)}
.aviso-pagamento.vencendo{background:var(--amarelo-claro);color:#92400E}
.aviso-pagamento.atencao{background:#DBEAFE;color:#1E40AF}

.pag-preview{background:var(--cinza-50);padding:16px;border-radius:var(--radius);margin-bottom:16px}
.pag-preview .preview-item{display:flex;justify-content:space-between;padding:8px 0}
.pag-preview .preview-item strong{font-size:16px}
.pag-preview .preview-item strong.verde{color:var(--verde)}

.lista-pagamentos{display:flex;flex-direction:column;gap:8px}
.pag-item{display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--cinza-50);border-radius:var(--radius);gap:12px}
.pag-info h4{font-size:15px;font-weight:700}
.pag-info p{font-size:12px;color:var(--cinza-500)}
.pag-badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}
.pag-badge.vencido{background:var(--vermelho-claro);color:var(--vermelho)}
.pag-badge.vencendo{background:var(--amarelo-claro);color:#92400E}
.pag-badge.atencao{background:#DBEAFE;color:#1E40AF}
.pag-badge.em_dia{background:var(--verde-claro);color:var(--verde)}
.pag-btn{padding:6px 14px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;background:var(--roxo);color:var(--branco)}

select{width:100%;padding:14px 16px;border:2px solid var(--cinza-200);border-radius:var(--radius);font-size:16px;font-family:inherit;background:var(--branco)}
select:focus{outline:none;border-color:var(--roxo)}

/* ==================== CARDS E COMPONENTES DA LOJA ==================== */
.card{background:var(--branco);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--sombra);margin-bottom:16px}
.card h2{font-size:18px;font-weight:700;margin-bottom:16px}
.card h3{font-size:16px;font-weight:600;margin-bottom:12px}

.estoque-card{background:linear-gradient(135deg,var(--roxo),var(--roxo-escuro));color:var(--branco);padding:24px;border-radius:var(--radius-lg);margin-bottom:16px}
.estoque-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.estoque-valor{font-size:28px;font-weight:800}
.estoque-baixo{background:var(--vermelho);padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:8px;text-align:center;animation:piscar 1.5s infinite}
@keyframes piscar{0%,100%{opacity:1}50%{opacity:0.7}}
.estoque-info{font-size:13px;opacity:0.85}

.estoque-atual-card{background:linear-gradient(135deg,var(--roxo),var(--roxo-escuro));color:var(--branco);text-align:center;padding:32px;border-radius:var(--radius-lg);margin-bottom:16px}
.estoque-atual-valor{font-size:36px;font-weight:800;display:block;margin-top:8px}

.metricas-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.metrica-card{background:var(--branco);padding:16px;border-radius:var(--radius);box-shadow:var(--sombra)}
.metrica-card.full-width{grid-column:1/-1}
.metrica-icon{font-size:24px;margin-bottom:8px}
.metrica-card h3{font-size:14px;font-weight:600;color:var(--cinza-600);margin-bottom:12px}
.metrica-dados{display:flex;flex-direction:column;gap:8px}
.metrica-dados-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.metrica-item .label{font-size:11px;color:var(--cinza-400);text-transform:uppercase}
.metrica-item .valor{font-size:16px;font-weight:700}
.metrica-item .valor.verde{color:var(--verde)}

.page-loja{display:none}
.page-loja.active{display:block}

/* ==================== FORMS ==================== */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--cinza-700);margin-bottom:8px}
.form-group input{width:100%;padding:14px 16px;border:2px solid var(--cinza-200);border-radius:var(--radius);font-size:16px;font-family:inherit}
.form-group input:focus{outline:none;border-color:var(--roxo)}
.btn-primary{width:100%;padding:16px;background:linear-gradient(135deg,var(--roxo),var(--roxo-escuro));color:var(--branco);border:none;border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-vender{background:linear-gradient(135deg,var(--verde),#059669);font-size:18px;padding:18px}

.input-group{display:flex;gap:8px}
.input-group input{flex:1}
.unidade-toggle{display:flex;background:var(--cinza-100);border-radius:var(--radius);overflow:hidden}
.unidade-btn{padding:14px 20px;border:none;background:none;font-weight:600;cursor:pointer;font-family:inherit}
.unidade-btn.active{background:var(--roxo);color:var(--branco)}

.botoes-rapidos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.btn-rapido{padding:12px;background:var(--roxo-bg);color:var(--roxo);border:none;border-radius:var(--radius);font-weight:600;cursor:pointer;font-family:inherit}
.btn-rapido:hover{border:2px solid var(--roxo);background:var(--branco)}

.venda-preview{background:var(--cinza-50);padding:16px;border-radius:var(--radius);margin-bottom:16px}
.preview-item{display:flex;justify-content:space-between;padding:8px 0}
.preview-item strong{font-size:16px}
.preview-item strong.verde{color:var(--verde)}
.mensagem-erro{background:var(--vermelho-claro);color:var(--vermelho);padding:12px;border-radius:var(--radius);text-align:center;margin-bottom:16px;font-weight:600}
.estoque-disponivel{text-align:center;font-size:13px;color:var(--cinza-500);margin-bottom:16px}

.filtros{display:flex;gap:8px;background:var(--branco);padding:8px;border-radius:var(--radius);box-shadow:var(--sombra);margin-bottom:16px}
.filtro-btn{flex:1;padding:10px;border:none;background:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--cinza-500)}
.filtro-btn.active{background:var(--roxo);color:var(--branco)}

.resumo-historico{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.resumo-item{background:var(--branco);padding:16px;border-radius:var(--radius);text-align:center;box-shadow:var(--sombra)}
.resumo-item .label{font-size:11px;color:var(--cinza-400);text-transform:uppercase;display:block}
.resumo-item .valor{font-size:18px;font-weight:700;display:block}
.resumo-item .valor.verde{color:var(--verde)}

.lista-historico,.lista-vendas{display:flex;flex-direction:column;gap:8px}
.lista-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--cinza-50);border-radius:var(--radius)}
.lista-item .info{display:flex;flex-direction:column;gap:2px}
.lista-item .data{font-size:12px;color:var(--cinza-400)}
.lista-item .quantidade{font-weight:600}
.lista-item .valor{font-weight:700;color:var(--verde)}
.vazio{text-align:center;color:var(--cinza-400);padding:24px;font-size:14px}

.grafico-barras{display:flex;align-items:flex-end;justify-content:space-between;height:120px;gap:8px}
.grafico-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.grafico-bar .barra{width:100%;max-width:40px;background:linear-gradient(to top,var(--roxo),var(--roxo-claro));border-radius:6px 6px 0 0;min-height:4px}
.grafico-bar .dia{font-size:10px;color:var(--cinza-500)}
.grafico-bar .valor-bar{font-size:9px;color:var(--cinza-400)}

.lucro-resumo{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--verde-claro);padding:16px;border-radius:var(--radius);margin-bottom:20px}
.lucro-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.lucro-item span{font-size:12px;color:var(--cinza-600)}
.lucro-item strong{font-size:20px;font-weight:700;color:var(--verde)}

/* ==================== NAV BOTTOM ==================== */
.nav-bottom{position:fixed;bottom:0;left:0;right:0;background:var(--branco);display:flex;justify-content:space-around;padding:8px 0;box-shadow:0 -2px 10px rgba(0,0,0,0.1);z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--cinza-400);font-size:11px;font-weight:500;cursor:pointer;padding:4px 8px}
.nav-item.active{color:var(--roxo)}
.nav-item svg{width:22px;height:22px}

/* ==================== TOAST ==================== */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--cinza-800);color:var(--branco);padding:12px 24px;border-radius:24px;font-size:14px;font-weight:500;box-shadow:var(--sombra-lg);z-index:200;animation:slideUp 0.3s ease}
.toast.sucesso{background:var(--verde)}.toast.erro{background:var(--vermelho)}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ==================== RESPONSIVO ==================== */
@media(max-width:768px){
  .hero{grid-template-columns:1fr;padding:40px 24px}
  .hero h2{font-size:32px}
  .hero-mockup{display:none}
  .features-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .metricas-grid{grid-template-columns:1fr}
  .admin-stats{grid-template-columns:1fr}
  .metrica-dados-grid{grid-template-columns:1fr}
  .resumo-historico{grid-template-columns:1fr}
  .botoes-rapidos{grid-template-columns:repeat(2,1fr)}
  .lucro-resumo{grid-template-columns:1fr}
}