/* mobile.css — ajustes responsivos para celular (PWA) */

/* Em telas pequenas, o menu lateral vira uma barra inferior fixa */
@media (max-width: 720px) {
  .layout { flex-direction: column; }

  .sidebar {
    position: fixed; bottom: 0; left: 0; top: auto;
    width: 100%; height: auto; flex-direction: row;
    border-top: 1px solid #1e293b; z-index: 1000;
    overflow-x: auto; overflow-y: hidden;
  }
  .sidebar-logo { display: none; }
  .sidebar-rodape {
    border-top: none; border-left: 1px solid #1e293b;
    padding: 8px 12px; display: flex; align-items: center; white-space: nowrap;
  }
  .sidebar-rodape .quem { display: none; }
  .sidebar-nav {
    display: flex; flex-direction: row; padding: 0; flex: 1;
  }
  .sidebar-nav a {
    flex-direction: column; gap: 2px; padding: 8px 12px; font-size: 10px;
    border-left: none; border-top: 3px solid transparent; text-align: center;
    white-space: nowrap; min-width: 64px; justify-content: center;
  }
  .sidebar-nav a.ativo { border-left: none; border-top-color: #3b82f6; }
  .sidebar-nav .ico { font-size: 18px; }
  .sidebar-nav a span.txt { display: block; font-size: 9px; }

  /* O conteúdo não fica mais à direita do menu, e ganha espaço embaixo p/ a barra */
  .conteudo { margin-left: 0 !important; padding-bottom: 70px; }
  .wrap { padding: 12px !important; }

  /* Tabelas largas viram scroll horizontal */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Cards e grids se ajustam a 1 coluna */
  .cards-grid, .if-list-grid, .lista-conc { grid-template-columns: 1fr !important; }

  /* Títulos e fontes um pouco menores */
  h1 { font-size: 18px !important; }

  /* Abas roláveis */
  .abas-topo, .tabs { overflow-x: auto; }

  /* Modais ocupam quase a tela toda */
  #modalSwitch > div, #modalConsole > div, #modalRota > div { max-width: 100% !important; }
}

/* Inputs maiores no touch (evita zoom no iOS com fonte < 16px) */
@media (max-width: 720px) {
  input, select, button { font-size: 16px !important; }
}