/* ============================================================
   EuPoupei — CSS Principal
   Fontes: Nunito (body) + Syne (títulos/números)
   Paleta: Verde #1db954 | Branco | Cinza leve
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Syne:wght@700;800&display=swap');

:root {
  --verde:        #1db954;
  --verde-escuro: #158f3e;
  --verde-claro:  #e8f9ee;
  --verde-medio:  #b2edca;
  --branco:       #ffffff;
  --bg:           #f5f7f5;
  --cinza:        #e0e6e0;
  --cinza-texto:  #8a9e8a;
  --texto:        #1a2e1a;
  --texto-medio:  #3d5c3d;
  --danger:       #ff4757;
  --warning:      #ff9f43;
  --info:         #1e90ff;
  --sombra:       0 4px 20px rgba(29,185,84,0.10);
  --sombra-forte: 0 8px 32px rgba(29,185,84,0.18);
  --radius:       18px;
  --radius-sm:    12px;
  --nav-h:        68px;
  --topbar-h:     64px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Nunito', sans-serif;
  background: var(--bg);
  color: var(--texto);
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
a { text-decoration:none; color:inherit; }
input, textarea, select { font-family:inherit; }

/* ---- Layout app ---- */
#app { display:flex; flex-direction:column; min-height:100vh; max-width:480px; margin:0 auto; position:relative; background:var(--bg); }

/* ---- Topbar ---- */
.topbar {
  position:sticky; top:0; z-index:90;
  background: var(--verde-escuro);
  height: var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.topbar-logo { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:white; }
.topbar-logo span { color:var(--verde); }
.topbar-right { display:flex; gap:8px; align-items:center; }
.topbar-btn {
  width:38px; height:38px;
  background:rgba(255,255,255,0.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:18px;
  position:relative; transition:background .2s;
}
.topbar-btn:hover { background:rgba(255,255,255,0.22); }
.topbar-badge {
  position:absolute; top:4px; right:4px;
  width:9px; height:9px;
  background:var(--danger); border-radius:50%;
  border:1.5px solid var(--verde-escuro);
}
.topbar-avatar {
  width:38px; height:38px;
  border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,0.3);
  background: linear-gradient(135deg, #a8e6c2, var(--verde));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:white;
}

/* ---- Conteúdo principal ---- */
.content {
  flex:1;
  padding-bottom: calc(var(--nav-h) + 12px);
  overflow-y:auto;
}
.page { padding:16px; animation: fadeInUp .25s ease; }
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.page-title {
  font-family:'Syne',sans-serif;
  font-size:20px; font-weight:800;
  color:var(--texto); margin-bottom:4px;
}
.page-subtitle { font-size:12px; color:var(--cinza-texto); margin-bottom:16px; }

/* ---- Bottom Nav ---- */
.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  height:var(--nav-h);
  background:white;
  border-top:1px solid var(--cinza);
  display:flex; align-items:center;
  padding:0 4px 8px;
  box-shadow:0 -4px 20px rgba(0,0,0,0.06);
  z-index:100;
}
.nav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:3px; padding:8px 4px;
  border-radius:12px; transition:all .2s;
  color:var(--cinza-texto);
}
.nav-item svg { width:22px; height:22px; fill:currentColor; transition:all .2s; }
.nav-item span { font-size:10px; font-weight:700; }
.nav-item.active { color:var(--verde); }
.nav-item:hover  { background:var(--verde-claro); color:var(--verde); }

/* ---- Cards ---- */
.card {
  background:white; border-radius:var(--radius);
  padding:16px; box-shadow:var(--sombra);
  margin-bottom:12px;
}
.card-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:800; margin-bottom:12px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.section-title  { font-family:'Syne',sans-serif; font-size:15px; font-weight:800; }
.section-link   { font-size:12px; color:var(--verde); font-weight:700; cursor:pointer; }

/* ---- Botões ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 20px; border-radius:var(--radius-sm);
  font-family:'Nunito',sans-serif; font-size:14px; font-weight:800;
  cursor:pointer; transition:all .2s; border:none;
}
.btn-primary  { background:var(--verde); color:white; }
.btn-primary:hover  { background:var(--verde-escuro); transform:translateY(-1px); box-shadow:var(--sombra); }
.btn-secondary { background:var(--cinza); color:var(--texto-medio); }
.btn-danger    { background:var(--danger); color:white; }
.btn-full      { width:100%; }
.btn-lg { padding:15px; font-size:15px; border-radius:var(--radius); }

/* ---- Inputs ---- */
.input-group { margin-bottom:14px; }
.input-group label { display:block; font-size:12px; font-weight:800; color:var(--cinza-texto); margin-bottom:5px; }
.input {
  width:100%; padding:12px 14px;
  background:white; border:2px solid var(--cinza);
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; color:var(--texto);
  outline:none; transition:border-color .2s;
}
.input:focus { border-color:var(--verde); }
.input::placeholder { color:var(--cinza-texto); }
.search-bar { display:flex; gap:8px; margin-bottom:14px; }
.search-bar .input { flex:1; }
.search-btn { background:var(--verde); color:white; border-radius:var(--radius-sm); padding:0 16px; font-size:20px; }

/* ---- Hero poupança ---- */
.hero-savings {
  background: linear-gradient(135deg, var(--verde-escuro), var(--verde));
  border-radius:var(--radius); padding:20px;
  margin-bottom:12px; position:relative; overflow:hidden;
}
.hero-savings::before, .hero-savings::after {
  content:''; position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.07);
}
.hero-savings::before { width:140px; height:140px; top:-30px; right:-20px; }
.hero-savings::after  { width:90px;  height:90px;  bottom:-25px; right:50px; }
.hero-label  { font-size:12px; color:rgba(255,255,255,.75); font-weight:600; margin-bottom:4px; }
.hero-value  { font-family:'Syne',sans-serif; font-size:42px; font-weight:800; color:white; line-height:1; margin-bottom:8px; }
.hero-value small { font-size:24px; }
.hero-sub    { font-size:12px; color:rgba(255,255,255,.75); }
.hero-sub strong { color:white; }

/* ---- Quick actions ---- */
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.qa-btn {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:14px 6px;
  background:white; border-radius:var(--radius-sm);
  box-shadow:var(--sombra); transition:all .2s;
}
.qa-btn:hover { transform:translateY(-3px); box-shadow:var(--sombra-forte); }
.qa-icon  { font-size:24px; }
.qa-label { font-size:10px; font-weight:700; color:var(--texto-medio); text-align:center; line-height:1.2; }

/* ---- Promoções scroll ---- */
.promo-scroll { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px 16px 6px; margin:0 -16px; }
.promo-scroll::-webkit-scrollbar { display:none; }
.promo-card { min-width:150px; background:white; border-radius:var(--radius-sm); padding:12px; box-shadow:var(--sombra); flex-shrink:0; }
.promo-store { font-size:10px; color:var(--cinza-texto); font-weight:700; margin-bottom:3px; }
.promo-name  { font-size:13px; font-weight:800; color:var(--texto); margin-bottom:8px; line-height:1.2; }
.promo-prices { display:flex; align-items:center; gap:6px; }
.promo-old { font-size:11px; color:var(--cinza-texto); text-decoration:line-through; }
.promo-new { font-family:'Syne',sans-serif; font-size:17px; font-weight:800; color:var(--verde); }
.promo-badge { background:var(--danger); color:white; font-size:9px; font-weight:800; padding:2px 6px; border-radius:20px; margin-left:auto; }
.promo-timer { font-size:9px; color:var(--cinza-texto); margin-top:6px; }

/* ---- Comparação de preços ---- */
.product-card { background:white; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--sombra); margin-bottom:10px; }
.product-header { padding:14px 16px; border-bottom:1px solid var(--cinza); display:flex; align-items:center; gap:10px; }
.product-img { width:46px; height:46px; background:var(--verde-claro); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.product-name  { font-weight:800; font-size:14px; }
.product-brand { font-size:11px; color:var(--cinza-texto); }
.product-add   { margin-left:auto; background:var(--verde-claro); border-radius:8px; padding:6px 10px; font-size:11px; font-weight:800; color:var(--verde); }
.price-row     { display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--bg); }
.price-row:last-child { border:none; }
.price-row.best { background:var(--verde-claro); }
.store-logo    { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; flex-shrink:0; margin-right:10px; }
.store-name    { font-size:13px; font-weight:700; flex:1; }
.store-date    { font-size:10px; color:var(--cinza-texto); }
.price-tag     { font-family:'Syne',sans-serif; font-size:17px; font-weight:800; }
.price-tag.best { color:var(--verde); }
.best-label    { background:var(--verde); color:white; font-size:9px; font-weight:800; padding:2px 7px; border-radius:20px; margin-left:6px; }

/* ---- Combustíveis ---- */
.gps-bar       { background:white; border-radius:var(--radius-sm); padding:12px 14px; display:flex; align-items:center; gap:10px; box-shadow:var(--sombra); margin-bottom:12px; cursor:pointer; }
.filter-chips  { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-bottom:10px; padding-bottom:2px; }
.filter-chips::-webkit-scrollbar { display:none; }
.chip { background:white; border:2px solid var(--cinza); border-radius:20px; padding:6px 12px; font-size:11px; font-weight:800; color:var(--cinza-texto); white-space:nowrap; cursor:pointer; transition:all .2s; flex-shrink:0; }
.chip.active   { background:var(--verde); border-color:var(--verde); color:white; }
.fuel-card     { background:white; border-radius:var(--radius-sm); padding:14px 16px; box-shadow:var(--sombra); margin-bottom:8px; display:flex; align-items:center; gap:12px; }
.fuel-brand    { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; flex-shrink:0; }
.fuel-info     { flex:1; min-width:0; }
.fuel-name     { font-size:13px; font-weight:800; }
.fuel-addr     { font-size:11px; color:var(--cinza-texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fuel-dist     { font-size:10px; color:var(--cinza-texto); font-weight:700; }
.fuel-price    { font-family:'Syne',sans-serif; font-size:19px; font-weight:800; text-align:right; }
.fuel-price.best { color:var(--verde); }
.fuel-unit     { font-size:10px; color:var(--cinza-texto); text-align:right; }
.nav-fuel-btn  { background:var(--verde-claro); border-radius:10px; padding:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---- Listas ---- */
.share-badge   { background:var(--verde-claro); border-radius:var(--radius-sm); padding:10px 14px; display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.share-code    { font-family:'Syne',sans-serif; font-size:16px; font-weight:800; color:var(--verde-escuro); letter-spacing:2px; }
.list-input-area { background:white; border-radius:var(--radius); padding:14px; box-shadow:var(--sombra); margin-bottom:12px; }
.list-textarea { width:100%; border:2px solid var(--cinza); border-radius:var(--radius-sm); padding:10px 12px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:600; color:var(--texto); resize:none; outline:none; min-height:76px; transition:border-color .2s; }
.list-textarea:focus { border-color:var(--verde); }
.list-item     { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--bg); }
.list-item:last-child { border:none; }
.checkbox      { width:22px; height:22px; border-radius:6px; border:2px solid var(--cinza); flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; }
.checkbox.checked { background:var(--verde); border-color:var(--verde); }
.checkbox.checked::after { content:'✓'; color:white; font-size:13px; font-weight:900; }
.item-name.done { text-decoration:line-through; color:var(--cinza-texto); }
.item-price    { font-family:'Syne',sans-serif; font-size:14px; font-weight:800; color:var(--verde); }

/* ---- Onde comprar resultado ---- */
.onde-btn      { width:100%; background:linear-gradient(135deg, var(--verde-escuro), var(--verde)); color:white; border-radius:var(--radius); padding:16px; font-family:'Syne',sans-serif; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--sombra-forte); margin-top:8px; transition:all .2s; }
.onde-btn:hover { transform:translateY(-2px); }
.result-store  { background:white; border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra-forte); margin-bottom:10px; }
.result-header { padding:14px 16px; background:var(--verde-claro); display:flex; align-items:center; gap:10px; }
.result-loja   { font-family:'Syne',sans-serif; font-size:15px; font-weight:800; flex:1; }
.result-total  { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--verde); }
.result-saving { background:var(--verde); color:white; font-size:10px; font-weight:800; padding:3px 8px; border-radius:20px; }
.result-item   { display:flex; justify-content:space-between; padding:9px 16px; border-bottom:1px solid var(--bg); font-size:12px; }
.result-item:last-child { border:none; }

/* ---- Desambiguação ---- */
.disambig-card { background:white; border-radius:var(--radius); padding:16px; box-shadow:var(--sombra-forte); border-left:4px solid var(--verde); margin-bottom:10px; }
.disambig-q    { font-size:13px; font-weight:800; margin-bottom:10px; }
.disambig-q em { color:var(--verde); font-style:normal; }
.disambig-opt  { display:flex; justify-content:space-between; align-items:center; width:100%; background:var(--bg); border:2px solid var(--cinza); border-radius:var(--radius-sm); padding:10px 12px; font-size:12px; font-weight:700; margin-bottom:6px; transition:all .2s; text-align:left; }
.disambig-opt:last-child { margin:0; }
.disambig-opt:hover { border-color:var(--verde); background:var(--verde-claro); color:var(--verde); }
.disambig-opt span { font-size:10px; color:var(--cinza-texto); }

/* ---- Perfil ---- */
.profile-hero  { background:linear-gradient(135deg, var(--verde-escuro), var(--verde)); border-radius:var(--radius); padding:24px 20px; text-align:center; margin-bottom:12px; }
.profile-avatar { width:76px; height:76px; border-radius:50%; background:white; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:900; color:var(--verde); border:3px solid rgba(255,255,255,.4); overflow:hidden; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-name  { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; color:white; }
.profile-since { font-size:11px; color:rgba(255,255,255,.75); margin-top:2px; }
.badges-row    { display:flex; justify-content:center; gap:6px; margin-top:12px; flex-wrap:wrap; }
.badge-pill    { background:rgba(255,255,255,.2); border-radius:20px; padding:4px 10px; font-size:11px; font-weight:800; color:white; }
.pstats        { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.pstat         { background:white; border-radius:var(--radius-sm); padding:14px 10px; text-align:center; box-shadow:var(--sombra); }
.pstat-num     { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; color:var(--verde); }
.pstat-lbl     { font-size:10px; color:var(--cinza-texto); font-weight:700; margin-top:2px; }
.menu-item     { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--bg); cursor:pointer; }
.menu-item:last-child { border:none; }
.menu-icon     { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.menu-label    { flex:1; font-size:14px; font-weight:700; }
.menu-arrow    { color:var(--cinza-texto); font-size:18px; }

/* ---- Login ---- */
.login-page    { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; background:white; }
.login-logo    { font-family:'Syne',sans-serif; font-size:38px; font-weight:800; color:var(--verde-escuro); }
.login-logo span { color:var(--verde); }
.login-tagline { font-size:13px; color:var(--cinza-texto); margin-bottom:36px; margin-top:4px; }
.login-ilus    { font-size:80px; margin-bottom:28px; }
.login-title   { font-family:'Syne',sans-serif; font-size:24px; font-weight:800; text-align:center; margin-bottom:8px; }
.login-sub     { font-size:13px; color:var(--cinza-texto); text-align:center; margin-bottom:28px; line-height:1.6; max-width:300px; }
.login-btn     { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border-radius:var(--radius-sm); font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; cursor:pointer; margin-bottom:10px; border:none; transition:all .2s; }
.btn-google    { background:white; color:var(--texto); box-shadow:0 2px 12px rgba(0,0,0,0.1); }
.btn-email     { background:var(--verde); color:white; }
.btn-guest     { background:var(--bg); color:var(--texto-medio); }
.login-btn:hover { transform:translateY(-2px); box-shadow:var(--sombra-forte); }
.login-divider { display:flex; align-items:center; gap:10px; margin:4px 0; width:100%; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--cinza); }
.login-divider span { font-size:11px; color:var(--cinza-texto); font-weight:700; }

/* ---- Talão ---- */
.upload-area   { background:white; border-radius:var(--radius); padding:32px 20px; text-align:center; box-shadow:var(--sombra); margin-bottom:12px; border:2px dashed var(--verde-medio); cursor:pointer; transition:all .2s; }
.upload-area:hover { border-color:var(--verde); background:var(--verde-claro); }
.upload-icon   { font-size:52px; margin-bottom:10px; }
.upload-title  { font-family:'Syne',sans-serif; font-size:16px; font-weight:800; margin-bottom:4px; }
.upload-sub    { font-size:12px; color:var(--cinza-texto); line-height:1.5; }
.privacy-box   { background:var(--verde-claro); border-radius:var(--radius-sm); padding:12px 14px; display:flex; gap:10px; }
.privacy-box p { font-size:11px; color:var(--texto-medio); line-height:1.6; font-weight:600; }

/* ---- Toast / loading ---- */
.toast { position:fixed; bottom:calc(var(--nav-h) + 16px); left:50%; transform:translateX(-50%) translateY(20px); background:var(--texto); color:white; padding:10px 20px; border-radius:var(--radius-sm); font-size:13px; font-weight:700; white-space:nowrap; opacity:0; transition:all .3s; z-index:200; pointer-events:none; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.loading-spinner { display:inline-block; width:20px; height:20px; border:2px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Página pública produto ---- */
.product-public-header { background:linear-gradient(135deg, var(--verde-escuro), var(--verde)); padding:24px 16px; margin:-16px -16px 16px; }
.product-public-header h1 { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; color:white; }
.product-public-header p  { font-size:12px; color:rgba(255,255,255,.75); margin-top:3px; }
.price-chart { width:100%; height:120px; background:var(--verde-claro); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--cinza-texto); font-size:13px; }

/* ---- Animações de estado ---- */
.skeleton { background:linear-gradient(90deg, #f0f4f0 25%, #e0e6e0 50%, #f0f4f0 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ---- Responsividade desktop (preview) ---- */
@media (min-width:500px) {
  #app { box-shadow:0 0 60px rgba(0,0,0,0.12); }
  .bottom-nav { border-radius:0 0 20px 20px; }
}