/* Fase 2 — layout responsivo (mobile-first; coluna centralizada em telas largas) */

@media (min-width: 600px) {
  .app-main {
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  }

  .turn-chip-name {
    max-width: clamp(7rem, 16vw, 10rem);
  }

  .onboarding-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-md);
  }
}

@media (min-width: 900px) {
  .app-main {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 360px) {
  .mesa-toolbar-nav .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
  }

  .carta-dia-actions .btn-primary,
  .carta-dia-actions .btn-secondary:not(.btn-icon-action) {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .turn-roster {
    justify-content: flex-start;
  }
}