*,
*::before,
*::after {
  max-width: 100%;
}

html,
body {
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* Notebook (≤1024px) */
@media (max-width: 1024px) {
  .app-main,
  .x-main,
  .faq-main,
  .n-main,
  .p-main,
  .pw-main {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Garante que os cards de detalhes fiquem em 2 colunas no notebook/tablet */
  .detail-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Melhor aproveitamento do espaço nos filtros de histórico */
  .history-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet (≤768px) */
@media (max-width: 768px) {
  .content,
  .login-content,
  .forgot-content {
    width: 100%;
  }

  .actions,
  .form-actions {
    grid-template-columns: 1fr;
  }

  .history-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .history-pagination {
    width: 100%;
    justify-content: flex-end;
  }

  .tx-item .content {
    grid-template-columns: 28px 1fr;
    row-gap: 6px;
  }

  .tx-item .amount {
    grid-column: 2 / -1;
    justify-items: start;
  }

  .chart-subtitle {
    max-width: 100%;
  }

  .chart-wrap {
    padding: 10px;
  }

  .cta,
  .btn-primary,
  .btn-outline,
  .home-buy-btn {
    width: 100%;
  }

  /* Ajuste de tamanho dos modais em tablets */
  .modal-dialog {
    width: min(88vw, 520px);
  }

  /* Histórico de transações ocupa toda a largura */
  .history-filters {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .header-inner,
  .faq-header,
  .n-header,
  .p-header,
  .pw-header,
  .x-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .company-logo {
    width: 62px;
    height: 38px;
  }

  .balance-slide {
    min-width: 92vw;
  }

  .balance-card-content {
    grid-template-columns: 48px 1fr;
    gap: 10px;
  }

  .balance-icon {
    width: 48px;
    height: 48px;
  }

  .metric-value {
    font-size: 18px;
  }

  .history-filters {
    grid-template-columns: 1fr;
  }

  .modal-dialog,
  .modal-dialog.form {
    width: min(94vw, 520px);
    padding: 16px 12px;
  }

  .history-pagination {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .app-header,
  .hero,
  .app-main,
  .x-main,
  .faq-main,
  .n-main,
  .p-main,
  .pw-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .balance-card,
  .tx-item,
  .detail-card,
  .about,
  .chart-wrap,
  .recurring-card,
  .tr-recurring-card {
    border-radius: 12px;
  }

  .metric-value {
    font-size: 16px;
  }

  .amount .pc {
    font-size: 14px;
  }

  .amount .brl,
  .meta .when,
  .pager-info {
    font-size: 11px;
  }

  .filter-field select {
    height: 36px;
    font-size: 12px;
  }

  .bottom-nav {
    gap: 4px;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }

  .nav-item {
    font-size: 11px;
  }
}