/* ============================================================
   movil.css — ajustes para celular de todas las secciones
   ============================================================
   Se carga después de los estilos de cada página, así que lo que
   está acá tiene la última palabra. Todo va dentro de la consulta
   de pantalla chica: en la computadora no cambia nada.

   Se incluye con:  <link rel="stylesheet" href="movil.css">
   ============================================================ */

@media (max-width: 760px) {

  /* ---------- Base ---------- */
  body { padding-left: 0; padding-right: 0; }
  h1 { font-size: 26px !important; line-height: 1.15; }
  h2 { font-size: 19px !important; }

  /* Los contenedores de cada sección, a todo el ancho */
  .wrap, .cont-inner, .wrap-contenido { padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; }
  .caja, .card, #tablero, form#buscador, .barra-filtros, .nota { max-width: 100% !important; }
  .caja, .card { padding: 16px 14px !important; border-radius: 12px; }

  /* ---------- Menú lateral: se pliega ---------- */
  .sb-cab { display: flex; align-items: center; gap: 10px; width: 100%; }
  .sb-toggle { display: flex !important; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0; background: transparent; cursor: pointer;
    border: 1px solid var(--linea, #1f2f4a); border-radius: 9px;
    color: var(--nieve, #eef3f8); font-size: 20px; line-height: 1; }
  .sb-cab .sb-logo { flex: 1; min-width: 0; }
  .sb-contador-top { display: none; background: var(--rojo, #ff6b6b); color: #fff; font-size: 12px;
    min-width: 24px; height: 24px; border-radius: 12px; padding: 0 7px;
    align-items: center; justify-content: center; flex-shrink: 0; }

  /* plegado por defecto; se abre con la clase "abierto" */
  .sidebar-menu .sb-nav, .sidebar-menu .sb-acciones,
  .sidebar-menu .sb-user { display: none !important; }
  .sidebar-menu.abierto .sb-nav { display: flex !important; }
  .sidebar-menu.abierto .sb-acciones { display: flex !important; }

  /* ---------- Buscador ---------- */
  form#buscador { grid-template-columns: 1fr !important; gap: 10px; margin-top: 16px; }
  /* origen y destino apilados, con la flecha centrada en el medio */
  .grupo-od { flex-direction: column; align-items: stretch; gap: 8px; }
  .col-ciudad { width: 100%; }
  .campo-ciudad.izq input, .campo-ciudad.der input { border-radius: 8px !important; border: 1px solid var(--linea) !important; }
  #buscador #btn-invertir { width: 42px !important; min-width: 42px; max-width: 42px; height: 34px;
    align-self: center !important; border-radius: 9px !important; }
  #buscador #btn-invertir::before { content: ''; }
  #buscador button[type=submit], #buscador #btn { padding: 15px !important; font-size: 17px; }

  /* últimas búsquedas */
  #ultimas { margin-top: 12px; }
  #ultimas .ub { font-size: 13px; padding: 7px 12px; }

  /* filtros de orden: se deslizan de costado */
  #filtros { overflow-x: auto; padding-bottom: 6px; }
  #filtros > * { flex-shrink: 0; }

  /* ---------- Resultados ---------- */
  .cabecera-tablero { display: none !important; }
  .fila { display: block !important; padding: 12px 14px !important; }
  .fila .hora { font-size: 20px; }
  .fila .llegada { color: var(--gris); font-size: 13px; }
  .fila > div + div { margin-top: 6px; }
  .fila .btn-reservar { width: 100% !important; padding: 12px !important; font-size: 15px; margin-top: 8px; }
  .fila .precio { font-size: 18px; }

  /* vista agrupada */
  #filas.agrupado { padding: 12px !important; }
  .grupo-cab { grid-template-columns: 70px 1fr !important; gap: 8px !important; padding: 11px 12px !important; }
  .grupo-cab .llegada { display: none; }
  .grupo-cuerpo { padding: 12px !important; }
  .calidades { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  .calidad { padding: 8px 9px !important; }
  .cal-nombre { font-size: 12px; }
  .cal-precio { font-size: 14px; }
  .grupo-pie { text-align: center; }
  .grupo-pie .btn-grupo { width: 100% !important; padding: 13px !important; }

  /* viajes con escala */
  .combi-cab { padding: 11px 12px !important; }
  .combi-cuerpo { padding: 12px !important; }
  .combi-horas { font-size: 17px; }
  .combi-espera { font-size: 14px !important; }
  .combi-pie .btn-combi { width: 100% !important; padding: 13px !important; }

  /* ---------- Mapa de butacas ---------- */
  .modal-caja, #modal > div { max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; min-height: 100vh; }
  .micro { padding: 10px !important; gap: 5px !important; }
  .fila-bus { gap: 5px !important; }
  .asiento { width: 30px !important; height: 30px !important; font-size: 10px !important; }
  .hueco { width: 30px !important; height: 30px !important; }
  .leyenda-cat { gap: 6px; }
  .leyenda-cat .lc { font-size: 11px; padding: 5px 9px; }

  /* emergente del pasajero */
  .pop-caja { padding: 16px 14px !important; border-radius: 12px; }
  .fila2 { grid-template-columns: 1fr !important; }
  .pop-dni-fila { flex-direction: column; }
  .btn-buscar-dni { width: 100%; padding: 12px 0 !important; }

  /* resumen de pasajeros */
  .pax-pill { font-size: 12px; }
  .pax-barra { flex-direction: column; align-items: stretch; gap: 10px; }
  .pax-acciones { flex-direction: column; align-items: stretch; }
  .pax-barra .btn-enviar { width: 100% !important; }

  /* ---------- Tablas (panel, usuarios, diagnóstico, logos) ---------- */
  /* se deslizan de costado en vez de romper el ancho */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: 9px 8px !important; }

  /* ---------- Panel de reservas ---------- */
  .barra-filtros { flex-direction: column; align-items: stretch; gap: 12px; }
  .barra-filtros .grupo { width: 100%; }
  .barra-filtros select { min-width: 0 !important; width: 100%; }
  .card-top { flex-direction: column; align-items: flex-start; }
  .datos { grid-template-columns: 1fr 1fr !important; gap: 8px 14px !important; font-size: 12px !important; }
  .acciones { flex-direction: column; align-items: stretch; }
  .acciones .btn { width: 100%; text-align: center; }
  .adjuntar { flex-direction: column; align-items: stretch; gap: 10px; }
  .adjuntar .btn-subir { width: 100%; }

  /* ---------- Configuración ---------- */
  .fila-toggle { gap: 12px; }
  .item select, .item input[type=text], .item input[type=number] { width: 100% !important; max-width: 100% !important; }
  .ejemplos { grid-template-columns: 1fr !important; }
  .opciones { width: 100%; }
  .opciones label { flex: 1; text-align: center; }
  .acciones .btn-guardar, .btn-guardar { width: 100%; }

  /* ---------- Combinaciones y Diagnóstico ---------- */
  form.linea { flex-direction: column; align-items: stretch; gap: 10px; }
  form.linea .campo { min-width: 0 !important; width: 100%; }
  form.linea .btn, form.linea button { width: 100%; }
  .rdo { grid-template-columns: 1fr !important; }
  .check { padding-bottom: 0; }

  /* ---------- Logos de empresas ---------- */
  .emp { flex-direction: column; align-items: stretch; gap: 10px; }
  .emp .marca { width: 100%; height: 70px; }
  .subir { flex-direction: column; align-items: stretch; }
  .subir input[type=file] { max-width: 100% !important; }
  .subir .btn, .emp .btn { width: 100%; }

  /* ---------- Usuarios ---------- */
  .permisos { flex-direction: column; }
  .perm-check { width: 100%; }

  /* ---------- Mis pedidos ---------- */
  .card.gestionada, .card.en_proceso, .card.agotado { border-width: 1px; }
  .card-top > div:last-child { width: 100%; justify-content: space-between; }

  /* ---------- Logo ---------- */
  .marca-logo { margin: 12px 0 4px; }
  .marca-logo img { height: 40px; }
  .sb-cab .sb-logo img { max-width: 120px !important; }
  .logo-login img { max-width: 220px; }

  /* ---------- Login ---------- */
  .caja input, .caja button { font-size: 16px; }   /* 16px evita el zoom automático de iOS */

  /* Todos los campos a 16px, para que el celular no haga zoom al tocarlos */
  input[type=text], input[type=password], input[type=date], input[type=number], select, textarea { font-size: 16px !important; }
}

/* Pantallas muy chicas */
@media (max-width: 380px) {
  .calidades { grid-template-columns: 1fr !important; }
  .datos { grid-template-columns: 1fr !important; }
  .asiento { width: 27px !important; height: 27px !important; }
  .hueco { width: 27px !important; height: 27px !important; }
}

/* ============================================================
   CELULAR — el logo y el encabezado
   Va al final para tener la última palabra sobre tema.css
   ============================================================ */
@media (max-width: 760px) {
  .sidebar-menu { padding: 8px 12px !important; }
  .sb-cab { display: flex !important; align-items: center; gap: 10px; width: 100%; }
  .sb-cab .sb-logo { flex: 1; min-width: 0; padding: 0 !important; }
  .sb-logo img,
  .sidebar-menu .sb-logo img,
  .sb-cab .sb-logo img,
  picture img[alt="AerobusHotel.com"] {
    height: 26px !important;
    max-width: 130px !important;
    width: auto !important;
  }
  .sb-toggle { width: 38px; height: 38px; font-size: 18px; }
  .marca-logo img { height: 30px !important; }
}

@media (max-width: 760px) {
  h1.saludo { font-size: 30px !important; }
  .pregunta { font-size: 19px !important; }
  .dia-chip { min-width: 82px !important; padding: 10px 8px !important; }
  .dia-sem { font-size: 12px !important; }
  .dia-num { font-size: 17px !important; }
}

@media (max-width: 760px) {
  /* En celular el menú está plegado: el contador va arriba, a la vista */
  .sb-contador-top { display: inline-flex !important; }
}

@media (max-width: 760px) {
  /* Cabecera del viaje en celular: la ruta va abajo, no al lado de cada hora */
  .grupo-cab { padding: 11px 12px !important; }
  .viaje-empresa { font-size: 15px; margin-bottom: 8px; }
  .viaje-cab { gap: 10px; flex-wrap: nowrap; }
  .viaje-hora { font-size: 21px; }
  .viaje-fecha { font-size: 12px; }
  .viaje-medio { padding-top: 15px; min-width: 46px; }
  .viaje-dur { font-size: 11px; }
  .viaje-pie { justify-content: space-between; }
  .viaje-pie .btn-reservar { flex: 1; }
}