/* LISTOX: ajustes de presentación móvil. No modifica el diseño de escritorio. */
@media (max-width: 600px) {
 body { overflow-wrap: break-word; }
 input, select, textarea { max-width: 100%; min-width: 0; font-size: 16px; }
 button, .boton, .btn-primary, .btn-secondary { max-width: 100%; white-space: normal; overflow-wrap: anywhere; min-height: 44px; }
 .encabezado { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
 .encabezado > nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; overflow: visible; padding: 0; }
 .encabezado > nav a { white-space: normal; }
 .acciones-sesion { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 320px; }
 .acciones-sesion .boton { width: 100%; margin: 0; }
 .pagina-inicio h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.2; letter-spacing: -.5px; }
 .pagina-inicio .hero { padding: 32px 5%; gap: 24px; }
 .pagina-inicio .hero-contenido, .pagina-inicio .titulo-seccion,
 .pagina-inicio .seccion-publicar, .pagina-inicio .panel-destacado,
 .pagina-inicio .tarjeta, .pagina-inicio .opcion { text-align: center; min-width: 0; }
 .pagina-inicio .panel-destacado { width: 100%; margin-inline: auto; }
 .pagina-inicio .beneficios { align-items: center; }
 .pagina-inicio .numero { margin-inline: auto; }
 .pagina-inicio .opcion { align-items: center; }
 .pagina-inicio .mini-estadistica { flex-direction: column; align-items: center; gap: 6px; }
 footer { align-items: center; text-align: center; }
 .modal-contenido { width: calc(100% - 24px); padding: 24px 18px; max-height: 85vh; max-height: calc(100dvh - 32px); overflow-y: auto; }
 .modal-contenido h2, .form-auth h3 { text-align: center; }
 .form-auth { min-width: 0; }
 .form-auth input, .form-auth select, .form-auth > button { width: 100%; }
 .encabezado-cargas { flex-direction: column; align-items: center; justify-content: center; padding: 20px 14px; text-align: center; }
 .encabezado-cargas > p { width: 100%; }
 .navegacion-sesion { flex-wrap: wrap; justify-content: center; gap: 10px; margin-inline: auto; overflow: visible; }
 .navegacion-sesion .boton { flex: 1 1 140px; min-width: 0; max-width: 320px; text-align: center; }
 .contenedor { width: calc(100% - 24px); min-width: 0; }
 .admin-panel { min-width: 0; padding: 16px; }
 .admin-panel h1, .admin-panel h2, .admin-panel h3,
 #tituloPanel, #descripcionPanel, #estadoCargas { text-align: center; overflow-wrap: anywhere; }
 .admin-panel p, .admin-panel strong { overflow-wrap: anywhere; }
 .admin-panel article { min-width: 0; }
 .acordeon summary { min-height: 48px; padding: 14px 30px 14px 12px; overflow-wrap: anywhere; }
 .contenido-acordeon { min-width: 0; padding: 12px; }
 .contenido-acordeon .admin-panel { padding: 12px; }
 #formularioCarga, .formulario-oferta { min-width: 0; }
 #formularioCarga input, #formularioCarga select, #formularioCarga textarea,
 .formulario-oferta input, .formulario-oferta select { width: 100%; min-width: 0; }
 #formularioCarga textarea { resize: vertical; }
 #formularioCarga > button, .formulario-oferta > button,
 #listaCargas .btn-primary, #misCargas .boton, #misNegociaciones .boton { width: 100%; }
 .listox-tarjeta-ubicaciones, .listox-grupo-ubicacion,
 .listox-panel-mapa, .listox-resumen-ruta { padding: 12px; min-width: 0; }
 .listox-distribucion-ubicaciones { grid-template-columns: minmax(0, 1fr); gap: 14px; }
 .listox-datos-ruta { grid-template-columns: minmax(0, 1fr); }
 .listox-datos-ruta strong { font-size: 18px; overflow-wrap: anywhere; }
 .listox-panel-mapa h4, .listox-panel-mapa > p { text-align: center; }
 #mapaRecogida { height: 240px; }
 .listox-lista-sugerencias [role="option"], #sugerenciasDireccion [role="option"] { overflow-wrap: anywhere; }
 .listox-dialogo-contenido { padding: 24px 18px; }
 #accionesNotificacionListox { flex-direction: column; align-items: stretch; }
 #accionesNotificacionListox button { width: 100%; min-width: 0; }
 .pagina-vehiculos { padding: 24px 12px; }
 .contenedor-vehiculos, .tarjeta-vehiculo, .campo-vehiculo { min-width: 0; }
 .encabezado-vehiculos, #estadoVehiculo, #pasoVerificacion { text-align: center; }
 .tarjeta-vehiculo { padding: 20px 16px; }
 .form-vehiculo { grid-template-columns: minmax(0, 1fr); }
 .form-vehiculo input, .form-vehiculo select { width: 100%; min-width: 0; font-size: 16px; }
 .form-vehiculo button { width: 100%; }
 .volver-listox { display: block; text-align: center; }
 .pagina-admin .admin-contenedor { width: calc(100% - 24px); max-width: 1000px; padding: 0; margin: 24px auto; }
 .pagina-admin .admin-panel { padding: 16px; }
 .pagina-admin .admin-panel .admin-panel { padding: 12px; }
 .pagina-admin .admin-panel > .etiqueta { display: block; text-align: center; }
 .pagina-admin .admin-panel h1 { font-size: clamp(25px, 7.5vw, 32px); line-height: 1.2; letter-spacing: -.5px; }
 .pagina-admin #adminResumen > div { grid-template-columns: minmax(0, 1fr) !important; }
 .pagina-admin .admin-panel .boton { width: 100%; min-width: 0; margin-top: 8px; }
 .pagina-admin #listaTransportadores > article,
 .pagina-admin #listaClientes > article,
 .pagina-admin #contenidoVehiculos > article { min-width: 0; overflow-wrap: anywhere; }
 .pagina-admin .admin-enlace { display: block; text-align: center; }
 .pagina-legado { padding: 16px 12px; }
 .pagina-legado main { min-width: 0; max-width: 100%; margin: 16px auto; padding: 20px 16px; box-sizing: border-box; }
 .pagina-legado h1 { text-align: center; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
 .btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--morado, #5b2dc9);
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  text-align: center;
 }
 .btn-primary { background: var(--morado, #5b2dc9); color: white; }
 .btn-secondary { background: white; color: var(--morado, #5b2dc9); }
 .pagina-admin .admin-panel > p, .pagina-admin #adminEstado,
 .pagina-admin #adminResumen { text-align: center; }
}
@media (max-width: 600px) {
 .pagina-cargas #misCargas button,
 .pagina-cargas #misNegociaciones button,
 .pagina-cargas #listaCargas button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  margin-block: 6px;
  border: 1px solid #dcd2fa;
  border-radius: 10px;
  background: white;
  color: var(--morado, #5b2dc9);
  font: inherit;
  font-weight: 700;
  text-align: center;
 }
 .pagina-cargas #misCargas button.btn-primary,
 .pagina-cargas #misNegociaciones button.btn-primary,
 .pagina-cargas #listaCargas button.btn-primary { background: var(--morado, #5b2dc9); color: white; }
}