/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Media queries gerais (mobile)
   ════════════════════════════════════════════════════════════════ */

/* MAX 900 — Sidebar vira off-canvas, hambúrguer aparece, cards 2 colunas */
@media(max-width:900px){
  .hamburger{display:flex}
  .sidebar{
    position:fixed;
    top:0;
    left:-240px;
    height:100vh;
    padding-top:calc(64px + env(safe-area-inset-top));
    z-index:95;
    box-shadow:4px 0 20px rgba(0,0,0,.4);
  }
  .sidebar.open{left:0}
  .stats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .full{grid-column:1}
  /* Em mobile, mantém o badge "Ouro · 132d" visível e esconde apenas avatar+nome */
  .nav-user .nav-avatar,
  .nav-user #nav-name{display:none}
}

/* MAX 768 — Nav esconde itens secundários */
@media(max-width:768px){
  .wa-nav-btn span#wa-nav-label{display:none}
  .wa-nav-btn{padding:.3rem .5rem;min-width:32px;justify-content:center}
  .logout-btn{padding:.3rem .5rem;font-size:11px}
  .nav-user #nav-name{display:none}
  .dark-btn,.search-nav-btn{width:28px;height:28px}
  /* Dashboard — cards em coluna única */
  .stats{grid-template-columns:1fr 1fr}
  /* Perfil — coluna única */
  #main-content .sec-hdr + div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* MAX 600 — Densificação geral */
@media(max-width:600px){
  .dash-grid{grid-template-columns:1fr!important}
  .content{padding:.75rem}
  .stats{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat{padding:.85rem 1rem}
  .stat-value{font-size:1.35rem;letter-spacing:-.01em}
  .stat-label{font-size:9.5px;padding-right:24px}
  .stat-sub{font-size:11px;margin-top:6px}
  .stat-info{width:18px;height:18px;top:.5rem;right:.5rem}
  .stat-info svg{width:10px;height:10px}
  .nav-user span:not(.nav-badge){display:none}
  /* Tabelas — scroll horizontal suave */
  .tbl-wrap{border-radius:var(--rs);-webkit-overflow-scrolling:touch}
  table{font-size:12px}
  thead th{padding:.5rem .6rem;font-size:9px}
  tbody td{padding:.6rem .6rem}
  /* Botões menores */
  .btn-sm{padding:.35rem .7rem;font-size:12px}
  .btn-xs{padding:.2rem .5rem;font-size:11px}
  /* Filter pills */
  .filter-pills{gap:.3rem}
  .pill{padding:.25rem .7rem;font-size:11px}
  /* Sec header */
  .sec-hdr{gap:.4rem}
  .sec-title{font-size:1.1rem}
  /* Modal */
  .modal{max-width:100%!important;margin:.5rem}
  .mbody{padding:1rem}
  .mfooter{padding:.75rem 1rem;flex-wrap:wrap}
  /* WA modal */
  .wa-modal-inner{padding:1.25rem;margin:.5rem}
}

/* MAX 720 — Botão de instalar PWA fica icon-only */
@media(max-width:720px){
  .install-btn span{display:none}
  .install-btn{padding:.3rem .5rem;min-width:32px;justify-content:center}
}

/* MAX 640 — Gráficos do relatório (relat-grid) viram coluna única */
@media(max-width:640px){
  .relat-grid-a,.relat-grid-b{grid-template-columns:1fr!important}
  #chart-fluxo,#chart-proj,#chart-inad{max-height:180px}
  #chart-saude{max-height:140px}
  #chart-tipo{max-height:110px!important;max-width:110px!important}
}

/* MIN 769 — Bottom nav volta pra sidebar no desktop */
@media(min-width:769px){
  body.bottom-nav-mode .sidebar{display:flex!important}
  body.bottom-nav-mode #bottom-nav{display:none!important}
}

/* MAX 640 — Colunas mobile em tabelas */
@media(max-width:640px){
  .hide-mobile{display:none!important}
  /* Juros e Total também ficam menores */
  #th-sort-juros,#th-sort-total{display:none!important}
  .hide-mobile-juros{display:none!important}
}

/* MAX 640 — Perfil em coluna única */
@media(max-width:640px){.perfil-grid{grid-template-columns:1fr!important}.meu-plano-grid{grid-template-columns:1fr!important;gap:1rem!important}}


/* ── MEU PERFIL — layout desktop (sem scroll) ───────────────── */
@media (min-width: 1024px) {
  /* Card Meu Plano ocupa toda a largura disponível */
  .perfil-top-card { max-width: none; }

  /* Os 3 cards centrais (Foto · Dados · Senha) ficam lado a lado */
  .perfil-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    max-width: none !important;
  }

  /* Preferências + Backup lado a lado */
  .perfil-bottom-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
}

@media (min-width: 1280px) {
  .perfil-grid { gap: 1.5rem !important; }
  .perfil-bottom-grid { gap: 1.5rem !important; }
}

/* PRINT — esconde navegação/botões */
@media print{
  .nav,.sidebar,.sb-overlay,.filter-pills,.btn,button,.mbd,.toast{display:none!important}
  .app-body{display:block!important}
  .content{padding:0!important}
  body,html{background:#fff!important}
  .stat,.card{box-shadow:none!important;border:1px solid #ddd!important}
}

/* MAX 400 — Plano de renovação 1 coluna */
@media(max-width:400px){.renov-plan-grid{grid-template-columns:1fr}}

/* MAX 480 — Nav mobile ajustes */
@media(max-width:480px){
  .nav-badge{max-width:110px;font-size:10px;padding:2px 7px}
  .nav-right{gap:.4rem}
  .logout-btn{display:none}
}

/* MAX 360 — Esconder botões dark/search */
@media(max-width:360px){
  .dark-btn,.search-nav-btn{display:none}
}

/* UX-03: Touch targets mínimos em mobile (v2.6.0)
   Apple HIG + Material Design recomendam 44px mínimo */
@media (max-width: 480px) {
  .btn-xs {
    min-height: 36px;
    min-width: 36px;
    padding: .35rem .6rem;
    font-size: 12px;
  }
  .btn-sm {
    min-height: 38px;
    padding: .45rem .85rem;
  }
  /* Botões de ação nos cards */
  .mclose {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP ENHANCEMENTS — credor + admin (todas as telas ≥ 1024px)
   Mobile NÃO é afetado — tudo dentro de min-width
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── STATS (dashboard 4 cards) ──────────────────────────────── */
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
  }
  .stat { padding: 1.4rem 1.6rem; }
  .stat-value { font-size: 2.1rem; }
  .stat-label { font-size: 11px; margin-bottom: 12px; }
  .stat-sub   { font-size: 12.5px; margin-top: 12px; }

  /* ── TÍTULOS DE SEÇÃO ───────────────────────────────────────── */
  .sec-title { font-size: 1.6rem; }

  /* ── DASH-GRID (últimos empréstimos + parcelas em atraso) ───── */
  .dash-grid {
    grid-template-columns: 1.5fr 1fr !important;
    gap: 1.25rem !important;
  }

  /* ── TABELA DE EMPRÉSTIMOS ──────────────────────────────────── */
  .tbl-wrap { border-radius: var(--r); }
  table { font-size: 13.5px; }
  thead th {
    padding: .75rem 1rem;
    font-size: 10.5px;
    letter-spacing: .1em;
  }
  tbody td { padding: .85rem 1rem; }

  /* ── MODAL DE EMPRÉSTIMO — mantém 2 colunas, gap maior ─────── */
  .fgrid { gap: 1.1rem; }

  /* ── CARD GENÉRICO ──────────────────────────────────────────── */
  .card { padding: 1.75rem; }
  .card-title { font-size: 1.3rem; }

  /* ── SIMULADOR — mais colunas ──────────────────────────────── */
  .sim-grid { gap: .65rem; }
  .sim-cell, .sim-header { font-size: 13px; padding: .65rem; }
}

@media (min-width: 1280px) {

  /* ── STATS: cards mais generosos ────────────────────────────── */
  .stat { padding: 1.6rem 1.75rem; }
  .stat-value { font-size: 2.25rem; }

  /* ── MODAL fgrid: gap maior em desktop ──────────────────────── */
  .fgrid { gap: 1.25rem; }

  /* ── TABELA ─────────────────────────────────────────────────── */
  table { font-size: 14px; }
  thead th { padding: .8rem 1.1rem; }
  tbody td  { padding: .9rem 1.1rem; }

  /* ── SEÇÃO HEADER mais respiro ──────────────────────────────── */
  .sec-hdr { margin-bottom: 1.25rem; }
}

@media (min-width: 1440px) {

  /* ── STATS: máximo espaço ────────────────────────────────────── */
  .stats { gap: 1.5rem; }
  .stat { padding: 1.75rem 2rem; }
  .stat-value { font-size: 2.4rem; }
  .stat-label { font-size: 11.5px; }
  .stat-sub   { font-size: 13px; }

  /* ── DASH-GRID: proporção mais generosa ─────────────────────── */
  .dash-grid { grid-template-columns: 1.6fr 1fr !important; }

  /* ── CARD ───────────────────────────────────────────────────── */
  .card { padding: 2rem; }
  .card-title { font-size: 1.4rem; }
}

/* ── FILTROS DE EMPRÉSTIMOS em linha única ≥ 1024px ─────────── */
@media (min-width: 1024px) {
  .filter-pills { flex-wrap: nowrap; gap: .5rem; }
  .pill { white-space: nowrap; }
}

/* ── SEÇÃO DE RELATÓRIOS — gráficos 2 colunas ≥ 1024px ──────── */
@media (min-width: 1024px) {
  .relat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}
@media (min-width: 1440px) {
  .relat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ── INADIMPLÊNCIA — grid de análise responsivo ─────────────── */
@media (max-width: 640px) {
  .inad-analysis-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Visível apenas no mobile — complementa .hide-mobile */
.show-mobile-only { display: none; }
@media (max-width: 640px) {
  .show-mobile-only { display: flex !important; }
}