/*
 * Minha Central — ajustes responsivos (tablet)
 * Os estilos do aplicativo continuam em style.css.
 * Este arquivo trata somente da adaptação de tamanhos intermediários.
 *
 * Faixas:
 * 560–759px: login centralizado em coluna.
 * 760–899px: login em duas colunas equilibradas.
 * 900px+: segue o layout desktop existente.
 */

/* Impede que conteúdo dentro de grids aumente a largura da página. */
.auth > *,
#workspace > *,
.settings-stack > *,
.routine-grid > * {
  min-width: 0;
}

/* Tablet pequeno ou janela de computador estreita: centraliza a entrada. */
@media (min-width: 560px) and (max-width: 759px) {
  #auth-screen.auth {
    width: min(100%, 650px);
    max-width: 650px;
    margin-inline: auto;
    padding: 36px 28px 86px;
    gap: 25px;
  }

  #auth-screen .auth-panel {
    width: 100%;
    max-width: none;
  }

  #auth-screen .hero h1 {
    font-size: clamp(2.05rem, 5.2vw, 2.7rem);
    max-width: 580px;
  }
}

/*
 * Tablet retrato: apresenta texto e formulário lado a lado.
 * Antes, o breakpoint desktop começava só em 900px e o formulário
 * ficava estreito à esquerda, sobrando quase metade da tela vazia.
 */
@media (min-width: 760px) and (max-width: 899px) {
  #auth-screen.auth {
    width: 100%;
    max-width: 1040px;
    min-height: calc(100dvh - 76px);
    margin: 0 auto;
    padding: clamp(30px, 5vh, 64px) clamp(24px, 4vw, 48px) 85px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3.8vw, 44px);
    align-items: center;
    align-content: center;
  }

  #auth-screen .hero h1 {
    font-size: clamp(2.05rem, 4.3vw, 2.75rem);
    max-width: none;
    line-height: 1.14;
    margin: 15px 0 18px;
  }

  #auth-screen .hero p {
    font-size: .91rem;
    line-height: 1.65;
  }

  #auth-screen .hero-pills {
    gap: 7px;
  }

  #auth-screen .hero-pills span {
    font-size: .7rem;
    padding: 7px 9px;
  }

  #auth-screen .auth-panel {
    width: 100%;
    max-width: none;
    padding: clamp(18px, 2.4vw, 25px);
    margin: 0;
  }
}

/* Conteúdo de tablets: mantém respiros sem deixar cards presos à esquerda. */
@media (min-width: 760px) and (max-width: 1099px) {
  #workspace {
    padding-inline: clamp(22px, 3.5vw, 40px);
  }

  #view-home .modules,
  #view-more .more-modules {
    width: 100%;
    max-width: 820px;
  }

  #view-more .more-modules > .modules {
    max-width: none;
  }

  #view-settings .settings-stack {
    gap: 16px;
  }
}

/* Evita comprimir cabeçalhos e botões da Academia em tablets estreitos. */
@media (min-width: 680px) and (max-width: 819px) {
  #view-training .section-header,
  #view-settings .section-header {
    flex-direction: column;
    align-items: stretch;
  }

  #view-training .section-actions {
    width: min(100%, 430px);
    min-width: 0;
  }
}

/* Controles e diálogos com toque confortável em tablets. */
@media (min-width: 760px) and (pointer: coarse) {
  .nav-btn,
  .module-card,
  .routine-controls button,
  .settings-link,
  .tab {
    min-height: 48px;
  }

  .dialog {
    width: min(calc(100vw - 56px), 590px);
  }
}