/* =========================================================
   CONTROLE DE GASTOS PRO — DESIGN SYSTEM "PREMIUM E EQUILIBRADA"
   Fintech clara/adulta: verde petróleo + verde limão + branco gelo.
   Sem !important genérico em button/.card — cada componente define
   seu próprio visual.
========================================================= */

/* ===== TOKENS ===== */
:root{
  /* paleta pedida */
  --primary: #0F766E;
  --primary-dark: #0B5F59;
  --accent: #84CC16;      /* verde-limão — destaques, não botão principal */
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-soft: #F4F7F5;
  --text: #102A2A;
  --muted: #64748B;
  --border: #E2E8F0;
  --danger: #DC2626;
  --warning: #F59E0B;
  --success: #16A34A;

  /* aliases — mantidos porque as telas (dashboard.js/features.js) geram
     HTML com var(--good)/var(--warn)/var(--panel)/var(--stroke) etc.
     embutido; trocar os nomes exigiria reescrever milhares de linhas de
     lógica já validada, então o alias resolve sem duplicar regras. */
  --good: var(--success);
  --warn: var(--warning);
  --purple: var(--primary-dark);
  --panel: var(--surface);
  --panel2: var(--surface);
  --stroke: var(--border);

  --shadow: 0 8px 24px rgba(15,23,22,.06);
  --shadow-md: 0 14px 34px rgba(15,23,22,.09);
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --glass: none;
  --transition: .16s ease;

  --sidebar-w: 272px;
  --header-h: 68px;
  --bottomnav-h: 66px;
}
/* Mantido só para não quebrar telas que checam a classe .light —
   nesta versão o app é sempre claro, então .light não muda nada. */
.light{ --text: var(--text); }

/* ===== RESET ===== */
*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; touch-action:pan-x pan-y; }
body{
  margin:0;
  min-height:100dvh;
  color:var(--text);
  font-family: "Inter", system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background: var(--bg);
}
a{ color:inherit; }
h1,h2,h3{ margin:0; letter-spacing:-.01em; }
h1{ font-size:20px; font-weight:800; }
h2{ font-size:16px; font-weight:800; }
h3{ font-size:14px; color:var(--muted); font-weight:700; margin-bottom:10px; }
.small{ font-size:12px; color:var(--muted); }
.successText{ color:var(--success); font-weight:800; }
.warnText{ color:var(--warning); font-weight:800; }
.dangerText{ color:var(--danger); font-weight:900; }

/* Reset neutro do elemento <button> */
button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ===== LAYOUT PRIMITIVES ===== */
.wrap{ max-width:1040px; margin:auto; padding:24px; padding-bottom:120px; }
@media (max-width:899px){
  .wrap{ padding:12px 16px calc(90px + env(safe-area-inset-bottom)); }
}
/* BUG raiz do "espaço vazio gigante": .wrap só contém screen-home (e mais
   algumas telas internas), mas Gastos/Receitas/Relatório/Perfil/etc ficam
   FORA dele, como irmãos logo depois. Como .wrap nunca é escondido (só as
   .screen dentro dele são), o padding dele — inclusive aquele bottom gigante
   para não ficar atrás da bottom nav — continuava sendo renderizado como uma
   caixa vazia entre o header e essas telas. Zera o padding quando nenhuma
   .screen ativa está dentro do .wrap (só no mobile — o mesmo existe no
   desktop, mas o pedido desta rodada é só o mobile). */
@media (max-width:899px){
  .wrap:not(:has(.screen.active)){
    padding-top:0; padding-bottom:0;
  }
}

/* Status de sincronização — texto pequeno, sem faixa/área branca grande.
   --good sobrescrito só aqui: o JS (sync.js) seta color:var(--good) inline,
   então redefinir a variável neste elemento muda a cor sem tocar no JS. */
.syncStatusBar{
  --good: #0F766E;
  text-align:left; font-size:11px; font-weight:600;
  padding:0; margin:4px 0 0; line-height:1.3;
}
.row{ display:flex; gap:12px; align-items:center; }
.row > *{ flex:1; }
.grid1{ display:grid; grid-template-columns:1fr; gap:14px; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:640px){
  .grid2,.grid3,.grid4{ grid-template-columns:1fr; }
}
.hr{ height:1px; background:var(--border); margin:16px 0; }

/* ===== CARD ===== */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:22px;
  box-shadow: var(--shadow);
}
.note{
  background: var(--surface-soft);
  border:1px solid var(--border);
  padding:12px 14px;
  border-radius:var(--radius);
}
.kpi{ background: var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.kpi .v{ font-size:18px; font-weight:800; margin-top:6px; }

/* ===== BOTÕES ===== */
.btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--surface-soft);
  color:var(--text);
  padding:12px 18px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  font-weight:700;
  text-decoration:none;
  transition: background var(--transition), transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:hover{ background: #EAF0EE; border-color:color-mix(in srgb, var(--primary), transparent 60%); }
.btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 8px 20px rgba(15,118,110,.25); }
.btn.primary:hover{ background: var(--primary-dark); border-color:var(--primary-dark); }
.btn.good{ background:var(--success); border-color:var(--success); color:#fff; }
.btn.warn{ background:var(--warning); border-color:var(--warning); color:#3a2600; }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.mini{ padding:7px 12px; border-radius:9px; font-size:12.5px; font-weight:600; }
.btn.icon{ width:42px; height:42px; padding:0; border-radius:var(--radius-sm); }
.btn:active{ transform:translateY(1px); }

/* ===== FORM FIELDS ===== */
input,select,textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); outline:none;
  background: var(--surface); color:var(--text); font-size:14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus,select:focus,textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 82%);
}
textarea{ resize:vertical; min-height:90px; }
label{ font-size:12.5px; color:var(--muted); font-weight:600; display:block; margin-bottom:6px; }

/* ===== BADGES / KPI / ALERTAS / PROGRESSO ===== */
.badge{ display:inline-flex; gap:6px; align-items:center; padding:4px 10px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border); font-size:12px; color:var(--muted); font-weight:700; }
.badge.good{ color:var(--success); border-color:color-mix(in srgb, var(--success), transparent 65%); background:color-mix(in srgb, var(--success), transparent 90%); }
.badge.warn{ color:#92620a; border-color:color-mix(in srgb, var(--warning), transparent 55%); background:color-mix(in srgb, var(--warning), transparent 88%); }
.badge.danger{ color:var(--danger); border-color:color-mix(in srgb, var(--danger), transparent 65%); background:color-mix(in srgb, var(--danger), transparent 92%); }

.kpiGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.kpiPro{ position:relative; border-radius:var(--radius); padding:16px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); }
.kpiPro .kpiIcon{ width:32px; height:32px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:10px; background:color-mix(in srgb, var(--primary), transparent 90%); border:1px solid var(--border); }
.kpiPro .kpiIcon svg{ width:16px; height:16px; }
.kpiPro .kpiLabel{ font-size:12px; color:var(--muted); font-weight:700; }
.kpiPro .kpiValue{ font-size:19px; font-weight:800; margin-top:4px; color:var(--text); }
.kpiPro.kpi-salary .kpiIcon{ background:color-mix(in srgb, var(--primary), transparent 88%); color:var(--primary); }
.kpiPro.kpi-spent .kpiIcon{ background:color-mix(in srgb, var(--danger), transparent 90%); color:var(--danger); }
.kpiPro.kpi-spent .kpiValue{ color:var(--danger); }
.kpiPro.kpi-left .kpiIcon{ background:color-mix(in srgb, var(--success), transparent 88%); color:var(--success); }
.kpiPro.kpi-left .kpiValue.good{ color:var(--success); }
.kpiPro.kpi-left .kpiValue.bad{ color:var(--danger); }
.kpiPro.kpi-saved .kpiIcon{ background:color-mix(in srgb, var(--success), transparent 88%); color:var(--success); }
.kpiPro.kpi-saved .kpiValue{ color:var(--success); }

.healthCard{ display:flex; align-items:center; gap:18px; }
.healthRing{ --p:0; width:88px; height:88px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--health-color, var(--success)) calc(var(--p)*1%), var(--surface-soft) 0); position:relative; }
.healthRing::before{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.healthRing .healthNum{ position:relative; font-size:20px; font-weight:800; color:var(--text); }
.healthInfo{ min-width:0; flex:1; }
.healthInfo .healthTitle{ font-weight:800; font-size:15px; }
.healthInfo .healthLabel{ display:inline-flex; margin-top:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid var(--border); }
.healthInfo .healthTip{ margin-top:8px; color:var(--muted); }

.alertsList{ display:grid; gap:8px; margin-top:10px; }
.alertItem{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-soft); font-size:12.5px; line-height:1.4; color:var(--text); }
.alertItem .alertIcon{ font-size:14px; line-height:1.4; opacity:.85; }
.alertItem.good{ border-color:color-mix(in srgb, var(--success), transparent 78%); background:color-mix(in srgb, var(--success), transparent 95%); }
.alertItem.good .alertIcon{ color:var(--success); }
.alertItem.warn{ border-color:color-mix(in srgb, var(--warning), transparent 72%); background:color-mix(in srgb, var(--warning), transparent 94%); }
.alertItem.warn .alertIcon{ color:#92620a; }
.alertItem.danger{ border-color:color-mix(in srgb, var(--danger), transparent 78%); background:color-mix(in srgb, var(--danger), transparent 95%); }
.alertItem.danger .alertIcon{ color:var(--danger); }

.progressHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.progressBarTrack{ width:100%; height:10px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border); overflow:hidden; margin-top:10px; }
.progressBarFill{ height:100%; border-radius:999px; transition:width .3s ease; background:var(--success); }
.progressBarFill.warn{ background:var(--warning); }
.progressBarFill.danger{ background:var(--danger); }
.progressFoot{ display:flex; justify-content:space-between; gap:10px; margin-top:8px; font-size:12px; color:var(--muted); }

.quickGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.quickItem{ border:1px solid var(--border); background:var(--surface); border-radius:14px; padding:12px 14px; }
.quickItem .quickLabel{ font-size:10.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.quickItem .quickValue{ font-size:15px; font-weight:700; margin-top:5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ===== LISTA DE GASTOS ===== */
.expenseCard{ padding:13px 15px; border-radius:16px; border:1px solid var(--border); background:var(--surface); margin-bottom:8px; box-shadow:0 4px 14px rgba(15,118,110,.06); }
.expenseRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.expenseTitle{ font-weight:600; font-size:13.5px; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.expenseValue{ font-weight:700; font-size:15px; color:var(--text); white-space:nowrap; flex:0 0 auto; }
.expenseMeta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; }
.expenseFooter{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.expenseDelete{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--muted); font-size:12px; opacity:.6; flex:0 0 auto; }
.expenseDelete:hover{ opacity:1; color:var(--danger); background:color-mix(in srgb, var(--danger), transparent 92%); }
#list{ border-spacing:0; width:100%; }
#list tr{ background:transparent; border:none; display:block; }
#list td{ padding:0; display:block; }
.categoryChipBtn{ border:1px solid var(--border); background:var(--surface-soft); color:var(--muted); padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.categoryChipBtn:hover{ background:color-mix(in srgb, var(--primary), transparent 90%); color:var(--primary); border-color:color-mix(in srgb, var(--primary), transparent 65%); }
.catResumoList{ display:grid; gap:10px; margin-top:12px; }
.catResumoItem{ border:1px solid var(--border); background:var(--surface-soft); border-radius:var(--radius); padding:10px 12px; }

/* ===== EMPTY STATE ===== */
.proEmpty{ padding:26px 18px; border-radius:var(--radius); border:1.5px dashed var(--border); background:var(--surface-soft); text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.proEmpty .proEmptyIcon{ font-size:26px; opacity:.55; color:var(--muted); display:flex; }
.proEmpty .proEmptyIcon svg{ width:26px; height:26px; }
.proEmpty .proEmptyTitle{ font-weight:600; font-size:13.5px; color:var(--text); }
.proEmpty .proEmptyText{ font-size:12px; color:var(--muted); max-width:38ch; }
.proEmpty .proEmptyAction{ margin-top:6px; }
.empty{ padding:18px; border-radius:var(--radius); border:1px dashed var(--border); text-align:center; color:var(--muted); }

/* ===== TOAST (feedback de ações) ===== */
#toastHost{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:3000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  background: var(--text); color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 34px rgba(16,42,42,.25);
  font-size:13px; font-weight:700;
  max-width:min(90vw,420px);
  animation: toastIn .18s ease-out;
}
.toast.good{ background: var(--success); }
.toast.warn{ background: var(--warning); color:#3a2600; }
.toast.danger{ background: var(--danger); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* ===== LOADING ===== */
#loading{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; text-align:center; background:var(--bg); }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--primary); animation:spin .8s linear infinite; margin:0 auto 14px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
#debugBox{ position:fixed; left:12px; right:12px; bottom:12px; background:var(--text); color:#fff; padding:10px; border-radius:var(--radius-sm); font-size:12px; z-index:9999; display:none; white-space:pre-wrap; }

/* Skeleton simples para loading de listas */
.skeleton{ background: linear-gradient(90deg, var(--surface-soft) 25%, #EAF0EE 37%, var(--surface-soft) 63%); background-size:400% 100%; animation:skeletonWave 1.4s ease infinite; border-radius:var(--radius-sm); }
@keyframes skeletonWave{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ===== MODAIS ===== */
.overlay{
  position:fixed; inset:0; background:rgba(16,42,42,.35);
  display:none; align-items:flex-start; justify-content:center;
  padding:16px; padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(16px, env(safe-area-inset-bottom));
  z-index:2000; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.modal{
  width:min(520px,100%); max-height:calc(100dvh - 32px);
  background: var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden; display:flex; flex-direction:column; margin:auto 0;
}
.modalHeader{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border); }
.modalHeader .title{ display:flex; gap:10px; align-items:center; font-weight:800; }
.modalBody{ padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#overlay-categoriaResumo .modalBody{ max-height:calc(100dvh - 140px); }
#catResumoItens{ max-height:48vh; overflow-y:auto; padding-right:4px; }
.confirmModal{ max-width:460px; }
.confirmModal .modalBody{ padding-top:20px; padding-bottom:20px; }
.modalFooter{ padding:16px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }
.closeX{ width:40px; height:40px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; background:var(--surface-soft); border:1px solid var(--border); font-weight:800; }

/* Ação rápida do FAB central */
.fabQuickList{ display:flex; flex-direction:column; gap:6px; }
.fabQuickItem{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 12px; border-radius:14px;
  background:var(--surface-soft); border:1px solid var(--border);
  font-weight:600; font-size:14px; color:var(--text); text-align:left;
}
.fabQuickItem:hover{ background:color-mix(in srgb, var(--primary), transparent 92%); border-color:color-mix(in srgb, var(--primary), transparent 65%); }
.fabQuickIcon{
  width:36px; height:36px; border-radius:10px; flex:0 0 auto;
  background:color-mix(in srgb, var(--primary), transparent 88%); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}

/* ===== TELAS (SPA screens) ===== */
.screen{ display:none; }
.screen.active{ display:block; }

/* ===== MENU MOBILE — tela cheia (não é mais drawer lateral) ===== */
.mobile-menu-screen{
  position:fixed; inset:0; z-index:9999;
  width:100vw; height:100dvh;
  background:var(--bg);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:none;
}
.mobile-menu-screen.active{ display:block; }
@media (min-width:900px){
  .mobile-menu-screen{ display:none !important; }
}
.mobile-menu-hero{
  background:linear-gradient(155deg, var(--primary), var(--primary-dark));
  color:#fff;
  padding:max(18px, env(safe-area-inset-top)) 18px 20px;
  border-radius:0 0 24px 24px;
}
.mobile-menu-hero__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.mobile-menu-hero__title{ font-size:18px; font-weight:700; }
.mobile-menu-hero__close{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.14); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
}
.mobile-menu-hero__profile{ display:flex; align-items:center; gap:12px; }
.mobile-menu-hero__avatar{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.2); color:#fff; font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.mobile-menu-hero__info{ min-width:0; flex:1; }
.mobile-menu-hero__name{ font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-menu-hero__email{ font-size:12px; color:rgba(255,255,255,.72); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-menu-hero__badge{
  flex:0 0 auto; padding:4px 11px; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,.16); color:#fff;
}
.mobile-menu-content{ padding:8px 16px calc(32px + env(safe-area-inset-bottom)); }
.mobile-menu-section{ margin-top:20px; }
.mobile-menu-section:first-child{ margin-top:16px; }
.mobile-menu-section__title{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:0 4px 6px; }
.backRow{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.backBtn{ display:flex; align-items:center; gap:8px; border-radius:var(--radius-sm); padding:10px 14px; font-weight:700; }
@media (max-width:899px){
  .backRow{ margin:0 0 12px; }
  .backRow > div{ font-size:20px; font-weight:700; }
}

/* As 9 telas principais ganharam .mobile-hero próprio no mobile — o
   .backRow (botão Voltar + título antigos) fica só para desktop nelas.
   As demais telas (secundárias, abertas via drawer) continuam com o
   .backRow normal no mobile, já que não têm hero. */
@media (max-width:899px){
  #screen-home > .backRow,
  #screen-gastos > .backRow,
  #screen-receitas > .backRow,
  #screen-relatorio > .backRow,
  #screen-perfil > .backRow,
  #screen-contas > .backRow,
  #screen-cartoes > .backRow,
  #screen-orcamentos > .backRow,
  #screen-metas > .backRow{
    display:none;
  }
}

/* Telas internas: container próprio, max-width confortável no desktop */
#screen-gastos, #screen-receitas, #screen-contas, #screen-orcamentos, #screen-cartoes,
#screen-metas, #screen-calendario, #screen-relatorio, #screen-comprovante,
#screen-meu-plano, #screen-perfil, #screen-seguranca, #screen-alertas,
#screen-lixeira, #screen-atividades, #screen-diagnostico, #screen-hoje,
#screen-parcelamentos, #screen-lembretes, #screen-ajuda, #screen-config,
#screen-categories, #screen-fixos, #screen-investfixos, #screen-simulators,
#screen-onboarding{
  max-width:1140px; width:100%; margin:0 auto;
  padding:12px 16px calc(90px + env(safe-area-inset-bottom));
}
@media (min-width:900px){
  #screen-gastos, #screen-receitas, #screen-contas, #screen-orcamentos, #screen-cartoes,
  #screen-metas, #screen-calendario, #screen-relatorio, #screen-comprovante,
  #screen-meu-plano, #screen-perfil, #screen-seguranca, #screen-alertas,
  #screen-lixeira, #screen-atividades, #screen-diagnostico, #screen-hoje,
  #screen-parcelamentos, #screen-lembretes, #screen-ajuda, #screen-config,
  #screen-categories, #screen-fixos, #screen-investfixos, #screen-simulators,
  #screen-onboarding{
    padding-top:24px; padding-left:28px; padding-right:28px;
  }
}

/* ===== SHELL: SIDEBAR / HEADER / BOTTOM NAV ===== */
#app{ display:block; background:var(--bg); min-height:100dvh; }
@media (min-width:900px){
  #app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; align-items:start; }
}

.sidebarPro{ display:none; }
@media (min-width:900px){
  .sidebarPro{
    display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
    background: var(--primary);
    padding:20px 14px;
  }
}
.sidebarLogo{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; font-weight:800; line-height:1.2; color:#fff; }
.sidebarLogo .sidebarLogoIcon{ font-size:22px; }
.sidebarNav{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.sidebarNav::-webkit-scrollbar{ width:6px; }
.sidebarNav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:6px; }
.sidebarItem{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:600; color:rgba(255,255,255,.75);
  border:1px solid transparent; background:transparent;
  text-align:left; width:100%;
  transition: background var(--transition), color var(--transition);
}
.sidebarItem:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebarItem.active{
  background: rgba(255,255,255,.14);
  color:#fff;
  font-weight:700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebarItem .sbIcon{ width:20px; text-align:center; flex:0 0 auto; }
.sidebarDivider{ height:1px; background:rgba(255,255,255,.14); margin:10px 4px; }
.sidebarPlanCard{ margin-top:12px; padding:14px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); }
.sidebarPlanCard .spTitle{ font-size:11px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; display:flex; align-items:center; gap:6px; }
.sidebarPlanCard .spName{ font-weight:800; font-size:15px; margin-top:4px; color:#fff; }
.sidebarPlanCard .spText{ font-size:12px; color:rgba(255,255,255,.75); margin-top:4px; }

.headerPro{ padding:16px 24px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:50; }
.headerTopRow{ display:flex; align-items:center; gap:12px; justify-content:space-between; }
.headerLeft{ display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.headerHamburger{ width:40px; height:40px; border-radius:var(--radius-sm); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--surface-soft); border:1px solid var(--border); color:var(--primary); }
.headerLogoMobile{ display:flex; align-items:center; gap:8px; font-weight:800; min-width:0; color:var(--primary); }
.headerLogoMobile .hlmIcon{ font-size:20px; }
.headerLogoMobile .hlmText{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.headerGreeting{ min-width:0; }
.headerGreeting .hgTitle{ font-weight:800; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.headerGreeting .hgSub{ font-size:12px; color:var(--muted); margin-top:2px; }
.headerGreetingDesktop{ display:none; }
.headerActions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.headerSearch{ display:none; align-items:center; gap:8px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; min-width:220px; }
.headerSearch input{ background:transparent; border:0; padding:0; font-size:13px; width:100%; }
.headerIconBtn{ position:relative; width:40px; height:40px; border-radius:var(--radius-sm); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--surface-soft); border:1px solid var(--border); color:var(--primary); }
.headerIconBadge{ position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }
.headerAvatar{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 12px 4px 4px; border-radius:999px; border:1px solid var(--border); background:var(--surface-soft); }
.headerAvatarPic{ width:32px; height:32px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; flex:0 0 auto; }
.headerAvatarInfo{ display:none; }
.headerAvatarName{ font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; color:var(--text); }
.headerAvatarBadge{ font-size:9px; font-weight:800; padding:1px 7px; border-radius:999px; background:var(--accent); color:#173206; letter-spacing:.3px; }
@media (min-width:900px){
  .headerHamburger{ display:none; }
  .headerLogoMobile{ display:none; }
  .headerGreetingDesktop{ display:block; }
  .headerGreetingMobile{ display:none; }
  .headerSearch{ display:flex; }
  .headerAvatarInfo{ display:block; }
}
@media (max-width:899px){
  /* O header branco global vira o .mobile-hero verde de cada tela —
     ele deixa de ser renderizado no mobile (fica só no desktop). */
  .headerPro{ display:none; }
}

/* =========================================================
   MOBILE HERO — cabeçalho verde próprio por tela (só mobile).
   Cada tela principal (Dashboard, Gastos, Receitas, Relatórios,
   Perfil, Contas, Cartões, Orçamentos, Metas) renderiza o seu.
========================================================= */
.mobile-hero{ display:none; }
@media (max-width:899px){
  .mobile-hero{
    position:relative; overflow:hidden;
    display:block;
    width:calc(100% + 32px);
    margin:-12px -16px 18px;
    padding:16px 18px 22px;
    background:linear-gradient(155deg, var(--primary), var(--primary-dark));
    color:#fff;
    border-radius:0 0 28px 28px;
    box-shadow:0 14px 30px rgba(11,95,89,.22);
  }
  .mobile-hero::before{
    content:""; position:absolute; top:-50%; right:-15%; width:60%; height:150%;
    background:rgba(255,255,255,.05); border-radius:50%; pointer-events:none;
  }
  .mobile-hero__top{ position:relative; display:flex; align-items:center; gap:8px; margin-bottom:16px; }
  .mobile-hero__menu{
    width:34px; height:34px; border-radius:10px; flex:0 0 auto;
    background:rgba(255,255,255,.14); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .mobile-hero__actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
  .mobile-hero__icon{
    position:relative; width:34px; height:34px; border-radius:10px;
    background:rgba(255,255,255,.14); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .mobile-hero__avatar{
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    background:rgba(255,255,255,.22); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700;
  }
  .mobile-hero__badge{
    position:absolute; top:-3px; right:-3px; min-width:15px; height:15px;
    padding:0 3px; border-radius:999px; background:var(--danger); color:#fff;
    font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--primary-dark);
  }
  .mobile-hero__title{ position:relative; font-size:21px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
  .mobile-hero__subtitle{ position:relative; font-size:12.5px; color:rgba(255,255,255,.7); margin-top:4px; line-height:1.4; }
  .mobile-hero__tabs{ position:relative; display:flex; gap:18px; margin-top:18px; border-top:1px solid rgba(255,255,255,.16); padding-top:10px; }
  .mobile-hero__tab{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.55); padding-bottom:6px; cursor:pointer; user-select:none; }
  .mobile-hero__tab.active{ color:#fff; border-bottom:2px solid var(--accent); }
}

.bottomNavPro{ display:none; }
@media (max-width:899px){
  .bottomNavPro{
    display:flex;
    position:fixed; left:0; right:0; bottom:0;
    height:var(--bottomnav-h);
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow: 0 -6px 20px rgba(11,95,89,.25);
    z-index:900;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottomNavItem{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; font-size:10px; font-weight:500; color:rgba(255,255,255,.6);
  }
  .bottomNavItem .bnIcon{ display:flex; line-height:1; }
  .bottomNavItem .bnIcon svg{ width:20px; height:20px; }
  .bottomNavItem.active{ color:var(--accent); font-weight:600; }
  .bottomNavItem.active .bnIcon{ color:var(--accent); }
  /* Vaga reservada para o FAB central — nenhuma aba fica embaixo dele */
  .bottomNavSlot{ flex:1; }
  #app{ padding-bottom:var(--bottomnav-h); }
}

.fabWrap{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:950; }
/* BUG: esta media query precisa vir DEPOIS da regra base .fabWrap acima —
   como as duas têm a mesma especificidade, quem aparece por último no
   arquivo vence, então o override de "bottom"/"right" para mobile tinha
   que ficar aqui embaixo, senão a regra base ganhava. z-index (950) fica
   acima da bottom nav (900) e abaixo do drawer (1400/1500). No mobile o
   FAB fica centralizado e "encaixado" na bottom nav, como na referência. */
@media (max-width:899px){
  .fabWrap{
    right:50%; bottom:calc(var(--bottomnav-h) / 2 + env(safe-area-inset-bottom));
    transform:translateX(50%);
  }
}
.fab{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:3px solid var(--bg); box-shadow:0 10px 22px rgba(11,95,89,.3); cursor:pointer; user-select:none; }
.fab.add{ background: var(--accent); color:#173206; font-size:26px; font-weight:600; }
/* Com o menu mobile (tela cheia) aberto, some com a bottom nav e o FAB —
   não pode nada por cima do menu nem atrás dele. */
body.menu-open .bottomNavPro, body.menu-open .fabWrap{ display:none !important; }
.fab.ai{ background: var(--primary); color:#fff; font-weight:800; letter-spacing:.5px; font-size:11px; line-height:1.05; text-align:center; }
.fab.ai span{ display:block; font-weight:800; font-size:12px; }
.fab.ai em{ font-style:normal; font-weight:700; font-size:10px; opacity:.85; }
.fab.voice{ background: var(--warning); color:#3a2600; font-weight:800; font-size:18px; }
.fab.voice.hidden{ display:none; }

/* ===== DASHBOARD HERO ===== */
.dashHero{ margin-bottom:8px; }
.dashKpiRow{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:20px; }
@media (max-width:900px){
  .dashKpiRow{ grid-template-columns:repeat(2,1fr); }
  .dashKpi.kpi-pendente{ display:none; }
}
.dashKpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); transition: transform var(--transition), box-shadow var(--transition); }
.dashKpi .dkTop{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.dashKpi .dkLabel{ font-size:12.5px; color:var(--muted); font-weight:700; }
.dashKpi .dkIcon{ width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px; }
.dashKpi .dkValue{ font-size:21px; font-weight:800; color:var(--text); }
.dashKpi.kpi-saldo .dkIcon{ background:color-mix(in srgb, var(--primary), transparent 90%); color:var(--primary); }
.dashKpi.kpi-receitas .dkIcon{ background:color-mix(in srgb, var(--primary), transparent 90%); color:var(--primary); }
.dashKpi.kpi-gastos .dkIcon{ background:color-mix(in srgb, var(--danger), transparent 92%); color:var(--danger); }
.dashKpi.kpi-pendente .dkIcon{ background:color-mix(in srgb, var(--warning), transparent 86%); color:#92620a; }
.dashKpi.kpi-guardado .dkIcon{ background:color-mix(in srgb, var(--accent), transparent 84%); color:#65930f; }

.dashCardHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; }
.dashCardHead h3{ margin:0; color:var(--text); font-size:14.5px; font-weight:700; }
.dashCardHead a{ font-size:12px; font-weight:600; color:var(--primary); cursor:pointer; flex:0 0 auto; }

.creditCardVisual{
  position:relative; overflow:hidden;
  border-radius:20px; padding:20px;
  background: linear-gradient(150deg, var(--card-color, var(--primary)), color-mix(in srgb, var(--card-color, var(--primary)), #000 35%));
  color:#fff; border:1px solid rgba(255,255,255,.1); box-shadow:0 14px 30px rgba(11,95,89,.25);
}
.creditCardVisual::before{
  content:""; position:absolute; top:-40%; right:-20%; width:70%; height:140%;
  background:rgba(255,255,255,.05); border-radius:50%; pointer-events:none;
}
.ccvTop{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; position:relative; }
.ccvName{ font-weight:700; font-size:15px; letter-spacing:.2px; }
.ccvChip{ opacity:.85; }
.ccvRow{ display:flex; justify-content:space-between; gap:10px; position:relative; }
.ccvLabel{ font-size:11px; opacity:.75; }
.ccvValue{ font-size:19px; font-weight:700; margin-top:3px; }
.ccvValue--accent{ color:var(--accent); }
.ccvUsageTrack{ width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden; margin-top:16px; }
.ccvUsageFill{ height:100%; border-radius:999px; background:var(--accent); transition:width .3s ease; }
.ccvUsageLabel{ font-size:11px; opacity:.7; margin-top:8px; }

.compromissoRow{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.compromissoRow:last-child{ border-bottom:none; }
.compromissoDate{ width:42px; text-align:center; flex:0 0 auto; background:var(--surface-soft); border:1px solid var(--border); border-radius:10px; padding:6px 4px; }
.ccDay{ font-weight:800; font-size:14px; line-height:1; color:var(--text); }
.ccMon{ font-size:9.5px; color:var(--muted); text-transform:uppercase; margin-top:2px; }
.compromissoMain{ flex:1; min-width:0; }
.compromissoTitle{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.compromissoWhen{ flex:0 0 auto; white-space:nowrap; color:var(--muted); }

/* ===== ONBOARDING ===== */
.obProgressTrack{ width:100%; height:8px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border); overflow:hidden; margin-top:6px; }
.obProgressFill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--accent)); transition:width .3s ease; }

/* ===== LAYOUT EDITOR / LISTAS EM CARD ===== */
.layoutItem{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:var(--radius); background:var(--surface-soft); border:1px solid var(--border); }
.layoutLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.layoutTitle{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.layoutActions{ display:flex; gap:8px; flex:0 0 auto; }
.chk{ width:18px; height:18px; accent-color:var(--primary); }
.handle{ width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--surface); font-weight:800; user-select:none; }

/* ===== MENU / FERRAMENTAS (tela Configurações) ===== */
/* Itens do menu mobile em tela cheia — lista limpa, sem cards gigantes */
.mobile-menu-item{
  display:flex; align-items:center; gap:14px; width:100%;
  height:50px; padding:0 4px; border-radius:0;
  text-align:left; font-weight:500; font-size:14.5px; color:var(--text);
  background:transparent; border:0; border-bottom:1px solid var(--border);
}
.mobile-menu-item:last-child{ border-bottom:none; }
.mobile-menu-item:active{ background:var(--surface-soft); }
.mobile-menu-item__icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:var(--muted); flex:0 0 auto; }
.mobile-menu-item__icon svg{ width:20px; height:20px; }
.mobile-menu-item--danger{ color:var(--danger); }
.mobile-menu-item--danger .mobile-menu-item__icon{ color:var(--danger); }
.mobile-menu-item.active{ color:var(--primary); font-weight:600; }
.mobile-menu-item.active .mobile-menu-item__icon{ color:var(--primary); }

.planoFeatureList{ display:flex; flex-direction:column; gap:8px; font-size:13px; }
.planoFeatureList > div{ display:flex; align-items:center; gap:8px; }
.planoFeatureList > div::before{ content:"✓"; color:var(--primary); font-weight:700; flex-shrink:0; }

.pdfPreview{ border:1px dashed var(--border); border-radius:var(--radius); padding:12px; background:var(--surface-soft); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; }
.backupRow{ display:flex; gap:10px; flex-wrap:wrap; }
.backupRow .btn{ flex:1 1 160px; }

/* ===== IA PRO (badge reutilizado no card do dashboard) ===== */
.iaLogo{
  width:44px; height:44px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background: var(--primary);
  color:#fff; font-weight:800;
}

/* ===== VOICE TOAST (voice-bridge / voz.html) ===== */
.voiceToast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:92px; z-index:1200;
  padding:10px 14px; border-radius:999px;
  background:var(--text); color:#fff; font-size:13px;
  border:1px solid rgba(255,255,255,.15); box-shadow:0 10px 24px rgba(16,42,42,.3);
  display:none; max-width:min(92vw,560px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== TABS (usado em telas com sub-seções) ===== */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.tabItem{ padding:10px 16px; font-weight:700; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; }
.tabItem.active{ color:var(--primary); border-bottom-color:var(--accent); }

/* ===== RESPONSIVO GERAL — MOBILE (<=768px) ===== */
@media (max-width:768px){
  html,body{ overflow-x:hidden; }
  body{
    line-height:1.45;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  .card{ border-radius:18px; padding:14px; box-shadow:0 8px 24px rgba(15,118,110,.08); }
  .grid1,.grid2,.grid3,.grid4{ gap:12px; }
  h1{ font-size:19px; font-weight:700; }
  h2{ font-size:15px; font-weight:600; }
  h3{ font-weight:600; }
  input,select,textarea{ min-height:48px; }
  .backRow{ margin-bottom:12px; }
  .kpiGrid{ gap:10px; }
  .kpiPro{ padding:12px; }
  .kpiPro .kpiIcon{ width:28px; height:28px; margin-bottom:8px; }
  .kpiPro .kpiIcon svg{ width:14px; height:14px; }
  .kpiPro .kpiValue{ font-size:17px; font-weight:700; margin-top:3px; }
  .kpiPro .kpiLabel{ font-size:11px; font-weight:500; }
  .dashKpiRow{ gap:12px; margin-bottom:14px; }
  .dashKpi{ padding:12px; border-radius:18px; box-shadow:0 8px 24px rgba(15,118,110,.08); }
  .dashKpi .dkValue{ font-size:18px; font-weight:700; }
  .dashKpi .dkLabel{ font-weight:600; }
  .quickItem .quickValue{ font-weight:700; }
  .healthInfo .healthTitle{ font-weight:600; }

  /* Várias telas (JS legado) escrevem font-weight:800/900/950 inline.
     Suaviza só no mobile — evita reescrever centenas de trechos e
     não altera a aparência do desktop. */
  [style*="font-weight:900"],[style*="font-weight:950"]{ font-weight:700 !important; }
  [style*="font-weight:800"]{ font-weight:600 !important; }
}
@media (max-width:400px){
  .kpiGrid{ grid-template-columns:1fr; }
}

/* ===== PERFIL — card de usuário, meta da conta e ações ===== */
.profileCardRow{ display:flex; align-items:center; gap:14px; }
.profileAvatar{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:var(--primary); color:#fff; font-size:19px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.profileInfo{ min-width:0; flex:1; }
.profileName{ font-weight:700; font-size:17px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profileEmail{ font-size:12.5px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profileBadge{
  flex:0 0 auto; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:600;
  background:color-mix(in srgb, var(--primary), transparent 88%); color:var(--primary);
}
.profileMetaList{ display:flex; flex-direction:column; gap:11px; }
.profileMetaRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.profileMetaRow span{ color:var(--muted); }
.profileMetaRow b{ font-weight:600; color:var(--text); }
@media (max-width:768px){
  #screen-perfil .row{ justify-content:flex-end; }
}

/* Receitas: formulário mais adulto — card 16px, botão de 48px, labels discretas */
@media (max-width:899px){
  #screen-receitas .card{ padding:16px; box-shadow:0 4px 14px rgba(15,118,110,.06); }
  #screen-receitas .btn.primary{ height:48px; }
  #screen-receitas label{ font-size:11.5px; }
}