/* Rota Mogiana — ajustes para telas pequenas.
   Os componentes usam estilos inline, por isso os overrides precisam de !important. */
@media (max-width: 720px) {
  /* Ritmo vertical mais compacto nas seções longas */
  .rm-sec { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Quebras de linha manuais dos títulos são pensadas para desktop;
     no mobile o texto flui melhor sem elas */
  h1 br, h2 br { display: none; }

  /* Header: some o texto institucional, mantém só o SOS */
  .rm-util-label { display: none !important; }
  .rm-util-bar { justify-content: flex-end !important; }

  /* Hero da home mais enxuto */
  .rm-hero { padding-top: 52px !important; padding-bottom: 64px !important; }

  /* Tabela de condições vira cards empilhados */
  .rm-tbl-head { display: none !important; }
  .rm-tbl-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "sp status" "trecho trecho" "km km" !important;
    gap: 3px 12px !important;
    padding: 15px 18px !important;
  }
  .rm-c-sp { grid-area: sp; }
  .rm-c-status { grid-area: status; justify-self: end; }
  .rm-c-trecho { grid-area: trecho; }
  .rm-c-km { grid-area: km; }

  /* Números do sistema em duas colunas */
  .rm-stats { grid-template-columns: 1fr 1fr !important; }

  /* Grades de cards pequenos em 2 colunas (tarifas etc.) */
  .rm-2up { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* Botão de telefone do SOS: rótulo acima do número, largura total */
  .rm-sos-tel { flex-direction: column !important; gap: 2px !important; width: 100%; justify-content: center; text-align: center; }

  /* Mapa esquemático: escala legível com rolagem horizontal */
  .rm-map { overflow-x: auto !important; justify-content: flex-start !important; }
  .rm-map svg { min-width: 470px; }
  .rm-map-hint { left: 12px !important; right: 12px !important; bottom: 12px !important; }

  /* Cabeçalho do simulador: ícone acima do título */
  .rm-sim-head { flex-direction: column !important; align-items: flex-start !important; }

  /* Footer: colunas de links lado a lado em vez de uma lista comprida */
  .rm-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; }

  /* Footer: informações legais e redes sociais em coluna no mobile */
  .rm-foot-bottom { flex-direction: column !important; gap: 24px !important; }
  .rm-foot-bottom > div:first-child { max-width: 100% !important; }
  .rm-foot-bottom > div:last-child { width: 100%; justify-content: flex-start !important; }

  /* Botão de inverter origem/destino centralizado e na vertical */
  .rm-invert { margin: 0 auto !important; transform: rotate(90deg); }

  /* Linhas de formulário com 2 colunas empilham */
  .rm-2col { grid-template-columns: 1fr !important; }

  /* Fonte ≥16px em campos evita o zoom automático do iOS */
  select { font-size: 16px !important; }
}