/* ==========================================================================
   ANA MANACORDA — Responsividade
   O projeto é escrito mobile-first: os arquivos anteriores descrevem a
   experiência em smartphone. Aqui a interface é reorganizada — nunca
   apenas ampliada — para tablet e desktop.

   Pontos de quebra
   600px  · smartphone grande / tablet retrato
   900px  · tablet paisagem (navegação superior assume o lugar da inferior)
   1024px · desktop (barra lateral administrativa fixa)
   1280px · desktop amplo
   ========================================================================== */

/* ==========================================================================
   1. ÁREA DO CLIENTE
   ========================================================================== */

@media (min-width: 600px) {
  .app__main {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Com mais largura a cartela cabe em uma única linha de dez carimbos. */
  .stamps { grid-template-columns: repeat(10, 1fr); gap: var(--space-2); }
  .stamp { max-width: 42px; }

  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .summary-grid > :last-child { grid-column: auto; }

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

  .loyalty-card { padding: var(--space-7) var(--space-6) var(--space-6); }
  .loyalty-card::after { font-size: 12rem; }

  .modal__panel { padding: var(--space-7); }
}

@media (min-width: 900px) {
  /* A navegação sobe para o cabeçalho e a barra inferior sai de cena. */
  .nav-desktop { display: block; }
  .nav-bottom { display: none; }

  .app__main { padding-bottom: var(--space-9); }

  .toast-region { bottom: var(--space-5); }

  .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    align-items: start;
    gap: var(--space-6);
  }

  /* O cartão é o elemento principal: acompanha a rolagem na coluna. */
  .hero-card { position: sticky; top: calc(72px + var(--space-5)); }

  .home-note { text-align: left; }

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

@media (min-width: 1280px) {
  .app__main { padding-top: var(--space-6); }
  .page-head__greeting { font-size: 3.1rem; }
  .loyalty-card { padding: var(--space-8) var(--space-7) var(--space-7); }
}

/* Telas muito estreitas: reduz respiros sem esconder conteúdo. */
@media (max-width: 359px) {
  .app__main { padding-left: var(--space-3); padding-right: var(--space-3); }
  /* Palavras longas de título (ex.: "Administradores") cabem em uma linha a
     320px em vez de quebrar no meio; hyphens fica como rede de segurança.
     Inclui os títulos com classe (specificity maior que o seletor de elemento). */
  h1,
  .admin-head__title,
  .page-head__title { font-size: 2rem; hyphens: auto; }
  .loyalty-card { padding: var(--space-5) var(--space-4); }
  .loyalty-card__count-value { font-size: var(--fs-2xl); }
  .stamps { gap: var(--space-2); }
  .nav-bottom__link { font-size: 0.625rem; }
}

/* ==========================================================================
   2. ÁREA ADMINISTRATIVA
   ========================================================================== */

@media (min-width: 600px) {
  .admin-main { padding-left: var(--space-5); padding-right: var(--space-5); }

  .admin-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  /* Busca ocupa o espaço livre; a ação principal fica à direita. */
  .toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

  .login__panel { padding: var(--space-7) var(--space-6); }
}

@media (min-width: 900px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }

  .admin-main { padding-top: var(--space-6); }

  .admin-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  /* Variante para telas com tabela larga (ex.: Administradores, 5 colunas).
     Entre 900 e 1279px a tabela ocupa a largura inteira: com o menu lateral
     ocupando espaco, duas colunas deixariam a tabela apertada. */
  .admin-split--wide { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  /* A barra lateral deixa de ser gaveta e passa a fazer parte do layout. */
  .admin {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  .admin-topbar { display: none; }

  .admin-sidebar {
    position: sticky;
    top: 0;
    left: auto;
    bottom: auto;
    height: 100vh;
    max-width: none;
    transform: none;
    box-shadow: none;
    align-self: start;
  }

  .admin-overlay { display: none; }

  .admin-main { padding: var(--space-7) var(--space-6) var(--space-8); }
}

@media (min-width: 1280px) {
  .admin-main { padding-left: var(--space-7); padding-right: var(--space-7); }
}

/* ==========================================================================
   3. TELAS DE CONTA E NOVOS BLOCOS
   ========================================================================== */

@media (min-width: 600px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .attention-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-field__grid { grid-template-columns: minmax(0, 1fr) 160px; align-items: end; }
  .visit-card { padding: var(--space-7) var(--space-6); }
  .celebration { padding: var(--space-8) var(--space-7) var(--space-7); }
}

@media (min-width: 900px) {
  .attention-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

  /* Conferência: código à esquerda, filas à direita. */
  .lookup-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .celebration__title { font-size: 2.75rem; }
}

/* ==========================================================================
   4. LANDING PÚBLICA
   ========================================================================== */

@media (min-width: 700px) {
  .landing__steps { grid-template-columns: repeat(3, 1fr); }
  .landing__main { padding-top: var(--space-9); }
}


/* Duas colunas na tela de Administradores somente a partir de 1440px: abaixo
   disso a tabela de 5 colunas ficaria apertada e precisaria rolar. */
@media (min-width: 1440px) {
  .admin-split--wide { grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); }
}