/*
  Armax Tour - estilos globales (responsive)
  - Se agrega sin modificar páginas.
  - Se apoya en Bootstrap 5 ya cargado en includes/header.php.
  - Objetivo: que todo sea usable en tablets y teléfonos sin romper el layout de escritorio.
*/

:root{
  /* Paleta base (compat con estilos embebidos) */
  --arx-bg:#0b1020;
  --arx-card:#0f1730;
  --arx-text:#e9eefc;
  --arx-muted:#9aa7c7;
  --arx-line:rgba(22,255,255,.10);
  --arx-accent:#4ad9ff;
  --arx-radius:18px;
}

/* --- Ajustes generales (no invasivos) --- */
html{ -webkit-text-size-adjust:100%; }

/* Evita que el navbar fixed tape contenido (especialmente en mobile) */
body{ padding-top: 74px; }

/* Imágenes y media fluidos */
img, video, canvas, svg{ max-width:100%; height:auto; }

/* Formularios: evita zoom en iOS y mejora tacto */
input, select, textarea{ font-size: 16px; }

/* Mejor lectura en pantallas chicas */
@media (max-width: 992px){
  body{ padding-top: 70px; }
  header h1{ margin-top: 18px !important; }
}

@media (max-width: 576px){
  body{ padding-top: 66px; }
  header h1{ margin-top: 14px !important; }
}

/* --- Tablas: scroll horizontal en pantallas chicas --- */
@media (max-width: 768px){
  table{ max-width: 100%; }

  /* Si la tabla ya es .table de Bootstrap, hacemos que sea scrolleable */
  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 12px;
  }

  /* Si la tabla NO tiene .table, igual la hacemos usable */
  table:not(.table){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Reduce padding de celdas para que entre más info */
  .table > :not(caption) > * > *{ padding: .45rem .55rem; }
}

/* --- Modales / contenedores: evitar que se vayan de ancho --- */
@media (max-width: 576px){
  .modal-dialog{ margin: .75rem; }
  .container, .container-fluid{ padding-left: 12px; padding-right: 12px; }
}

/* --- Botones: mejor toque en móvil (sin forzar w-100 a todo) --- */
.btn{ min-height: 40px; }
@media (max-width: 576px){
  /* En grupos de acciones típicos, apila */
  .d-flex.gap-2, .d-flex.gap-3{ flex-wrap: wrap; }
  .d-flex.gap-2 > .btn,
  .d-flex.gap-3 > .btn{ flex: 1 1 160px; }
}

/* --- Cards y bloques "glass": suaviza en mobile --- */
@media (max-width: 768px){
  .card{ border-radius: 16px; }
}

/* --- Layout de asientos / bus: permitir scroll horizontal en mobile --- */
@media (max-width: 768px){
  /* Estos selectores aparecen en crear_reservas.php */
  .bus-frame{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .bus-grid{
    /* Evita que se "apriete" demasiado el plano */
    min-width: 520px;
  }
}

/* --- Inputs y selects: contraste y consistencia sobre fondos oscuros --- */
select, option, optgroup{
  color: inherit;
}

/* Muchos componentes tienen fondos oscuros: mejora lectura en selects */
@media (prefers-color-scheme: dark){
  select, textarea, input{
    color: var(--arx-text);
  }
}

/* --- Utilidades opcionales (si querés usarlas más adelante) --- */
/*
  Agregá la clase "arx-stack-sm" a un contenedor flex para apilar en mobile.
*/
@media (max-width: 576px){
  .arx-stack-sm{ flex-direction: column !important; align-items: stretch !important; }
  .arx-stack-sm > *{ width: 100% !important; }
}

/*
  Agregá "arx-nowrap" donde no quieras cortes de línea.
*/
.arx-nowrap{ white-space: nowrap; }