/* ================================================
   responsivo.css — FlowTrain
   Ajustes de responsividade para tablet e celular
   ================================================ */

/* ================================================
   TABLET — até 1024px
   ================================================ */
@media (max-width: 1024px) {
  .content { padding: 1.5rem; }
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ================================================
   CELULAR GRANDE — até 768px
   ================================================ */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* AUTH */
  .auth-left { display: none; }
  .auth-right {
    width: 100%;
    padding: 2rem 1.25rem;
    min-height: 100vh;
    justify-content: flex-start;
    padding-top: 3rem;
  }
  .brand { font-size: 3rem; }
  .form-title { font-size: 1.8rem; }
  .role-selector { flex-direction: column; gap: 0.6rem; }

  /* TOPBAR */
  .topbar {
    padding: 0 1rem;
    height: 56px;
  }
  .topbar-left { gap: .5rem; }
  .topbar-brand { font-size: 1.4rem; }
  .topbar-user { gap: .5rem; }
  .user-info { display: none; }
  .user-badge { padding: 0.3rem; }
  .btn-sair {
    padding: 0.4rem 0.7rem;
    font-size: 0.78rem;
  }

  /* CONTENT */
  .content { padding: 1rem; }
  .section-title { font-size: 1.5rem; }

  /* STATS — 2 colunas no celular */
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .stat-card { padding: 1rem; }
  .stat-value { font-size: 2rem; }

  /* CARDS — 1 coluna */
  .cards-grid { grid-template-columns: 1fr; }

  /* FREQUÊNCIA — empilha os campos */
  .freq-row {
    flex-direction: column;
    align-items: stretch;
  }
  .freq-row select,
  .freq-row input[type="date"] {
    width: 100%;
    min-width: 0;
  }
  .btn-marcar { width: 100%; }

  /* TABELAS — scroll horizontal */
  .freq-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 480px; }

  /* MODAIS — ocupam quase tudo */
  .modal-box {
    width: 92%;
    padding: 1.5rem;
    max-height: 85vh;
  }
  .modal-title { font-size: 1.3rem; }

  /* CHAT — empilha lista de contatos e conversa */
  #content-area > div[style*="grid-template-columns:260px"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  /* BANNER TRIAL */
  #banner-trial {
    padding: 0.6rem 1rem !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  #banner-trial button { width: 100%; }

  /* PLANOS */
  .freq-box, [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================
   CELULAR PEQUENO — até 420px
   ================================================ */
@media (max-width: 420px) {
  .auth-right { padding: 1.5rem 1rem; }
  .brand { font-size: 2.5rem; }
  .form-title { font-size: 1.5rem; }

  .nav-tab { padding: 0.7rem 0.8rem; font-size: 0.75rem; }

  .stats-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .stat-card { padding: 0.8rem; }
  .stat-value { font-size: 1.6rem; }
  .stat-label { font-size: 0.68rem; }

  .section-title { font-size: 1.3rem; }
  .section-sub { font-size: 0.78rem; }

  .modal-box { padding: 1.25rem; }

  table { font-size: 0.78rem; }
  th, td { padding: 0.5rem 0.6rem; }
}

/* ================================================
   CHAT MOBILE — ajuste fino para conversa
   ================================================ */
@media (max-width: 768px) {
  .contato-avatar { width: 32px; height: 32px; font-size: 0.8rem; }
  .chat-msg-minha, .chat-msg-outro {
    max-width: 85%;
    font-size: 0.85rem;
  }
}

/* ================================================
   ORIENTAÇÃO PAISAGEM NO CELULAR
   ================================================ */
@media (max-width: 900px) and (orientation: landscape) {
  .auth-left { display: none; }
  .auth-right { padding: 1.5rem; }
}

/* ================================================
   TOUCH — aumenta área de toque em botões pequenos
   ================================================ */
@media (pointer: coarse) {
  .btn-cancelar, .btn-marcar, .btn-primary, .nav-tab,
  button { min-height: 40px; }

  input, select, textarea { min-height: 42px; }
}