/* Janelas adaptáveis para computador, tablet e celular */
dialog {
  max-height: calc(100dvh - 28px);
  overflow: hidden;
}

dialog form {
  max-height: calc(100dvh - 28px);
  padding: 26px;
  overflow: auto;
  overscroll-behavior: contain;
}

#review-dialog {
  width: min(760px, calc(100% - 28px));
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  min-width: 0;
}

@media (max-width: 780px) {
  dialog,
  #review-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  dialog form {
    max-height: calc(100dvh - 20px);
    padding: 20px;
  }

  .dialog-header {
    margin-bottom: 18px;
  }

  .dialog-header h2 {
    font-size: 20px;
  }

  .review-purchase-summary {
    margin-bottom: 16px;
  }

  .dialog-actions {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin: 20px -20px -20px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
  }

  .dialog-actions button {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  dialog,
  #review-dialog {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }

  dialog form {
    max-height: 100dvh;
    padding: 18px 16px;
  }

  .dialog-actions {
    bottom: -18px;
    grid-template-columns: 1fr 1.35fr;
    display: grid;
    margin: 18px -16px -18px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .dialog-actions button {
    width: 100%;
    padding-inline: 10px;
  }

  .learn-rule {
    align-items: flex-start;
  }

  .review-purchase-summary {
    padding: 12px;
  }
}

/* Rede de segurança geral: nenhuma tela (PC ou celular) deve rolar na horizontal.
   As tabelas continuam roláveis dentro do próprio .table-wrap, então isso não some com nada. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas { max-width: 100%; height: auto; }


@media (max-width: 780px) {
  /* Etapa 3.15 — a Visão geral (primeira tela) ficava com tudo grande demais no celular. */
  .kpi.featured strong { font-size: 24px; }
  .kpi strong { font-size: 17px; }
  .kpi p { font-size: 11px; }
  .kpi small { font-size: 9px; }
  .hero-row h2, .view-heading h2 { font-size: 20px; }
  .hero-row p, .view-heading p { font-size: 12px; }
  .panel-header h3 { font-size: 13px; }
  .panel-header p { font-size: 10px; }
  .bar-row { font-size: 10px; }
  .upcoming strong { font-size: 11px; }
  .upcoming small { font-size: 9px; }
  .eyebrow { font-size: 9px; }
}

@media (max-width: 480px) {
  .kpi.featured strong { font-size: 21px; }
  .kpi strong { font-size: 15px; }
  .hero-row h2, .view-heading h2 { font-size: 18px; }
  .credit-card-number { font-size: 12px; }
}

/* A barra lateral é fixa (topo a base da tela); em janelas mais baixas ou com menos espaço
   vertical, o conteúdo (perfil, botão de sair) ficava cortado sem rolar. */
.sidebar { overflow-y: auto; }