/* Finanças Pessoais — mobile.css
   Media queries: responsive + print */

@media(max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .g65,.g3{grid-template-columns:1fr}
}

@media(max-width:768px){
  :root{--sw:0px}
  .sidebar{display:none}
  .main{margin-left:0;padding:12px 12px 70px}
  #fab,#bottom-nav{display:flex}
  .mob-month{display:flex}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .g2{grid-template-columns:1fr}
  .lan-btns,.cont-btns{opacity:1}

  /* ── Bottom sheet: modais vêm de baixo no mobile ───────── */
  .overlay.open{
    align-items: flex-end;
    padding: 0;
  }
  .modal{
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px 32px;
    max-height: 92vh;
    animation: sheet-up .28s cubic-bezier(.32,1,.23,1);
  }
  /* Handle visual no topo do sheet */
  .modal::before{
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--g2);
    border-radius: 2px;
    margin: -4px auto 14px;
    flex-shrink: 0;
  }
  /* Onboarding — fica centralizado (não é bottom sheet) */
  #ov-onboard{
    align-items: center;
    padding: 16px;
  }
  #ov-onboard .modal{
    border-radius: 20px;
    max-height: 95vh;
    animation: none;
    width: 100%;
  }
  #ov-onboard .modal::before{ display: none; }
  /* Confirm e shortcuts — centralizados */
  #ov-confirm.open,
  #ov-shortcuts.open{
    align-items: center;
    padding: 16px;
  }
  #ov-confirm .modal,
  #ov-shortcuts .modal{
    width: auto;
    max-width: 92vw;
    border-radius: var(--r);
    animation: none;
    margin: auto;
  }
  #ov-confirm .modal::before,
  #ov-shortcuts .modal::before{ display: none; }
  /* Campos maiores para touch */
  .finp{min-height:44px;font-size:16px}
  select.finp{min-height:44px}
  /* Lançamento rápido no mobile: valor ainda maior */
  .qk-val-input{font-size:64px}
  .modal-quick{padding:14px 16px 18px}
  .qk-cat-chip{font-size:13px;padding:7px 14px}
  .qk-save-btn{min-width:120px}

  /* FAB com safe-area para não ficar atrás do teclado/notch */
  #fab{
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  /* Bottom nav com safe area (notch do iPhone) */
  #bottom-nav{
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .main{
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

@keyframes sheet-up{
  from{transform:translateY(40px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@media(max-width:420px){
  .kpi-value{font-size:15px}
}

@media print{
  .sidebar,#fab,#bottom-nav,#autosave,#toast-area,
  .tb-actions button:not(#btn-print){display:none!important}
  .main{margin:0;padding:0}
  .page.active{display:block!important}
}

/* ── Modal rápido no mobile: campo de valor grande ──── */

/* ── Notebooks e telas médias (1024px–1366px) ──────────────────── */
@media(max-width:1366px) and (min-width:769px){
  :root{ --sw: clamp(190px, 14vw, 220px); }
  .main{ padding: clamp(14px, 1.5vw, 20px) clamp(16px, 2vw, 24px) 60px; }
  .kpi{ padding: 11px 13px; }
  .tb-title h2, .page-title h2{ font-size: clamp(16px, 1.5vw, 20px); }
  .card{ padding: 13px 15px; }
}

/* ── Telas grandes (>1600px) — aumentar um pouco ───────────────── */
@media(min-width:1600px){
  :root{ --sw: 260px; }
  .main{ padding: 28px 36px 60px; }
  .kpi-value{ font-size: 22px; }
}