/* =============================================================================
   REFORÇO DE RESPONSIVIDADE MOBILE — complementa sistema.css e melhorias-offline.css
   Carregado por último para poder sobrepor regras quando necessário.
   ============================================================================= */

@media (max-width: 760px) {
  html{font-size:13px}
  #main-content{padding:14px}

  /* Grids de estatísticas/dashboard viram 2 colunas, depois 1 no celular pequeno */
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}

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

  /* Formulários empilham em vez de ficar lado a lado */
  .form-row{flex-direction:column;gap:0}

  /* Modais ocupam quase a tela toda, sem sobrar espaço nas laterais */
  .modal{width:96%;padding:18px;max-height:94vh}
  .modal-lg{max-width:96%}

  /* Botões de rodapé de modal quebram linha em vez de espremer */
  .modal-footer{flex-wrap:wrap}
  .modal-footer .btn{flex:1 1 auto;justify-content:center}

  .panel-title{font-size:1.35rem}

  /* Bracket de mata-mata: permite rolagem horizontal suave em vez de espremer */
  .bracket{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .bracket-round{min-width:190px}
}

@media (max-width: 480px) {
  .grid-4{grid-template-columns:1fr 1fr}
  .mesa-grid{grid-template-columns:1fr 1fr}
  .stat-box .val{font-size:1.9rem}
  .btn{padding:8px 12px;font-size:0.7rem}
  .modal{padding:14px}
}

/* Área tocável mínima recomendada em botões/itens de lista no touch */
@media (pointer: coarse) {
  .nav-btn,.sidebar-item,.tab-btn,.btn{min-height:40px}
  input,select,textarea{font-size:16px} /* evita zoom automático do iOS ao focar campo */
}