/* ==========================================================
   RESPONSIVIDADE GLOBAL - ROTA
   Ajustes adicionados para melhorar o uso em celulares.
   Mantém o funcionamento original e corrige larguras fixas.
   ========================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
}

img, video, canvas, svg, iframe {
  max-width: 100%;
}

img, video {
  height: auto;
}

input, select, textarea, button {
  max-width: 100%;
  font-size: 16px;
}

button,
input[type="submit"],
input[type="button"],
.btn,
.button {
  touch-action: manipulation;
}

/* Evita que textos, emails, rotas e URLs estourem a largura da tela */
p, span, div, td, th, a, label, strong, small, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
}

/* Tabelas: no celular, rolam horizontalmente em vez de quebrar layout */
.table-wrap,
.table-responsive,
.responsive-table,
.tabela-wrapper,
.lista-wrapper,
.relatorio-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

table:not(.no-responsive-table) {
  border-collapse: collapse;
}

@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  header {
    padding: 14px 12px !important;
    text-align: center !important;
  }

  header .logo,
  .logo {
    max-width: min(180px, 70vw) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-title,
  header h1,
  h1 {
    font-size: clamp(1.25rem, 5.2vw, 2rem) !important;
    line-height: 1.18 !important;
  }

  h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.55rem) !important;
  }

  h3 {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }

  nav {
    width: 100% !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  nav a {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .nav-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  main,
  section,
  article,
  .container,
  .content,
  .card,
  .box,
  .panel,
  .wrapper,
  .form-container,
  .login-container {
    max-width: 100% !important;
  }

  .container,
  .content,
  .card,
  .box,
  .panel,
  .form-container,
  .login-container {
    width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: min(16px, 4vw) !important;
    padding-right: min(16px, 4vw) !important;
  }

  .row,
  .grid,
  .cards,
  .dashboard,
  .form-row,
  .input-row,
  .controls-row,
  .button-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .row > *,
  .grid > *,
  .cards > *,
  .dashboard > *,
  .form-row > *,
  .input-row > *,
  .controls-row > *,
  .button-row > * {
    min-width: 0 !important;
  }

  form {
    width: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
  }

  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .button {
    min-height: 42px;
  }

  iframe {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .container,
  .content,
  .card,
  .box,
  .panel,
  .form-container,
  .login-container {
    width: calc(100% - 14px) !important;
    margin-top: 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .actions,
  .botoes,
  .buttons,
  .control-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .actions button,
  .botoes button,
  .buttons button,
  .control-actions button,
  .actions .btn,
  .botoes .btn,
  .buttons .btn {
    width: 100% !important;
  }

  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th, td {
    white-space: normal !important;
    font-size: 0.92rem;
  }

  footer {
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Telas de mapa: deixa o painel de controles usável em celular */
@media (max-width: 768px) {
  #map {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  #controls {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(58dvh, 440px) !important;
    overflow-y: auto !important;
    padding: 10px !important;
    border-radius: 12px !important;
    z-index: 10 !important;
  }

  #controls .control-group {
    margin-bottom: 8px !important;
  }

  #controls label {
    font-size: 12px !important;
  }

  #controls input,
  #controls select,
  #controls textarea {
    width: 100% !important;
    min-height: 40px !important;
  }

  #controls button {
    flex: 1 1 130px !important;
    min-height: 40px !important;
  }

  #route-info,
  #last-stop-info,
  #band-info,
  #bonus-info,
  #calc-info {
    font-size: 12px !important;
  }

  .mapboxgl-ctrl-top-left,
  .mapboxgl-ctrl-top-right,
  .radar-ctrl-top-left,
  .radar-ctrl-top-right {
    top: auto !important;
    bottom: 10px !important;
  }
}

@media (max-width: 420px) {
  #controls {
    max-height: 52dvh !important;
    font-size: 13px !important;
  }

  #controls button {
    flex-basis: 100% !important;
  }
}