/* ==========================================================
   Responsividade
   ≤ 1024px: sidebar vira gaveta
   ≤ 640px : navegação inferior, formulários em coluna única
   ========================================================== */
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed; z-index: 50; left: 0; top: 0; bottom: 0;
    width: min(var(--sidebar-w), 86vw);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease), visibility var(--dur);
    visibility: hidden;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: none; visibility: visible; }

  .app-header .menu-toggle { display: inline-grid; }
  .app-header { padding: 0 var(--sp-4); }
  .content { padding: var(--sp-6) var(--sp-4) var(--sp-10); }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { padding: var(--sp-6); min-height: auto; gap: var(--sp-6); }
  .auth-aside::before { display: none; }
  .auth-aside h2 { font-size: var(--fs-2xl); max-width: none; }
  .auth-aside small { display: none; }
}

@media (max-width: 640px) {
  .header-date { display: none; }
  .content { padding-bottom: calc(var(--bottomnav-h) + var(--sp-10) + env(safe-area-inset-bottom)); }

  h1 { font-size: var(--fs-xl); }
  .page-header { margin-bottom: var(--sp-6); }
  .page-header .btn { width: 100%; }

  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .panel, .welcome { padding: var(--sp-5); }
  .step { grid-template-columns: 36px minmax(0, 1fr); }
  .step .btn { grid-column: 1 / -1; }

  /* 16px evita o zoom automático do iOS ao focar em campos */
  .input, .select, .textarea { font-size: 16px; }

  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(12, 27, 48, .06);
  }
  .bottom-nav a, .bottom-nav button {
    display: grid; justify-items: center; gap: 2px;
    height: 100%; padding-top: var(--sp-2);
    font-size: 11px; font-weight: 500; color: var(--text-muted); text-decoration: none;
  }
  .bottom-nav [aria-current="page"] { color: var(--primary); font-weight: 700; }
  .bottom-nav .bottom-nav-add {
    width: 52px; height: 52px; margin: -18px auto 0; padding: 0;
    border-radius: 50%; place-items: center;
    background: var(--navy-800); color: #fff;
    box-shadow: var(--shadow-md);
  }
  .bottom-nav .bottom-nav-add .icon { width: 24px; height: 24px; }

  .toast-region { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--bottomnav-h) + var(--sp-3) + env(safe-area-inset-bottom)); width: auto; }
  .auth-body .toast-region { bottom: var(--sp-4); }

  .auth-main { padding: var(--sp-8) var(--sp-4); align-items: flex-start; }
  .auth-aside p { display: none; }
}

/* ---------- Etapa 4 ---------- */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .donut-layout { grid-template-columns: 140px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .kpi { padding: var(--sp-4); }
  .kpi-value { font-size: var(--fs-lg); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .donut-layout { grid-template-columns: minmax(0, 1fr); }
  .chart-box-donut { height: 180px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .page-actions { width: 100%; }
  .page-actions .btn, .period-select, .period-select > .select { flex: 1; }
  .stat-muted { margin-left: 0; text-align: left; }
  .category-row .row-actions { opacity: 1; }

  /* Tabela vira lista de cartões no celular */
  .table-wrap { background: transparent; border: 0; overflow: visible; }
  .tx-table thead { display: none; }
  .tx-table, .tx-table tbody { display: block; }
  .tx-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  .tx-table td { padding: 0; border: 0; }
  .tx-table .col-desc { grid-column: 1; grid-row: 1; min-width: 0; }
  .tx-table .col-amount { grid-column: 2; grid-row: 1; align-self: start; }
  .tx-table .col-date { grid-column: 1; grid-row: 2; width: auto; font-size: var(--fs-xs); }
  .tx-table .col-account { display: none; }
  .tx-table .col-status { grid-column: 2; grid-row: 2; justify-self: end; }
  .tx-table .col-actions { grid-column: 1 / -1; grid-row: 3; width: auto; border-top: 1px solid var(--border); margin-top: var(--sp-2); padding-top: var(--sp-1); }
  .row-actions { justify-content: flex-start; }
}

/* ---------- Etapa 5 ---------- */
@media (max-width: 900px) {
  .invoice-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .invoice-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-actions .btn { flex: 1; }
  .invoice .tx-line { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .invoice .tx-line .row-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* ---------- Etapa 6 ---------- */
@media (max-width: 640px) {
  .goal-grid { grid-template-columns: minmax(0, 1fr); }
  .goal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-actions .row-actions { margin-left: 0; width: 100%; }
  .budget-head { flex-wrap: wrap; }
  .budget-head .row-actions { margin-left: auto; }
}